Recommended Free Tools
NG8103 means a standalone component uses a structural control-flow directive such as *ngIf, *ngFor or *ngSwitch without importing the directive it needs. Add the specific directive to the component’s imports, or import CommonModule. If your Angular version supports built-in control flow, you can also consider replacing structural syntax with @if or @for.
What NG8103 means
Angular’s NG8103 extended diagnostic flags a missing directive import in a standalone component template. Without the directive, Angular may treat a structural directive binding such as ngIf as a property binding on an HTML element; Angular warns that this can fail at runtime. See Angular’s NG8103 documentation.
As an Amazon Associate I earn from qualifying purchases.
The warning is not fixed just by making it disappear: the template still needs the directive dependency unless you change the template to use another supported form of control flow.
Free tools Windows power users keep installed
One-click scans. No signup required.
Fix it by importing the directive or CommonModule
Import only the directive you use
For a standalone component that uses *ngIf, import NgIf from @angular/common and include it in the component’s imports. Use the corresponding directive for other structural syntax, such as NgFor for *ngFor.
#1 Best Overall
import { Component } from '@angular/core';
import { NgIf } from '@angular/common';
@Component({
standalone: true,
imports: [NgIf],
template: '<p *ngIf="isReady">Ready</p>'
})
export class ExampleComponent {
isReady = true;
}This keeps the component’s dependency list narrow and explicit. Check the current Angular API documentation for NgIf and NgFor.
Import CommonModule for a broader set of common features
If the component needs several common directives or pipes, import CommonModule from @angular/common instead. It exports common directives and pipes, including NgIf and NgForOf. This is broader than importing one directive. See Angular’s CommonModule API page.
For an NgModule-based feature area
In a feature area organized around NgModules, CommonModule is the conventional import for common directives. Do not add BrowserModule to a feature module as a workaround; Angular’s v18 NgModule FAQ notes that BrowserModule is for the root application module and re-exports CommonModule. Follow the guidance for your project’s Angular version. See the Angular v18 NgModule FAQ.
Consider built-in control flow for newer Angular projects
Angular’s built-in control-flow syntax uses @if, @for and related blocks directly in templates, so these constructs do not require importing CommonModule for control flow. Angular documents this syntax as available since v17. Its current API pages mark NgIf and NgFor deprecated since v20.0 and direct developers to @if and @for, respectively. Confirm your project’s Angular version and compatibility before migrating. See NgIf and NgFor.
Rank #3
Run Angular’s migration schematic
Angular provides an official control-flow migration schematic:
ng generate @angular/core:control-flowUse its --path option to limit migration to a workspace subdirectory. Review the changes rather than assuming the new syntax is behaviorally identical: Angular documents a difference in view reuse between @for and *ngFor for certain tracking-expression changes. The control-flow migration guide describes the migration.
Check why the warning appears
NG8103 is an extended diagnostic. Angular requires strictTemplates to be enabled for extended diagnostics to emit; NG8103 has no additional configuration requirement. See Angular’s Extended Diagnostics documentation.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Angular allows the check to be suppressed with angularCompilerOptions.extendedDiagnostics.checks.missingControlFlowDirective = "suppress". Suppression only hides the warning; it does not import the directive or prevent the possible runtime binding failure. Prefer correcting the component imports or updating the template.
Quick Recap
Choose the right fix
| Approach | Best fit | Trade-off |
|---|---|---|
| Import the specific directive | A standalone component needs one or a few structural directives. | Narrow, explicit dependency list. |
| Import CommonModule | A component or NgModule feature area needs several common directives or pipes. | Brings in a broader set than a single directive. |
| Use built-in control flow | The project’s Angular version supports the syntax and you want to migrate to @if/@for. |
Review migration changes, including documented view-reuse differences for some tracking-expression changes. |
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.
