Angular: NG8103: The *ngIf directive was used, but neither the NgIf directive nor the CommonModule was imported

Meaning

Standalone components do not get CommonModule for free. Either import the directive you use (NgIf, NgFor, NgClass) or move to the new block syntax (@if, @for, @switch), which needs no import at all.

Common causes

• Standalone component using *ngIf / *ngFor / ngClass / ngStyle without importing them
• Component generated as standalone but old templates pasted from an NgModule project
• CommonModule removed from an NgModule that declares the component
• Using NgFor syntax inside ng-template of another component without its import

Detailed fix by platform

Code examples

<!-- before: <li *ngFor="let u of users">{{ u.name }}</li> -->
@if (users.length) {
  <ul>
    @for (u of users; track u.id) {
      <li>{{ u.name }}</li>
    }
  </ul>
} @else {
  <p>No users yet</p>
}

How to diagnose

1. Component — Standalone or in an NgModule?
2. Directive — Which structural directive is used?
3. Version — Angular 17+ (control flow available)?

More related errors