Description

This diagnostics ensures that a standalone component which uses known control flow directives (such as *ngIf, *ngFor, *ngSwitch) in a template, also imports those directives either individually or by importing the CommonModule.

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

@Component({
  standalone: true,
  // Template uses `*ngIf`, but no corresponding directive imported.
  template: `<div *ngIf="visible">Hi</div>`,
  // …
})
class MyComponent {}

How to fix the problem

Make sure that a corresponding control flow directive is imported.

A directive can be imported individually:

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

@Component({
  standalone: true,
  imports: [NgIf],
  template: `<div *ngIf="visible">Hi</div>`,
  // …
})
class MyComponent {}

or you could import the entire CommonModule, which contains all control flow directives:

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

@Component({
  standalone: true,
  imports: [CommonModule],
  template: `<div *ngIf="visible">Hi</div>`,
  // …
})
class MyComponent {}