Two or more components in the compilation scope match the same element in a template. Because Angular can associate only one component with a given element, selectors must be unique enough to prevent ambiguity.
NOTE: This is the build-time equivalent of the runtime error NG0300: Selector Collision. Detecting this at compile time means the error surfaces immediately.
import {Component} from '@angular/core';@Component({ selector: '[stroked-button]', template: '',})export class StrokedBtn {}@Component({ selector: '[raised-button]', template: '',})export class RaisedBtn {}@Component({ selector: 'app-root', // NG8023: StrokedBtn and RaisedBtn both match this element. template: `<button stroked-button raised-button></button>`, imports: [StrokedBtn, RaisedBtn],})export class App {}Debugging the error
Use the element name from the error message to search for places where you're using the same selector declaration in your codebase:
@Component({ selector: 'YOUR_STRING',…})Ensure that each component has a unique CSS selector. This will guarantee that Angular renders the component you expect.
If you're having trouble finding multiple components with this selector tag name, check for components from imported component libraries, such as Angular Material. Make sure you're following the best practices for your selectors to prevent collisions.