Skip to content
Latchkey

Angular "NG8001: is not a known element" template error in CI

Angular's AOT template compiler reports NG8001 when a template uses a custom element tag that is not a known component in the current compilation context. The build fails because the element cannot be resolved.

What this error means

ng build fails with "error NG8001: 'app-widget' is not a known element" and a hint to add it to a module or imports, even when ng serve once tolerated it.

ng
Error: src/app/home.component.html:3:1 - error NG8001: 'app-widget' is not a known element:
1. If 'app-widget' is an Angular component, then verify that it is part of this module.
2. If 'app-widget' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' ...

Common causes

The component is not imported or declared

A standalone component is missing from the host component's imports, or a module-based component is not declared/exported in a shared module.

A real web component lacks the schema

A genuine custom element is used without CUSTOM_ELEMENTS_SCHEMA, so Angular treats the unknown tag as an error.

How to fix it

Import or declare the component

  1. Identify the tag and the component it should map to.
  2. Add the component to the standalone imports, or declare/export it in its module.
  3. Re-run the build.
home.component.ts
@Component({
  selector: 'app-home',
  standalone: true,
  imports: [WidgetComponent],
})

Add the schema for true web components

Only for genuine custom elements, add CUSTOM_ELEMENTS_SCHEMA to the component or module.

home.component.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({ schemas: [CUSTOM_ELEMENTS_SCHEMA] })

How to prevent it

  • Import standalone components everywhere their selector is used.
  • Export shared components from the module that declares them.
  • Run ng build (AOT) in CI so NG8001 is caught before merge.

Related guides

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