This migration helps projects remove imports of the CommonModule inside components by adding the minimal set of directive and pipe imports each template requires (for example, NgIf, NgFor, AsyncPipe, etc.).
Run the schematic using the following command:
ng generate @angular/core:common-to-standalone
Options
| Option | Details |
|---|---|
path |
The path (relative to project root) to migrate. Defaults to ./. Use this to incrementally migrate a subset of your project. |
Example
Before:
import { Component } from '@angular/core';import { CommonModule } from '@angular/common';@Component({ selector: 'app-example', standalone: true, imports: [CommonModule], template: ` <div *ngIf="show"> {{ data | async | json }} </div> `})export class ExampleComponent { show = true; data = Promise.resolve({ message: 'Hello' });}
After running the migration (component imports added, CommonModule removed):
import { Component } from '@angular/core';import { AsyncPipe, JsonPipe, NgIf } from '@angular/common';@Component({ selector: 'app-example', standalone: true, imports: [AsyncPipe, JsonPipe, NgIf], template: ` <div *ngIf="show"> {{ data | async | json }} </div> `})export class ExampleComponent { show = true; data = Promise.resolve({ message: 'Hello' });}