Angular’s NG8023 compiler error means that two or more components available in a template’s compilation scope match the same element. Find the element named in the diagnostic, identify every component selector that matches it—including selectors from imported libraries—and make the intended component the only match.
What NG8023 means
Angular documents the error as: “Two or more components in the compilation scope match the same element in a template.” A component selector tells Angular which template elements a component applies to. When multiple components match one element, Angular cannot choose a single component, so compilation fails. NG8023 is a compiler error, listed in Angular’s error encyclopedia.
As an Amazon Associate I earn from qualifying purchases.
For example, if two components use the selector comp and a template contains <comp></comp>, both components match that element. Angular’s component acceptance tests illustrate the corresponding runtime collision as NG0300.
How to find the conflicting components
- Start with the diagnostic. Note the element Angular identifies; that is where the competing matches occur.
- Search component declarations. Find the relevant
@Componentdeclarations and compare theirselectorvalues with the element. Check selectors that match either the element name or its attributes. - Check the full compilation scope. Include components made available through imports, not just components defined in your application. An imported component library can supply the second match.
How to resolve NG8023
Change the colliding selectors so the intended component is the unique match for that element. Angular’s documented example has two attribute-selector components, [stroked-button] and [raised-button], both applied to the same <button>. When both components are in the compilation scope, the element matches both and Angular reports NG8023. Review the selectors and the template usage together, then make the selector match unambiguous.
#1 Best Overall
There is no universal naming convention prescribed in Angular’s guidance; the requirement is that selectors be sufficiently unique. Avoid changing unrelated template code before confirming which declarations actually match the named element.
How NG8023 differs from NG0300
NG8023 is detected by the compiler while building the application. NG0300 is Angular’s runtime counterpart for a selector collision. The distinction is when the ambiguity is reported; both concern multiple components matching the same element.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Official Angular guidance
Angular’s detailed NG8023 explanation is published on the official Japanese-localized Angular site and describes the error and debugging approach. The current English-language error index lists NG8023 among compiler errors.
Free tools Windows power users keep installed
One-click scans. No signup required.
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.
