Plusieurs composants correspondent au même élément

Deux composants ou plus de la portée de compilation correspondent au même élément d'un template. Comme Angular ne peut associer qu'un seul composant à un élément donné, les selectors doivent être suffisamment uniques pour éviter toute ambiguïté.

Note : C'est l'équivalent, au moment du build, de l'erreur d'exécution NG0300 : Collision de selectors. La détecter à la compilation fait apparaître l'erreur immédiatement.

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

@Component({
  selector: '[stroked-button]',
  template: '',
})
export class StrokedBtn {}

@Component({
  selector: '[raised-button]',
  template: '',
})
export class RaisedBtn {}

@Component({
  selector: 'app-root',
  // NG8023: StrokedBtn and RaisedBtn both match this element.
  template: `<button stroked-button raised-button></button>`,
  imports: [StrokedBtn, RaisedBtn],
})
export class App {}

Déboguer l'erreur

Utilisez le nom de l'élément indiqué dans le message d'erreur pour rechercher les endroits de votre code où vous utilisez la même déclaration de selector :

@Component({
  selector: 'YOUR_STRING',
…
})

Assurez-vous que chaque composant a un selector CSS unique. Cela garantit qu'Angular affiche le composant attendu.

Si vous avez du mal à trouver plusieurs composants avec ce nom de balise comme selector, vérifiez les composants issus de libraries de composants importées, comme Angular Material. Assurez-vous de suivre les bonnes pratiques pour vos selectors afin d'éviter les collisions.