Dois ou mais components usam o mesmo seletor de elemento. Como só pode haver um único component associado a um elemento, os seletores devem ser strings únicas para prevenir ambiguidade para o Angular.
Este erro ocorre em runtime quando você aplica dois seletores a um único nó, cada um dos quais corresponde a um component diferente, ou quando você aplica um único seletor a um nó e ele corresponde a mais de um component.
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: ` <!-- Este nó tem 2 seletores: stroked-button e raised-button, e ambos correspondem a um component diferente: StrokedBtnComponent e RaisedBtnComponent, então NG0300 será lançado --><button stroked-button raised-button></button>`,})export class AppComponent {}
Depurando o erro
Use o nome do elemento da mensagem de erro para procurar lugares onde você está usando a mesma declaração de seletor em sua base de código:
@Component({selector: 'YOUR_STRING',…})
Certifique-se de que cada component tem um seletor CSS único. Isso garantirá que o Angular renderize o component que você espera.
Se você está tendo problemas para encontrar múltiplos components com este nome de tag de seletor, verifique components de bibliotecas de components importadas, como Angular Material. Certifique-se de que você está seguindo as boas práticas para seus seletores para prevenir colisões.