Directive de control flow manquante

Ce diagnostic vérifie qu'un composant standalone qui utilise des directives de control flow connues (comme *ngIf, *ngFor, *ngSwitchCase ou *ngSwitchDefault) dans un template importe aussi ces directives, soit individuellement, soit en important le CommonModule.

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

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

Quel est le problème ?

Utiliser une directive de control flow sans l'importer échouera à l'exécution, car Angular tente de se lier à une propriété ngIf de l'élément HTML, qui n'existe pas.

Que faire à la place ?

Assurez-vous que la directive de control flow correspondante est importée.

Une directive peut être importée individuellement :

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

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

ou vous pouvez importer l'ensemble du CommonModule, qui contient toutes les directives de control flow :

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

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

Prérequis de configuration

strictTemplates doit être activé pour qu'un diagnostic étendu soit émis. missingControlFlowDirective n'a pas d'autre prérequis que strictTemplates.

Et si je ne peux pas l'éviter ?

Ce diagnostic peut être désactivé en modifiant le fichier tsconfig.json du projet :

{
  "angularCompilerOptions": {
    "extendedDiagnostics": {
      "checks": {
        "missingControlFlowDirective": "suppress"
      }
    }
  }
}

Consultez la configuration des diagnostics étendus pour en savoir plus.