セレクター競合

2つ以上のコンポーネントが同じ要素セレクターを使用しています。要素に関連付けられるコンポーネントは1つだけなので、セレクターはAngularが曖昧さを避けるために一意の文字列である必要があります。

このエラーは、1つのノードに2つのセレクターを適用してそれぞれが異なるコンポーネントに一致する場合、または1つのセレクターをノードに適用して複数のコンポーネントに一致する場合に、ランタイムで発生します。

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: `
    <!-- このノードには、stroked-buttonとraised-buttonの2つのセレクターがあり、どちらも異なるコンポーネントに一致するため、StrokedBtnComponentとRaisedBtnComponent、NG0300が発生します。 -->

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

エラーのデバッグ

エラーメッセージの要素名を使用して、コードベースで同じセレクター宣言を使用している場所を探します。

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

各コンポーネントが一意のCSSセレクターを持つことを確認します。これにより、Angularは期待するコンポーネントをレンダリングします。

このセレクタータグ名を持つ複数のコンポーネントが見つからない場合は、Angular Materialなどのインポートされたコンポーネントライブラリのコンポーネントを確認します。衝突を回避するために、セレクターのベストプラクティスに従っていることを確認してください。