Angular’s NG0912 warning means two different component definitions generated the same component ID. The most reliable fixes are to give components that should be distinct a unique selector, or—if their selectors must stay the same—to add a distinguishing host attribute. The warning names the classes involved; inspect those definitions and their metadata rather than suppressing the warning.
What NG0912 means
Angular generates an ID from component metadata. That metadata includes selectors, host bindings, class property names, and view or content queries. If two component definitions produce the same ID, Angular reports NG0912. A shared selector is a common cause, but it is not the only possible metadata overlap. Angular’s NG0912 documentation shows two components with the same my-component selector and different templates: different template text alone does not ensure different component IDs.
As an Amazon Associate I earn from qualifying purchases.
The ID is used for extra annotations on DOM nodes related to style encapsulation and for hydration, which restores application state after server-side rendering. In emulated style encapsulation, Angular adds an attribute to elements in a component’s template and uses that attribute in the component’s CSS selectors. Angular’s styling guide explains this mechanism.
How to fix the collision
Choose between the documented fixes based on whether the selector is part of a public or template-facing API.
#1 Best Overall
| Fix | Use it when | What to change |
|---|---|---|
| Give one component a unique selector | The components should be distinct in templates and their selectors can differ. | Change one component’s selector so the metadata no longer collides. |
| Add a distinguishing host attribute | The components must retain the same selector. | Add an extra host property or attribute to one component’s metadata. Angular’s example uses a host property such as some-binding. |
These are Angular’s documented resolutions. Changing view encapsulation is not a documented fix for NG0912; investigate and distinguish the component metadata instead. Angular’s error guidance covers the remedies, while its styling guide describes encapsulation.
How to find the second component
- Read the full warning. It identifies the two component classes involved.
- Find both definitions. Inspect their selectors, host bindings, class property names, and view or content queries for overlapping metadata.
- Apply the appropriate fix. Use a unique selector if the components should be distinct in templates; otherwise, add a distinguishing host attribute to one definition.
- If the classes seem unrelated, check indirect sources. Look at test mocks, library secondary entry points, and selector-less components created dynamically. These contexts have appeared in historical Angular issue reports, including issue #51850 and issue #53282. They are leads for tracing the named definitions, not evidence of a general framework defect or current-release behavior.
Why you should not ignore the warning
Angular uses component IDs for style-related DOM annotations and hydration. Because a collision can affect those internal uses, treat NG0912 as a metadata problem to resolve rather than an informational message to hide. Start with the two classes in the warning and make their metadata distinct using one of Angular’s documented fixes.
Quick Recap
Rank #3
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →
