Ao criar components, o Angular gera um ID único de component para cada component. Isso é gerado usando os metadados do component Angular, incluindo, mas não limitado a: seletores, o número de host bindings, nomes de propriedades da classe, queries de view e content. Quando dois metadados de components são idênticos (frequentemente compartilhando o mesmo seletor), ocorrerá uma colisão de geração de ID.
IDs de components são usados internamente no Angular:
- para anotações extras de nós do DOM para encapsulamento de estilo
- durante a hidratação para restaurar o estado da aplicação após renderização no servidor.
Para evitar problemas que podem ser causados pela colisão de ID de component, é recomendado resolvê-los conforme descrito abaixo.
Exemplo de uma colisão de ID de Component
@Component({ selector: 'my-component', template: 'complex-template',})class SomeComponent {}@Component({ selector: 'my-component', template: 'empty-template',})class SomeMockedComponent {}Ter esses dois components definidos irá disparar uma colisão de geração de ID e durante o desenvolvimento um aviso será exibido.
Depurando o erro
A mensagem de aviso inclui o nome da classe dos dois components cujos IDs estão colidindo.
O problema pode ser resolvido usando uma das soluções abaixo:
- Altere o seletor de um dos dois components. Por exemplo, usando um pseudo-seletor sem efeito como
:not()e um nome de tag diferente.
@Component({ selector: 'my-component:not(p)', template: 'empty-template',})class SomeMockedComponent {}- Adicione um atributo host extra a um dos components.
@Component({ selector: 'my-component', template: 'complex-template', host: {'some-binding': 'some-value'},})class SomeComponent {}