Recommended Free Tools
NG8001 means Angular cannot resolve an element in a template. Check that the tag matches the component’s selector, then make sure the component is available in that template’s scope: add it to a standalone component’s imports, or declare and expose it through the relevant NgModule. Use a schema only when the tag is intentionally a browser custom element; a schema does not make a missing Angular component available.
What NG8001 means
Angular reports NG8001: Invalid Element when it cannot resolve a template tag as a valid HTML element or as an Angular component or directive matching that element. The diagnostic identifies the element Angular could not resolve. Find its use in the template, then check the tag and the component dependencies available to that template.
As an Amazon Associate I earn from qualifying purchases.
How do I fix NG8001: “x” is not a known element?
- Find the tag in the template. Use the element name in the diagnostic to locate where it appears. If it is used in more than one template, check each occurrence.
- Compare the tag with the selector. Open the component definition and compare its
selectorwith the tag in the template. Fix spelling, punctuation, or case differences so the template uses the selector as declared. See Angular’s Component API. - Check the template’s dependency scope. The component must be available to the component whose template uses it. Follow the standalone or NgModule path below.
- If it is a library component, verify the library’s exports and recent changes. Check documentation and exports for the versions installed in your project. If the spelling and scope are correct but the error persists, Angular also recommends restarting the development server.
Make an Angular component available to the template
The right fix depends on how the component using the tag is configured. A schema is not a substitute for either dependency path.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallStandalone component
Add the component or other template dependency to the imports array in the standalone component that owns the template. For example, if AppComponent uses <app-alert>, import the component that declares that selector:
#1 Best Overall
@Component({
standalone: true,
selector: 'app-root',
imports: [AlertComponent],
template: '<app-alert></app-alert>'
})
export class AppComponent {}Use the actual component class and selector from your project. Angular describes standalone component dependencies in its advanced component configuration guide.
NgModule-based component
An NgModule-based component must be declared in an NgModule. If the component is used by a template belonging to a different module, the module that declares it must export it, and the consuming module must import the declaring module.
- Declare the component in its owning module’s
declarations. - Add it to that module’s
exportsif templates in another module need to use it. - Import the owning module into the module that declares the consuming component.
If the component is only used by templates in its own module, it does not need to be exported for that use.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
When the tag is an intentional custom element
A browser custom element, sometimes called a Web Component, is not automatically an Angular component. If the unrecognized tag is intentionally a dash-case custom element, Angular’s CUSTOM_ELEMENTS_SCHEMA allows the documented dash-case non-Angular elements and properties during template validation. Add the schema to the relevant standalone component or NgModule configuration, as appropriate for the project’s Angular version.
Rank #3
Schema allowance only addresses Angular’s template validation. The browser still needs an implementation registered for the custom tag; for example, a custom element class is registered through the browser’s customElements.define() API. Angular Elements can turn an Angular component into a custom element; see Angular’s Custom Elements guide.
When creating a custom element from an Angular component, avoid using the Angular component’s own selector as the custom-element tag. Angular warns that this can result in two component instances on one DOM element.
Why not use NO_ERRORS_SCHEMA?
NO_ERRORS_SCHEMA is much broader: it accepts any property on any element. Angular’s API documentation says its use is generally discouraged because it prevents useful validation and may hide real template errors. It can make a misspelled tag or property stop producing a diagnostic without fixing the underlying problem.
Free tools Windows power users keep installed
One-click scans. No signup required.
Use CUSTOM_ELEMENTS_SCHEMA only when the tag really is an intentional custom element and its names fit the schema’s documented dash-case scope. For an Angular component, correct the selector or dependency scope instead.
Choose the fix based on what the tag represents
| What the tag is | What to check or change | What the change does |
|---|---|---|
| Angular component in a standalone template | Add its component class to the consuming component’s imports. |
Makes that dependency available to the template. |
| Angular component in an NgModule-based template | Declare it in an NgModule; if another module consumes it, export it from the owning module and import that module in the consumer. | Makes the component available through the NgModule scope. |
| Intentionally custom browser element | Use CUSTOM_ELEMENTS_SCHEMA for the documented dash-case names and properties, and ensure the browser-side element is registered. |
Allows Angular template validation and, separately, supplies the element implementation at runtime. |
| Unknown tag or broad template-validation problem | Do not use NO_ERRORS_SCHEMA as a blanket workaround; identify the tag or property and correct its source. |
Preserves useful Angular template diagnostics. |
If the error remains
- Confirm the error points to the template you edited and that the spelling matches the selector exactly.
- For a standalone template, check the
importsof the component that owns that template, not just imports elsewhere in the application. - For NgModules, trace the full declaration, export, and import relationship between the component and the consuming template.
- For a library dependency, verify that the installed library version exports the component and that its current usage instructions match your installed Angular version.
- Restart the development server after checking these causes if the diagnostic persists.
Angular’s documentation describes general guidance; project-specific behavior can depend on the Angular and library versions in use. The standalone migration guide covers an incremental migration path, but migrating an application is not required to fix NG8001.
Quick Recap
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.
