2つ以上のコンポーネントが同じ要素セレクターを使用しています。要素に関連付けられるコンポーネントは1つだけなので、セレクターはAngularが曖昧さを避けるために一意の文字列である必要があります。
このエラーは、1つのノードに2つのセレクターを適用してそれぞれが異なるコンポーネントに一致する場合、または1つのセレクターをノードに適用して複数のコンポーネントに一致する場合に、ランタイムで発生します。
import { Component } from '@angular/core';@Component({ selector: '[stroked-button]', templateUrl: './stroked-button.component.html',})export class StrokedBtnComponent {}@Component({ selector: '[raised-button]', templateUrl: './raised-button.component.html',})export class RaisedBtnComponent {}@Component({ selector: 'app-root', template: ` <!-- このノードには、stroked-buttonとraised-buttonの2つのセレクターがあり、どちらも異なるコンポーネントに一致するため、StrokedBtnComponentとRaisedBtnComponent、NG0300が発生します。 --> <button stroked-button raised-button></button> `,})export class AppComponent {}
エラーのデバッグ
エラーメッセージの要素名を使用して、コードベースで同じセレクター宣言を使用している場所を探します。
@Component({ selector: 'YOUR_STRING', …})
各コンポーネントが一意のCSSセレクターを持つことを確認します。これにより、Angularは期待するコンポーネントをレンダリングします。
このセレクタータグ名を持つ複数のコンポーネントが見つからない場合は、Angular Materialなどのインポートされたコンポーネントライブラリのコンポーネントを確認します。衝突を回避するために、セレクターのベストプラクティスに従っていることを確認してください。