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

**Code:** `NG8001` · **Category:** Angular · **Seen on:** Angular, TypeScript

The template uses a tag Angular does not recognise as a component — it was never imported (standalone) or declared/exported (NgModule), or it is a custom element without a schema.

## 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`

## Quick fix

1. Add the component, directive or module to the `imports` of the component that uses the tag
2. In NgModules add it to `declarations` and to `exports` of the owning module
3. For real Web Components add `schemas: [CUSTOM_ELEMENTS_SCHEMA]`

## Detailed fix by platform

### Angular

1. Standalone: `imports: [ItemComponent, RouterOutlet]` in the `@Component` decorator
2. NgModule: put `ItemComponent` in `declarations` and `exports`, then import that module where the tag is used

### Angular CLI

1. Generate components with the CLI so selectors and exports are wired up: `ng generate component item`

## Code examples

### Import what the template uses

```typescript
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?

---
Source: [WhatIsMyError](https://whatismyerror.com/errors/angular/ng8001-is-not-a-known-element)