NG8001 - Invalid Element

Réponse courte

Vous essayez d'utiliser un composant qui n'a pas été correctement déclaré ou importé dans votre application. Autrement dit, vous avez oublié d'importer le composant dans le tableau imports du composant. Nous parlons des composants, mais ça peut arriver avec les modules, les pipes, les directives, etc.

L'erreur NG8001 est l'une des erreurs les plus courantes que vous pouvez rencontrer lors du développement avec Angular. Elle se produit lorsque vous essayez d'utiliser un composant qui n'a pas été correctement déclaré ou importé dans votre application.

Pour mieux comprendre, prenons un exemple de la vie quotidienne : imaginez que vous organisez une fête chez vous. Si quelqu'un essaie d'entrer sans être sur la liste des invités, le videur ne le laissera pas passer. C'est exactement ce qui se passe avec Angular : si vous essayez d'utiliser un composant qui n'a pas été "invité" (importé), Angular ne le reconnaîtra pas.

Comment se manifeste l'erreur ?

Voici un exemple typique qui provoque cette erreur :

app.component.ts

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

@Component({
  standalone: true,
  selector: 'app-root',
  template: `
    <p>Voir la console</p>
    <app-users />
  `,
})
export class AppComponent {
}

users.component.ts

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

@Component({
  standalone: true,
  selector: 'app-users',
  template: `
    <div>Liste des utilisateurs</div>
  `
})
export class UsersComponent {
}

Cette configuration générera l'erreur :

NG8001: 'app-users' is not a known element

Comment résoudre l'erreur ?

Pour corriger cette erreur, vous devez importer le composant dans le tableau imports du composant parent :

app.component.ts

import { UsersComponent } from './users.component';
import { Component } from '@angular/core';

@Component({
  standalone: true,
  imports: [UsersComponent], // Ajout de l'import ici
  selector: 'app-root',
  template: `
    <p>Voir la console</p>
    <app-users />
  `,
})
export class AppComponent {
}

ASTUCE

Si vous utilisez plusieurs composants, n'oubliez pas de tous les ajouter dans le tableau imports :

imports: [UsersComponent, OtherComponent, AnotherComponent]

Cas particulier : Web Components

Si vous utilisez des Web Components personnalisés, vous devrez ajouter le schéma CUSTOM_ELEMENTS_SCHEMA :

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

@Component({
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  // ... reste de la configuration
})
export class AppComponent {
}

Plus d'informations sur les Web Components : Web Components