Angular Basics : Dépannage des erreurs d’éléments inconnus

L’erreur NG8001 signale lorsqu’il y a un élément ou un composant inconnu dans votre code angulaire. Voici quelques-unes des causes, des solutions et des étapes pour éviter une telle erreur.

Avec la complexité croissante des pages Web d’aujourd’hui, de nouvelles technologies ont fait leur apparition. L’une de ces technologies est Angular JS, un cadre populaire pour le développement d’applications d’une seule page.

Malgré cela, les erreurs angulaires peuvent être difficiles à déboguer et à résoudre. Dans cet article, nous allons essayer de résoudre l’une des erreurs les plus courantes que vous pouvez rencontrer lors de l’utilisation d’Angular – une erreur appelée « ‘X’ n’est pas un élément connu », également appelée Angular Error NG8001. C’est particulièrement déroutant car cette erreur peut survenir de différentes manières et avec différentes causes. Cet article fournit une explication détaillée de toutes ces causes et également comment les résoudre.

Qu’est-ce que l’erreur angulaire NG8001 ?

Une erreur angulaire est une erreur qui se produit lors de l’exécution d’une application angulaire. Il existe diverses raisons pour lesquelles une erreur angulaire peut se produire, allant des erreurs de syntaxe dans le code angulaire aux erreurs dans le système d’exploitation ou le matériel sous-jacent. Cela peut rendre les erreurs angulaires difficiles à déboguer et à résoudre.

L’erreur « Erreur angulaire NG8001 : élément ou composant HTML inconnu » est une erreur d’exécution qui se produit lorsque le compilateur angulaire rencontre un jeton inattendu. Cela peut se produire lorsque le modèle Angular contient une erreur de syntaxe ou lorsque le compilateur Angular rencontre une erreur TypeScript.

L’erreur ressemblera à ceci dans le compilateur :

NG0304: '${tagName}' is not a known element: ....

Les causes de l’erreur angulaire NG8001

Il existe plusieurs raisons potentielles pour l’erreur angulaire NG8001. Une possibilité est que la CLI angulaire ne soit pas installée correctement. Une autre possibilité est que le projet Angular ne soit pas configuré correctement ou qu’il y ait une erreur dans la configuration du projet. Il est également possible que l’erreur soit causée par un conflit entre différentes versions d’Angular.

Comment réparer l’erreur angulaire NG8001

Exemple 1 : Erreur NG8001 : Router-Outlet n’est pas un élément connu

Erreur dans src/app/components/layout/layout.component.html:8:17 – erreur NG8001 : router-outlet n’est pas un élément connu :

1. Si router-outlet est un composant angulaire, puis vérifiez qu’il fait partie de ce module.
2. Si router-outlet est un composant Web, puis ajoutez CUSTOM_ELEMENTS_SCHEMA au @NgModule.schemas de ce composant pour supprimer ce message.

Code dans mon app.component :

<router-outlet></router-outlet>

Solution:
La première chose que j’ai faite a été d’importer Module routeur sur le module externe, comme ceci :

@NgModule({
    declarations:[
        AlertsComponent,
        FooterComponent,
        LogoutComponent,
        MessageComponent,
        SearchComponent,
        SidebarComponent,
        TopbarComponent,
        UserInfoComponent,
        LayoutComponent,
    ],
    imports:[
        RouterModule
    ]
})
export class LayoutModule {}

Ensuite, j’ai importé le module sur app.module.ts :

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AppRoutingModule,
    BrowserModule,
    LayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Exemple 2 : NG8001 : Mat-Spinner n’est pas un élément connu

Erreur NG8001 : mat-spinner n’est pas un élément connu :

1. Si mat-spinner est un composant angulaire, puis vérifiez qu’il fait partie de ce module.
2. Si mat-spinner est un composant Web, puis ajoutez CUSTOM_ELEMENTS_SCHEMA au @NgModule.schemas de ce composant pour supprimer ce message. ("[ERROR ->]<mat-spinner></mat-spinner>")

Code dans mon app.module.ts :

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Code dans mon app.component :

<mat-spinner></mat-spinner>

