Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstalliTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Angular NG8023 means two or more components available in a template’s compilation scope match the same element. Angular cannot choose between them, so find the competing selectors—including selectors from imported libraries—and make the intended component the sole match.
What NG8023 means
NG8023 is an Angular compiler error. Angular describes it as: “Two or more components in the compilation scope match the same element in a template.” The conflict is between component selectors, not simply between arbitrary template elements. Angular’s NG8023 guidance explains the collision and the selector-focused fix.
For example, if two components use the selector comp, then a template element such as <comp></comp> matches both. Angular cannot associate two components with that one element, so the selector match is ambiguous.
Recommended Free Tools
How to find the conflicting components
- Start with the diagnostic. Note the element or selector identified by the NG8023 error and locate that element in the template.
- Search component declarations. Find the relevant
@Componentdeclarations and compare theirselectorvalues with the element. Check element, attribute, and other selector forms that could match it. - Check the full compilation scope. Include components made available through the template’s imports, not just components declared in the same application area. If the conflict is not visible in your own code, inspect imported component libraries; Angular specifically notes Angular Material as an example to consider.
- Make the intended match unique. Adjust the competing selectors so only the intended component matches that element. Angular requires selectors to be sufficiently unique but does not prescribe one universal naming convention.
How selector collisions cause the error
Angular’s documented example has two imported components with attribute selectors [stroked-button] and [raised-button], both applied to the same <button>. Because both component selectors match that button, Angular reports NG8023. The relevant question is whether multiple component selectors match one element—not whether the selector strings look identical.
#1 Best Overall
After identifying the collision, decide which component should own the element and change the selectors or their use so the other component no longer matches it. Avoid changing unrelated template code: the fix belongs at the selector overlap identified by the diagnostic.
How NG8023 differs from NG0300
NG8023 is the build-time compiler error for a component selector collision; Angular identifies runtime NG0300 as its runtime counterpart. Angular’s component acceptance tests demonstrate NG0300 with two components that both declare selector: 'comp' and a template containing <comp></comp>. The distinction is when the collision is reported: during compilation for NG8023, versus at runtime for NG0300.
Official error reference
Angular lists NG8023 among its compiler errors in the Error Encyclopedia. Its detailed explanation is available in Angular’s Japanese-localized NG8023 entry.
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.
