The Problem

Angular standalone components must be explicitly imported into the component that uses them. Unlike module-based components, they are not automatically available through declarations or exports.

Symptoms

  • "The component X is not declared in any Angular module" error
  • Template shows unknown element warning
  • Component renders as empty custom element
  • Works in one module but not in another

Real Error Message

bash
NG8001: 'app-user-card' is not a known element:
1. If 'app-user-card' is an Angular component, then verify that it is
   included in the '@Component.imports' of this component.
2. If 'app-user-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA'
   to the '@Component.schemas' of this component.

Common Causes

Cause 1: Missing Import in Consumer Component

typescript
// dashboard.component.ts
@Component({
  selector: 'app-dashboard',
  template: `<app-user-card [user]="user"></app-user-card>`,
  // WRONG: UserCardComponent not in imports!
})
export class DashboardComponent {}

Cause 2: Module-Based Component Used as Standalone

```typescript // UserCardComponent is declared in a module, not standalone @NgModule({ declarations: [UserCardComponent], exports: [UserCardComponent] }) export class UserCardModule {}

// WRONG: Importing the component directly instead of the module @Component({ imports: [UserCardComponent] // Should be UserCardModule }) ```

How to Fix It

Fix 1: Import Standalone Component

```typescript import { UserCardComponent } from './user-card.component';

@Component({ selector: 'app-dashboard', standalone: true, imports: [UserCardComponent, CommonModule], template: <app-user-card [user]="user"></app-user-card> }) export class DashboardComponent {} ```

Fix 2: Convert Module Component to Standalone

typescript
@Component({
  selector: 'app-user-card',
  standalone: true,
  imports: [CommonModule],
  template: `...`
})
export class UserCardComponent {
  @Input() user!: User;
}

Fix 3: Import Module in Module-Based App

typescript
@NgModule({
  imports: [UserCardModule],  // Import the MODULE, not the component
  declarations: [DashboardComponent]
})
export class DashboardModule {}

Fix 4: Create a Shared Imports Module

```typescript // shared-imports.ts import { UserCardComponent } from './user-card.component'; import { StatsWidgetComponent } from './stats-widget.component'; import { DataTableComponent } from './data-table.component';

export const SHARED_STANDALONE_COMPONENTS = [ UserCardComponent, StatsWidgetComponent, DataTableComponent ];

// In any component: @Component({ imports: [...SHARED_STANDALONE_COMPONENTS, CommonModule] }) ```