Solution:
Dans l’exemple ci-dessus, il vous manque le MatProgressSpinnerModule dans vos importations AppModule. Cela devrait ressembler à ci-dessous et fonctionnera alors :

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    MatProgressSpinnerModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Exemple 3 : Erreur NG8001 : Mat-Card n’est pas un élément connu :

Erreur: mat-card n’est pas un élément connu :

1. Si mat-card est un composant angulaire, puis vérifiez qu’il fait partie de ce module.
2. Si mat-card est un composant Web, puis ajoutez CUSTOM_ELEMENTS_SCHEMA au @NgModule.schemas de ce composant pour supprimer ce message. ("[ERROR ->]<mat-card> </mat-card>”)

Code dans mon app.module.ts :

import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { LOCALE_ID, NgModule } from "@angular/core";
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import {
  MatButtonModule,
  MatFormFieldModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatSelectModule,
  MatSidenavModule,
  MatCardModule,
  MatTableModule
} from "@angular/material";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
    MatButtonModule,
    MatFormFieldModule,
    MatIconModule,
    MatListModule,
    MatInputModule,
    MatSelectModule,
    MatSidenavModule,
    MatCardModule,
    MatTableModule
  ],....
})
export class AppModule {}

j’essaie d’utiliser employees.component.html dans mon src/app/employees mais ça ne marche pas.

<mat-card></mat-card>

Solution:
Déclarer EmployeesComponent dans le même module que celui où vous avez importé le MatCardModule comme ça:

declarations: [
    EmployeesComponent
],
imports: [
    MatCardModule
]

Essayez d’importer MatCardModule comme:

import { MatCardModule } from '@angular/material/card';

Plus de techniques de dépannage qui peuvent vous aider

Mise à niveau vers AngularJS version 1.3 ou supérieure

Si vous utilisez une ancienne version d’Angular, vous pouvez parfois résoudre l’erreur ng8001 en passant à la dernière version. Cette erreur est causée par un conflit entre Angular et la nouvelle version de jQuery. En mettant à niveau vers la dernière version d’Angular, vous pouvez résoudre ce conflit et éviter l’erreur.

Mettre à jour Angular CLI et Package Manager

Si vous voyez l’erreur « NG8001 » dans votre projet Angular, il est probable que vous utilisiez une version plus récente de la CLI Angular que celle prise en charge par la version d’Angular que vous utilisez. Pour résoudre ce problème, vous pouvez soit rétrograder la CLI Angular vers une version plus ancienne, soit mettre à niveau Angular vers une version plus récente.

Utiliser la compilation anticipée (AoT) et les cartes sources

Si vous voyez le message d’erreur « Erreur angulaire NG8001 » et que vous ne savez pas où se trouve l’erreur, vous pouvez utiliser la CLI angulaire pour vous aider à la trouver. Pour ce faire, exécutez la commande suivante :

ng serve --aot --source-map

Cela compilera votre application Angular avec la compilation Ahead-of-Time (AoT) et les cartes source. Avec la compilation AoT, le compilateur Angular trouvera et signalera toutes les erreurs dans votre application.

Avec les cartes source, vous pourrez voir le code source d’origine (avant qu’il ne soit compilé en JavaScript), ce qui facilitera la recherche et la correction de l’erreur. Cette commande ne fonctionnera que sur Angular 13 ou version ultérieure.

Comment éviter l’erreur « X n’est pas un élément connu » (NG8001)

Ce sont les cinq étapes que j’effectue lorsque j’obtiens une telle erreur, et la mise en œuvre de ces étapes lorsque vous écrivez votre programme peut vous aider à éviter que cette erreur ne se produise.

1. Assurez-vous que le nom est correct. (Vérifiez également le sélecteur défini dans le composant.)
2. Déclarez le composant dans un module.
3. S’il se trouve dans un autre module, exportez le composant.
4. S’il se trouve dans un autre module, importez ce module.
5. Redémarrez le terminal et réessayez.

Note: Lorsque l’erreur se produit lors des tests unitaires, assurez-vous d’avoir déclaré le composant.

Derniers mots

Avec cet article de dépannage, nous espérons que vous pourrez éviter cette erreur et l’empêcher d’entraver vos projets importants. Si vous avez d’autres questions ou préoccupations, veuillez nous contacter à tout moment.