The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
NG8103 means a standalone Angular component uses a structural control-flow directive such as *ngIf, *ngFor, or *ngSwitch without importing that directive. Add the directive to the component’s imports, or import CommonModule. If your Angular version supports built-in control flow, you can instead use @if or @for, which do not need CommonModule.
What NG8103 means
Angular’s NG8103 diagnostic flags a missing directive import in a standalone component template. Without the directive, Angular may treat syntax such as *ngIf as an attempt to bind to an ngIf property on an HTML element; that property does not exist, so the template can fail at runtime. See Angular’s NG8103 documentation.
The warning is useful even if the template appears to render as expected: the missing dependency has not been correctly declared. Suppressing the diagnostic only hides the warning; it does not make the directive available.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Fix NG8103 in a standalone component
Import the directive used by the template from @angular/common, then add it to the standalone component’s imports array. For example, if the template uses *ngIf:
#1 Best Overall
import { Component } from '@angular/core';
import { NgIf } from '@angular/common';
@Component({
standalone: true,
selector: 'app-status',
imports: [NgIf],
template: '<p *ngIf="isReady">Ready</p>'
})
export class StatusComponent {
isReady = true;
}For a template that uses several common directives or pipes, import CommonModule instead:
import { CommonModule } from '@angular/common';
@Component({
standalone: true,
selector: 'app-status',
imports: [CommonModule],
template: '<p *ngIf="isReady">Ready</p>'
})
export class StatusComponent {
isReady = true;
}CommonModule exports common directives and pipes, including NgIf and NgForOf. Choose the individual directive when you want a narrow, explicit component dependency; choose the module when the template needs a broader set of common functionality. The CommonModule API reference lists its exports.
What to import for each control-flow directive
*ngIf: importNgIf, orCommonModule.*ngFor: importNgFor, orCommonModule.*ngSwitchand its related directives: import the required directive or directives from@angular/common, or useCommonModule.
Check the component that owns the template: an import elsewhere in the application does not automatically make a directive available in a standalone component. Angular’s NgIf API and NgFor API document the structural directives.
What to do in an NgModule-based feature area
In an NgModule-based feature area, import CommonModule in the feature module that declares the component using the structural directives. Do not add BrowserModule to a feature module as a workaround. Angular’s v18 NgModule FAQ explains that BrowserModule re-exports CommonModule for the root application module and advises against importing BrowserModule in feature modules.
Rank #3
When to use Angular’s built-in control flow
Angular’s built-in template control flow uses syntax such as @if and @for. It is part of the template language and does not require importing CommonModule for that functionality. Built-in control flow has been available since Angular v17. The current API documentation marks NgIf and NgFor deprecated since Angular v20.0 and points developers to @if and @for.
For example, a conditional can be written as:
@if (isReady) {
<p>Ready</p>
}Switching syntax is a migration choice, not a requirement for clearing NG8103. If retaining structural syntax is preferable for the project, importing the missing directive or CommonModule addresses the missing dependency directly. See Angular’s control-flow migration guide for the supported migration approach.
Run and review the control-flow migration
Angular provides a schematic for migrating templates:
ng generate @angular/core:control-flowThe schematic’s --path option can limit the migration to a workspace subdirectory. Review the changed templates and tests rather than assuming the transformation is behavior-neutral: Angular documents a difference in view reuse between @for and *ngFor for certain changes to tracking expressions.
Check whether the diagnostic is enabled
Angular extended diagnostics require strictTemplates to be enabled. NG8103 has no additional per-diagnostic configuration requirement. The Extended Diagnostics guide describes the compiler setting.
If necessary, Angular lets you suppress this diagnostic with the following compiler option:
{
"angularCompilerOptions": {
"extendedDiagnostics": {
"checks": {
"missingControlFlowDirective": "suppress"
}
}
}
}Suppression is not a fix for a missing import. Use it only if you deliberately want to silence the warning and have separately addressed the template’s runtime behavior.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Quick Recap
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.
