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.

Practice

1. What is the main benefit of migrating from NgModules to standalone components in Angular?

easy

A. Simplifies the app by removing the need for NgModules

B. Requires more boilerplate code for each component

C. Makes the app slower to load

D. Forces use of class-based components only

Solution

1. Step 1: Understand NgModules role

   NgModules group components and services but add complexity.

2. Step 2: Benefits of standalone components

   Standalone components remove NgModules, making the app simpler and easier to maintain.

3. Final Answer:

   Simplifies the app by removing the need for NgModules -> Option A

4. Quick Check:

   Standalone components simplify Angular apps by removing NgModules [OK]

Hint: Standalone means no NgModules needed, simpler setup [OK]

Common Mistakes:

• Thinking standalone components require more code
• Believing NgModules improve app speed
• Confusing standalone with class-based restriction

2. Which of the following is the correct way to declare a standalone component in Angular?

easy

A. @Component({ standalone: false, selector: 'app-hello', template: 'Hello' })

B. @Component({ module: true, selector: 'app-hello', template: 'Hello' })

C. @NgModule({ standalone: true, declarations: [HelloComponent] })

D. @Component({ standalone: true, selector: 'app-hello', template: 'Hello' })

Solution

1. Step 1: Identify standalone component syntax

   The correct property is standalone: true inside the @Component decorator.

2. Step 2: Check other options

   The other options are incorrect: one sets standalone: false, another uses invalid module property, and one misuses @NgModule.

3. Final Answer:

   @Component({ standalone: true, selector: 'app-hello', template: '<p>Hello</p>' }) -> Option D

4. Quick Check:

   standalone: true inside @Component decorator [OK]

Hint: Look for standalone: true inside @Component decorator [OK]

Common Mistakes:

• Using @NgModule instead of @Component for standalone
• Setting standalone to false or missing it
• Confusing module property with standalone

3. Given this code snippet, what will be the output when the app runs?

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
{{ title }}
`
})
export class AppComponent {
  title = 'Hello Angular Standalone';
}

bootstrapApplication(AppComponent);

medium

A. undefined

B. Error: bootstrapModule is required

C. Hello Angular Standalone

D. Blank page with no content

Solution

1. Step 1: Understand bootstrapApplication usage

   Using bootstrapApplication with a standalone component boots the app correctly.

2. Step 2: Check component template and data

   The template shows <h1>{{ title }}</h1> and title is set to 'Hello Angular Standalone'.

3. Final Answer:

   <h1>Hello Angular Standalone</h1> -> Option C

4. Quick Check:

   bootstrapApplication with standalone component renders {{ title }} [OK]

Hint: bootstrapApplication runs standalone component, shows title [OK]

Common Mistakes:

• Expecting bootstrapModule instead of bootstrapApplication
• Assuming title is undefined without constructor
• Thinking template won't render without NgModule

4. Identify the error in this code snippet migrating from NgModules:

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
Welcome
`
})
export class AppComponent {}

bootstrapApplication(AppComponent, {
  providers: []
});

medium

A. bootstrapApplication requires bootstrapModule instead

B. Missing imports array for dependencies in @Component

C. Standalone components cannot have providers

D. Selector 'app-root' is invalid for standalone components

Solution

1. Step 1: Check standalone component dependencies

   If the component uses other modules or components, they must be listed in the imports array inside @Component.

2. Step 2: Analyze given code

   The component has no imports array. The template uses *ngIf, which requires CommonModule in imports.

3. Final Answer:

   Missing imports array for dependencies in @Component -> Option B

4. Quick Check:

   Standalone components need imports: [CommonModule] for directives like *ngIf [OK]

Hint: Standalone components need imports for dependencies [OK]

Common Mistakes:

• Thinking bootstrapApplication needs bootstrapModule
• Believing providers are disallowed in standalone
• Assuming selector rules changed for standalone

5. You want to migrate an Angular app from NgModules to standalone components. Which combination correctly replaces the traditional bootstrap method and module imports?

1. Use bootstrapApplication() instead of platformBrowserDynamic().bootstrapModule()
2. Add standalone: true to components
3. Use imports array inside @Component for dependencies
4. Keep NgModule declarations as before

hard

A. Apply steps 1, 2, and 3; remove NgModules completely

B. Only step 1 is needed; keep NgModules and declarations

C. Apply steps 2 and 4; bootstrapModule remains required

D. Use step 4 only; standalone components are optional

Solution

1. Step 1: Replace bootstrap method

   Use bootstrapApplication() to start the app without NgModules.

2. Step 2: Convert components to standalone

   Add standalone: true to components to remove NgModule dependency.

3. Step 3: Manage dependencies with imports

   Use imports array inside @Component to include needed modules or components.

4. Step 4: Remove NgModules

   NgModules are no longer needed and should be removed for full migration.

5. Final Answer:

   Apply steps 1, 2, and 3; remove NgModules completely -> Option A

6. Quick Check:

   bootstrapApplication + standalone: true + imports array, no NgModules [OK]

Hint: Use bootstrapApplication + standalone + imports, drop NgModules [OK]

Common Mistakes:

• Trying to keep NgModules with bootstrapApplication
• Forgetting to add standalone: true to components
• Not using imports array for dependencies