Collision de selectors

Deux composants ou plus utilisent le même selector d'élément. Comme un seul composant peut être associé à un élément, les selectors doivent être des chaînes uniques pour éviter toute ambiguïté pour Angular.

Cette erreur survient à l'exécution lorsque vous appliquez à un même nœud deux selectors correspondant chacun à un composant différent, ou lorsque vous appliquez à un nœud un seul selector qui correspond à plusieurs composants.

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

@Component({
  selector: '[stroked-button]',
  templateUrl: './stroked-button.html',
})
export class StrokedBtn {}

@Component({
  selector: '[raised-button]',
  templateUrl: './raised-button.html',
})
export class RaisedBtn {}

@Component({
  selector: 'app-root',
  template: `
    <!-- This node has 2 selectors: stroked-button and raised-button, and both match a different component: StrokedBtnComponent, and RaisedBtnComponent , so NG0300 will be raised  -->

    <button stroked-button raised-button></button>
  `,
})
export class App {}

Déboguer l'erreur

Utilisez le nom d'élément indiqué dans le message d'erreur pour rechercher dans votre base de code les endroits 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 rend le composant que vous attendez.

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.