Skip to content
Latchkey

Angular "X is not a known element" in CI

The AOT compiler saw a custom tag in a template but no declared Angular component matches it and it is not a known HTML element. Either the component is not imported into the module, or the tag is a real web component that needs a schema.

What this error means

ng build fails with "error NG8001: 'app-user-card' is not a known element" and a hint listing what to check, pointing at a template file.

ng build
Error: src/app/home/home.component.html:8:0 - error NG8001:
'app-user-card' is not a known element:
1. If 'app-user-card' is an Angular component, then verify that it is part of this module.

Common causes

The component is not declared or imported

The used component is not in the current module declarations/imports (or the standalone component imports), so the tag is unknown.

A real web component without a schema

A genuine custom element (not an Angular component) requires CUSTOM_ELEMENTS_SCHEMA so the compiler does not treat the tag as unknown.

How to fix it

Declare or import the component

  1. If it is your component, add it to the module declarations or import its module.
  2. For standalone, add the component to the using component or module imports.
  3. Rebuild and confirm the element resolves.
home.module.ts
@NgModule({
  declarations: [HomeComponent, UserCardComponent],
})
export class HomeModule {}

Add CUSTOM_ELEMENTS_SCHEMA for real web components

Only for genuine custom elements, add the schema so the compiler allows the unknown tag.

home.module.ts
@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class HomeModule {}

How to prevent it

  • Declare every component in exactly one module and import that module where used.
  • Reserve CUSTOM_ELEMENTS_SCHEMA for actual web components, not to silence typos.
  • Keep standalone imports arrays complete.

Related guides

Tired of flaky CI? Latchkey auto-heals failed jobs and retries them for you. Start free →