Directive structurelle manquante

Ce diagnostic vérifie qu'un composant standalone qui utilise des directives structurelles personnalisées (par exemple *select ou *featureFlag) dans un template dispose des imports nécessaires pour ces directives.

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

@Component({
  // Template uses `*select`, but no corresponding directive imported.
  imports: [],
  template: `<p *select="let data; from: source">{{ data }}</p>`,
})
class MyComponent {}

Quel est le problème ?

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

Que faire à la place ?

Assurez-vous que la directive structurelle correspondante est importée dans le composant :

import {Component} from '@angular/core';
import {SelectDirective} from 'my-directives';

@Component({
  // Add `SelectDirective` to the `imports` array to make it available in the template.
  imports: [SelectDirective],
  template: `<p *select="let data; from: source">{{ data }}</p>`,
})
class MyComponent {}

Prérequis de configuration

strictTemplates doit être activé pour qu'un diagnostic étendu soit émis. missingStructuralDirective 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": {
        "missingStructuralDirective": "suppress"
      }
    }
  }
}

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