コンポーネントを作成する際に、Angularは各コンポーネントに一意のコンポーネントIDを生成します。これは、Angularコンポーネントメタデータ（セレクター、ホストバインディングの数、クラスプロパティ名、ビューおよびコンテンツクエリなど）を使用して生成されます。2つのコンポーネントメタデータが同一である場合（多くの場合、同じセレクターを共有している場合）、ID生成の衝突が発生します。
コンポーネントIDはAngular内部で使用されます。
- スタイルのカプセル化のためにDOMノードの追加注釈用
- サーバーサイドレンダリング後にアプリケーションの状態を復元するためにハイドレーション中
コンポーネントIDの衝突によって発生する可能性のある問題を回避するには、以下に示す解決方法に従うことをお勧めします。
コンポーネントID衝突の例
@Component({ selector: 'my-component', template: 'complex-template',})class SomeComponent {}@Component({ selector: 'my-component', template: 'empty-template',})class SomeMockedComponent {}
これらの2つのコンポーネントを定義すると、ID生成の衝突が発生し、開発中に警告が表示されます。
エラーのデバッグ
警告メッセージには、IDが衝突している2つのコンポーネントのクラス名が含まれています。
この問題は、以下のいずれかの解決策を使用して解決できます。
- 2つのコンポーネントのいずれかのセレクターを変更します。たとえば、効果のない疑似セレクター
：not（）と異なるタグ名を使用します。
@Component({ selector: 'my-component:not(p)', template: 'empty-template',})class SomeMockedComponent {}
- コンポーネントのいずれかに追加のホスト属性を追加します。
@Component({ selector: 'my-component', template: 'complex-template', host: {'some-binding': 'some-value'},})class SomeComponent {}