Migrating from NgModules in Angular - Step-by-Step Execution

Concept Flow - Migrating from NgModules

Start with NgModule-based app

↓

Identify NgModules to migrate

↓

Convert NgModules to standalone components

↓

Replace NgModule imports with standalone imports

↓

Update bootstrap to standalone component

↓

Test app functionality

↓

Done

This flow shows the steps to change an Angular app from using NgModules to using standalone components and imports.

Execution Sample

Angular

import { Component } from '@angular/core';

@Component({
  standalone: true,
  selector: 'app-root',
  template: `<h1>Hello Standalone!</h1>`
})
export class AppComponent {}

Defines a standalone Angular component replacing the need for an NgModule.

Execution Table

Step	Action	Before	After	Effect
1	Identify NgModule AppModule	App uses @NgModule	AppModule exists	Ready to migrate
2	Convert AppComponent to standalone	AppComponent without standalone	AppComponent with standalone: true	No longer needs NgModule declaration
3	Remove AppModule imports	AppModule imports other modules	No AppModule, imports moved to components	Simplifies imports
4	Bootstrap standalone AppComponent	Bootstrap via AppModule	Bootstrap via standalone AppComponent	App starts without NgModule
5	Run app	App uses NgModule system	App runs with standalone components	Migration complete

💡 All NgModules replaced by standalone components and imports; app bootstrapped without NgModule.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
AppComponent	NgModule component	Standalone component	Standalone component	Standalone component	Standalone component
AppModule	Defined and used	Defined and used	Removed	Removed	Removed
Bootstrap method	NgModule bootstrap	NgModule bootstrap	NgModule bootstrap	Standalone bootstrap	Standalone bootstrap

Key Moments - 3 Insights

Why do we add 'standalone: true' to the component?

Adding 'standalone: true' tells Angular this component works without needing an NgModule, as shown in execution_table step 2.

How do we bootstrap the app without an NgModule?

Instead of bootstrapping the NgModule, we bootstrap the standalone component directly, as shown in execution_table step 4.

What happens to imports from NgModules after migration?

Imports move from NgModules to standalone components or are imported directly where needed, removing the NgModule import layer (execution_table step 3).

Visual Quiz - 3 Questions

Look at the execution_table, at which step is the AppComponent converted to standalone?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Check the 'Action' column for 'Convert AppComponent to standalone' in execution_table.

According to variable_tracker, what is the state of AppModule after step 3?

A Removed

B Defined and used

C Partially removed

D Still bootstrapping

💡 Hint

Look at the 'AppModule' row under 'After Step 3' in variable_tracker.

If we forget to add 'standalone: true' to a component, what happens during migration?

A Component still works standalone

B Angular throws an error or requires NgModule

C App bootstraps normally

D Imports are ignored

💡 Hint

Refer to key_moments about the importance of 'standalone: true' and execution_table step 2.

Concept Snapshot

Migrating from NgModules:
- Add 'standalone: true' to components
- Remove NgModule declarations and imports
- Bootstrap standalone components directly
- Move imports to standalone components
- Test app to confirm migration

Full Transcript

Migrating from NgModules in Angular means changing your app to use standalone components instead of NgModules. First, identify your NgModules. Then, add 'standalone: true' to your components to make them standalone. Remove NgModule imports and declarations. Change your bootstrap process to start with the standalone component instead of the NgModule. Finally, test your app to ensure it works without NgModules. This simplifies your app structure and uses Angular's modern features.