NG0912 Angular Origin: On your device Angular 15+ Last updated 15 Oct 2026

Angular: NG0912: Component ID generation collision detected. Components 'A' and 'B' with selector 'app-x' use the same ID

Angular generated the same internal id for two different components — usually two components with the same selector, template and styles.

Exact message you may see NG0912: Component ID generation collision detectedComponent ID generation collision detecteduse the same ID
Explore the map of this error Full error map →
Seen on: Angular TypeScript

Meaning

Component ids are derived from selector, template, styles and more. Collisions are a warning in dev mode and can break style encapsulation (one component gets the other's styles). Make the components differ (unique selector, class name) or set an explicit id in the decorator.

Common causes

  • Two components with the same selector, template and styles
  • Copy-pasted component not edited
  • A library bundled twice with different versions
  • Generated components from a template with identical metadata
  • Test doubles redefining a component with the same decorator

⚡ Quick fix

  1. Give each component a unique selector
  2. Set a distinct id in the @Component options
  3. Deduplicate the library version (check lockfile)

Detailed fix by platform

Angular

  1. Rename the selector or add id: 'unique-id' to @Component({...})
  2. Run npm ls @angular/core to spot duplicate Angular copies

How to diagnose

  1. Components — Which two are named?
  2. Duplicates — Same metadata?
  3. Packages — Two copies of the same library?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

Can't find stylesheet to import — Angular (Sass): Error: Can't find stylesheet to import. @import 'variables'; (Angular)Can't find stylesheet…Cannot find control with name — Angular: Error: Cannot find control with name: 'email' (reactive forms) (Angular)Cannot find control w…exceeded maximum budget — Angular build: Error: bundle initial exceeded maximum budget. Budget 1.00 MB was not met by 120.00 kB with a total of 1.12 MB (Angular)exceeded maximum budg…NG0300 — Angular: NG0300: Multiple components match node with tagname app-x: A and B (Angular)NG0300NG6008 — Angular: NG6008: Component X is standalone, and cannot be declared in an NgModule. Did you mean to import it instead? (Angular)NG6008NG8001 — Angular: NG8001: 'app-item' is not a known element — verify that it is included in the component's imports (Angular)NG8001Schema validation failed with the following errors — Angular CLI: Schema validation failed with the following errors: Data path "" must NOT have additional properties(xyz) (Angular)Schema validation fai…NG0912

Explore the map of this error Full error map →

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.