# Angular: NG8103: The *ngIf directive was used, but neither the NgIf directive nor the CommonModule was imported

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

A standalone component uses `*ngIf`, `*ngFor` or `ngClass` without importing the directive — or should migrate to the built-in `@if` / `@for` control flow.

## Meaning

Standalone components do not get `CommonModule` for free. Either import the directive you use (`NgIf`, `NgFor`, `NgClass`) or move to the new block syntax (`@if`, `@for`, `@switch`), which needs no import at all.

## Common causes

- Standalone component using `*ngIf` / `*ngFor` / `ngClass` / `ngStyle` without importing them
- Component generated as standalone but old templates pasted from an NgModule project
- `CommonModule` removed from an NgModule that declares the component
- Using `NgFor` syntax inside `ng-template` of another component without its import

## Quick fix

1. Replace with `@if` / `@for` (no imports)
2. Or add `NgIf`, `NgFor`, `NgClass` to the component's `imports`
3. Run the control-flow migration schematic

## Detailed fix by platform

### Angular CLI

1. Migrate automatically: `ng generate @angular/core:control-flow`
2. Manual: `imports: [NgIf, NgFor]` from `@angular/common`

## Code examples

### Built-in control flow

```html
<!-- before: <li *ngFor="let u of users">{{ u.name }}</li> -->
@if (users.length) {
  <ul>
    @for (u of users; track u.id) {
      <li>{{ u.name }}</li>
    }
  </ul>
} @else {
  <p>No users yet</p>
}
```

## How to diagnose

1. **Component** — Standalone or in an NgModule?
2. **Directive** — Which structural directive is used?
3. **Version** — Angular 17+ (control flow available)?

---
Source: [WhatIsMyError](https://whatismyerror.com/errors/angular/ng8103-ngif-not-imported)