Migrating from NgModules in Angular

Introduction

NgModules were used to organize Angular apps. Now, Angular uses standalone components to make code simpler and faster.

You want to create a new Angular app without NgModules.

You want to simplify your existing app by removing NgModules.

You want faster app startup and smaller bundles.

You want to use new Angular features like standalone components and signals.

You want easier code sharing between parts of your app.

Syntax

Angular

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

@Component({
  selector: 'app-example',
  standalone: true,
  template: `<h1>Hello from standalone component!</h1>`,
  imports: []
})
export class ExampleComponent {}

Use standalone: true to mark a component as standalone.

Use imports array to add other standalone components, directives, or pipes.

Examples

A simple standalone component with inline template.

Angular

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

@Component({
  selector: 'app-hello',
  standalone: true,
  template: `<p>Hello World!</p>`
})
export class HelloComponent {}

Standalone component importing CommonModule to use *ngFor.

Angular

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

@Component({
  selector: 'app-list',
  standalone: true,
  imports: [CommonModule],
  template: `<ul><li *ngFor="let item of items">{{item}}</li></ul>`
})
export class ListComponent {
  items = ['Apple', 'Banana', 'Cherry'];
}

Bootstrapping a standalone root component without NgModule.

Angular

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);

Sample Program

This example shows a full Angular app using a standalone root component. It lists fruits using *ngFor from CommonModule. No NgModules are used.

Angular

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h1>Welcome to Standalone Angular!</h1>
    <ul>
      <li *ngFor="let fruit of fruits">{{ fruit }}</li>
    </ul>
  `
})
export class AppComponent {
  fruits = ['Apple', 'Banana', 'Cherry'];
}

bootstrapApplication(AppComponent);

Important Notes

Standalone components replace the need for NgModules in many cases.

You can still use NgModules if needed, but standalone is the recommended modern way.

Remember to import necessary modules like CommonModule in standalone components to use Angular directives.

Summary

NgModules are no longer required; standalone components simplify Angular apps.

Use standalone: true and imports to build components without NgModules.

Bootstrap your app with bootstrapApplication() instead of platformBrowserDynamic().bootstrapModule().