iTechGuides 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’s NG8001 error means it cannot resolve an element used in a template. First check that the tag matches the intended component’s selector; then make sure that component is available in the template’s dependency scope. Only use a schema to allow an intentionally registered browser custom element—not to paper over a missing Angular component.
What NG8001 means
Angular reports NG8001: Invalid Element when a template contains a tag Angular does not recognize as a standard HTML element or as a component whose selector matches that tag. The diagnostic names the unresolved element and points you toward the template where it appears.
The cause is usually a misspelled tag, a mismatch with the component’s selector, or a component that is not in the template’s dependency scope. If the tag is meant to be a browser custom element rather than an Angular component, the schema and browser-registration checks are different.
How to fix NG8001: “is not a known element”
- Locate the tag. Use the element name in the diagnostic to find the template file or files where it is used.
- Compare the tag with the selector. Check the component’s
selectorin its Component metadata. The selector must match the tag in the template, including spelling and punctuation. - Check how the component enters the template’s scope. Use the standalone or NgModule path below, depending on how the consuming component is configured.
- If it is a library component, verify its exports. Check the library’s documentation and exports for the versions installed in your project. Angular’s NG8001 guidance also recommends restarting the server if the preceding checks do not resolve the error.
For a standalone component: add the dependency to imports
A standalone component manages the dependencies its template uses through its own imports metadata. Import the component there if it is standalone. If it is declared by an NgModule, import the NgModule that makes it available.
#1 Best Overall
import { Component } from '@angular/core';
import { StatusBadgeComponent } from './status-badge.component';
@Component({
selector: 'app-dashboard',
standalone: true,
imports: [StatusBadgeComponent],
template: '<app-status-badge></app-status-badge>'
})
export class DashboardComponent {}This example assumes that StatusBadgeComponent is standalone and its selector is app-status-badge. If the dependency is not standalone, import the NgModule that exports it instead. See Angular’s advanced component configuration documentation for component configuration details.
For an NgModule-based component: declare, export, and import
A non-standalone component must be declared by an NgModule. If a component in another module uses it, the declaring module must export it, and the consuming module must import that module. A declaration alone does not make the component available everywhere.
- Declare the component in its owning NgModule.
- Export it from that NgModule if templates in another module need to use it.
- Import the owning NgModule in the NgModule that declares the consuming component.
Use the module that owns the template containing the unresolved tag to trace this relationship. Angular’s Component API describes component configuration; the required scope depends on whether the component is standalone or NgModule-based. Moving a project to standalone components is not required to fix NG8001; Angular documents migration as an incremental process with cases that may need manual fixes in its standalone migration guide.
If the tag is an intentional browser custom element
A Web Component, or browser custom element, is not automatically an Angular component. Angular’s CUSTOM_ELEMENTS_SCHEMA allows dash-case custom element names and dash-case properties in templates. Add it to the relevant standalone component’s schemas or NgModule’s schemas, as appropriate. This permits Angular’s template validation to accept the tag; it does not implement or register the element in the browser.
Rank #3
The element’s implementation must also be loaded and registered. For example, a custom-element class is registered using the browser’s customElements.define() API. Angular Elements can turn an Angular component into a custom element, but Angular cautions against using that component’s Angular selector as the custom-element tag: doing so can create two component instances on one DOM element. See Angular’s Custom Elements guide for the distinction between creating and registering an element and allowing its tag in an Angular template.
Choose the fix based on what the tag represents
| What the tag is | What to check or change | What the change does |
|---|---|---|
| An Angular component used in a standalone template | Add the component, or its exporting NgModule, to the standalone component’s imports. |
Makes the dependency available to that template. |
| An Angular component used across NgModules | Declare it in its owning module, export it, and import that module where the consuming component is declared. | Makes the component available through the module scope. |
| An intentional browser custom element | Use CUSTOM_ELEMENTS_SCHEMA for the relevant template scope, and ensure the custom element is registered by the browser-side implementation. |
Allows Angular’s template validation to accept the supported dash-case names and properties; registration supplies the actual behavior. |
| A tag accepted only by broad schema suppression | Avoid using NO_ERRORS_SCHEMA as a general fix; correct the dependency, selector, or custom-element setup instead. |
Preserves useful template checks rather than suppressing errors indiscriminately. |
Why NO_ERRORS_SCHEMA is not a shortcut
NO_ERRORS_SCHEMA accepts any property on any element, so it is much broader than the custom-element schema. Angular’s API documentation says: “The usage of this schema is generally discouraged because it prevents useful validation and may hide real errors in your template.” It does not add a missing Angular component to the template’s dependency scope, and suppressing the diagnostic can leave a misspelled selector or missing dependency unfixed.
Quick Recap
When the error persists
- Re-check the exact selector and tag in the template named by the diagnostic.
- Trace the dependency from the template’s standalone
importsor its declaring NgModule through the required exports and imports. - For library components, confirm the installed library version still exports the component through the path you are using.
- If the earlier checks are correct, restart the development server, as Angular’s NG8001 troubleshooting guidance suggests.
- For version-specific behavior, consult documentation matching the Angular and library versions in the project; the general guidance does not establish the behavior of every release or third-party library version.
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.
