Diagnostics étendus

De nombreux motifs de code sont techniquement valides pour le compilateur ou à l'exécution, mais peuvent comporter des subtilités ou des pièges. Ces motifs peuvent ne pas avoir l'effet attendu par le développeur, ce qui conduit souvent à des bugs. Le compilateur Angular inclut des « diagnostics étendus » qui identifient bon nombre de ces motifs, afin d'avertir les développeurs des problèmes potentiels et de faire respecter des bonnes pratiques courantes dans une base de code.

Diagnostics

Actuellement, Angular prend en charge les diagnostics étendus suivants :

Code	Nom
`NG8101`	`invalidBananaInBox`
`NG8102`	`nullishCoalescingNotNullable`
`NG8103`	`missingControlFlowDirective`
`NG8104`	`textAttributeNotBinding`
`NG8105`	`missingNgForOfLet`
`NG8106`	`suffixNotSupported`
`NG8107`	`optionalChainNotNullable`
`NG8108`	`skipHydrationNotStatic`
`NG8109`	`interpolatedSignalNotInvoked`
`NG8111`	`uninvokedFunctionInEventBinding`
`NG8112`	`unusedLetDeclaration`
`NG8113`	`unusedStandaloneImports`
`NG8114`	`unparenthesizedNullishCoalescing`
`NG8115`	`uninvokedTrackFunction`
`NG8116`	`missingStructuralDirective`
`NG8117`	`uninvokedFunctionInTextInterpolation`
`NG8021`	`deferTriggerMisconfiguration`

Configuration

Les diagnostics étendus sont des avertissements par défaut et ne bloquent pas la compilation. Chaque diagnostic peut être configuré avec l'une des catégories suivantes :

Catégorie d'erreur	Effet
`warning`	Par défaut - Le compilateur émet le diagnostic sous forme d'avertissement mais ne bloque pas la compilation. Le compilateur se termine tout de même avec le code de statut 0, même si des avertissements sont émis.
`error`	Le compilateur émet le diagnostic sous forme d'erreur et la compilation échoue. Le compilateur se termine avec un code de statut non nul si une ou plusieurs erreurs sont émises.
`suppress`	Le compilateur n'émet pas du tout le diagnostic.

La sévérité des vérifications peut être configurée via une option du compilateur Angular :

{
  "angularCompilerOptions": {
    "extendedDiagnostics": {
      "checks": {
        "invalidBananaInBox": "suppress"
      },
      "defaultCategory": "error"
    }
  }
}

Le champ checks associe le nom de chaque diagnostic à sa catégorie. Consultez Diagnostics pour la liste complète des diagnostics étendus et le nom à utiliser pour les configurer.

Le champ defaultCategory s'applique à tous les diagnostics qui ne sont pas explicitement listés dans checks. S'il n'est pas défini, ces diagnostics sont traités comme warning.

Les diagnostics étendus sont émis lorsque strictTemplates est activé. C'est nécessaire pour que le compilateur comprenne mieux les types dans chaque template Angular et fournisse des diagnostics précis et pertinents.

Versionnement sémantique

L'équipe Angular prévoit d'ajouter ou d'activer de nouveaux diagnostics étendus dans les versions mineures d'Angular (voir semver). Cela signifie que la mise à jour d'Angular peut faire apparaître de nouveaux avertissements dans votre base de code existante. Cela permet à l'équipe de livrer des fonctionnalités plus rapidement et de rendre les diagnostics étendus plus accessibles aux développeurs.

Cependant, définir "defaultCategory": "error" transforme ces avertissements en véritables erreurs. Une mise à jour de version mineure peut alors introduire des erreurs de compilation, ce qui peut être perçu comme un breaking change non conforme à semver. Tout nouveau diagnostic peut être désactivé ou rétrogradé en avertissement via la configuration ci-dessus, de sorte que l'impact d'un nouveau diagnostic devrait être minime pour les projets qui traitent les diagnostics étendus comme des erreurs par défaut. Utiliser l'erreur par défaut est un outil très puissant ; tenez simplement compte de cette mise en garde liée à semver au moment de décider si error est la bonne valeur par défaut pour votre projet.

Nouveaux diagnostics

L'équipe Angular est toujours ouverte aux suggestions de nouveaux diagnostics à ajouter. Les diagnostics étendus doivent généralement :

Détecter une erreur de développement courante et non évidente dans les templates Angular
Expliquer clairement pourquoi ce motif peut conduire à des bugs ou à un comportement non souhaité
Proposer une ou plusieurs solutions claires
Avoir un taux de faux positifs faible, idéalement nul
S'appliquer à la grande majorité des applications Angular (pas spécifique à une library non officielle)
Améliorer la justesse ou les performances du programme (pas le style, cette responsabilité revient à un linter)

Si vous avez une idée de diagnostic étendu qui répond à ces critères, envisagez de soumettre une demande de fonctionnalité.