459b275a3a
The commit adds messaging to the control flow template diagnostic to direct developers to the new built-in control flow syntax in Angular. PR Close #52268
1.9 KiB
@name Missing control flow directive
@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. Alternatively, use Angular's
built-in control flow.
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
Use Angular's built-in control flow instead.
import {Component} from '@angular/core';
@Component({
standalone: true,
template: @if (visible) { <div>Hi</div> },
// …
})
class MyComponent {}
Or 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 {}
@reviewed 2022-02-28