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

Need a 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
}

Need a 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;
}

Need a 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);

Need a hint?

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