Migrating from NgModules in Angular - Mini Project: Build & Apply

Migrating from NgModules to Standalone Components in Angular

📖 Scenario: You have an Angular app that uses the old NgModules system. You want to update it to use the new standalone components system introduced in Angular 17. This will make your app simpler and easier to maintain.

🎯 Goal: Update a simple Angular app by converting a module and its components into standalone components without NgModules.

📋 What You'll Learn

Create a basic Angular component with a template

Add a configuration variable to control display

Use the new standalone component syntax

Bootstrap the app with the standalone component

💡 Why This Matters

🌍 Real World

Modern Angular apps are moving away from NgModules to standalone components for simpler and faster development. This project shows how to migrate a basic app to this new style.

💼 Career

Many companies updating Angular apps need developers who understand standalone components and how to bootstrap apps without NgModules. This skill is essential for Angular developers working with Angular 17 and beyond.

1

Create a basic Angular component

Create a standalone Angular component called AppComponent with a selector app-root and a template that displays the text Welcome to Angular Standalone!. Use the @Component decorator with standalone: true.

Angular

# Create the AppComponent with selector 'app-root' and template 'Welcome to Angular Standalone!'
# Use @Component decorator with standalone: true

Hint

Use @Component with standalone: true and define the selector and template exactly as shown.

2

Add a configuration variable

Inside the AppComponent class, add a public boolean property called showMessage and set it to true. This will control whether the welcome message is shown.

Angular

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `Welcome to Angular Standalone!`
})
export class AppComponent {
  // Add showMessage property here
}

Hint

Declare showMessage as a public property initialized to true inside the class.

3

Use the configuration variable in the template

Update the AppComponent template to show the <h1> welcome message only if showMessage is true. Use Angular's *ngIf directive in the template.

Angular

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

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

Hint

Use *ngIf="showMessage" on the <h1> tag to show it only when showMessage is true.

4

Bootstrap the app with the standalone component

In the main main.ts file, bootstrap the Angular app using the AppComponent standalone component. Import bootstrapApplication from @angular/platform-browser and call it with AppComponent.

Angular

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

// Bootstrap the app with AppComponent
bootstrapApplication(AppComponent);

Hint

Import bootstrapApplication and call it with AppComponent to start the app without NgModules.

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