Angular: NG8001: 'app-item' is not a known element — verify that it is included in the component's imports

Meaning

Angular only compiles tags that map to a component, a known HTML element or a custom element that you allow. With standalone components, add the component to the imports array of the component that uses it. With NgModules, declare it in a module and export it from the module that owns it. <router-outlet> needs RouterOutlet, Material tags need their module.

Common causes

• Standalone component not added to the imports array of the parent
• Component declared in one NgModule but not exported to the module that uses it
• Typo in the selector, or the selector prefix differs (app- vs my-)
• Angular Material / third-party component module not imported (for example RouterOutlet, MatButtonModule)
• A Web Component used without CUSTOM_ELEMENTS_SCHEMA

Detailed fix by platform

Code examples

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ItemComponent } from './item.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, ItemComponent],   // every tag used in the template must be listed
  template: `<app-item></app-item><router-outlet></router-outlet>`,
})
export class AppComponent {}

How to diagnose

1. Tag — Exact tag and selector spelling?
2. Scope — Is the component imported (standalone) or declared and exported (module)?
3. Version — Standalone or NgModule project?

More related errors