Understanding the Error: "Property 'ngForOf' is Not Provided by Any Applicable Directive on an Embedded Template"

If you’re working with Angular and have encountered the error "Property 'ngForOf' is not provided by any applicable directive on an embedded template," you’re not alone.

This error is a common stumbling block, especially for developers just starting with Angular’s *ngFor directive, which is used to iterate over a collection within templates.

The fix can be simple, but understanding the root cause helps avoid it in the future. In this guide, we’ll walk through why this happens, provide a variety of solutions, and include practical code examples along the way.

Why the Error Happens

This error usually indicates that Angular cannot find the directive to interpret the *ngFor syntax in your template. This often happens when the required CommonModule is missing, especially when using Angular modules like @NgModule.

CommonModule includes several basic Angular directives, including *ngFor and *ngIf. Without it, Angular has no knowledge of these directives and will throw an error.

Solution 1: Import CommonModule in Your Module

One of the most common reasons for this error is that the CommonModule is not imported in your module file. In Angular, each module needs access to CommonModule if it uses directives like *ngFor or *ngIf.

Here’s how you can add it:

// In your module file, usually app.module.ts or a feature module file

import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [YourComponent],
  imports: [CommonModule], // Ensure CommonModule is imported here
})
export class YourModule { }

By importing CommonModule, you ensure that Angular recognizes *ngFor and other basic directives in this module.

Solution 2: Check Your Angular Directive Syntax

Sometimes, syntax errors in Angular templates can be subtle but impactful. For example, the correct syntax for using *ngFor is *ngFor="let item of items".

Incorrect Syntax:


<div *ngForOf="let item in items">{{ item.name }}</div>

Correct Syntax:

<div *ngFor="let item of items">{{ item.name }}</div>

Notice the subtle difference: *ngFor, not *ngForOf. This can be easy to miss, but it’s crucial. Always double-check the syntax, as Angular is strict about these details.

Solution 3: Ensure Your Collection is Defined

Another reason for the error might be that the collection you are trying to iterate over is not defined or is null. For example, if you are trying to iterate over items, make sure items exists in your component class.

export class ListComponent {
  items: Array<{ name: string }> = [
    { name: 'Item 1' },
    { name: 'Item 2' },
    { name: 'Item 3' },
  ];
}

If items is undefined, Angular won’t be able to bind it, resulting in an error. Initializing an empty array (e.g., items = []) can also prevent this error.

Solution 4: Confirm the Angular Version Compatibility

Sometimes, version compatibility issues arise, especially if you’re using Angular libraries or third-party modules. For example, @angular/core and @angular/common versions should match. Using mismatched versions might lead to dependency errors, including this one.

To check for version mismatches, run:

ng version

Then, verify that both @angular/core and @angular/common are on the same version in your package.json.

Solution 5: Restart the Angular Development Server

Occasionally, Angular’s live development server may not detect changes to imports or configurations, leading to stale errors. If none of the above solutions work, try restarting the Angular server:

ng serve --open

Restarting ensures that Angular re-processes all dependencies, which can sometimes solve persistent errors.

Solution 6: Add Angular Language Service in the IDE

Some developers have found that this error is due to an issue with the IDE’s Angular language support rather than the actual Angular code.

If you are using an IDE like WebStorm or Visual Studio Code, install the latest Angular Language Service plugin.

For WebStorm:

Go to File > Settings > Plugins.
Search for “Angular” and install Angular and AngularJS plugins.

For Visual Studio Code:

Go to the Extensions view.
Search for “Angular Language Service” and install it.

This can help avoid misleading IDE errors and ensure Angular templates are interpreted correctly.

Solution 7: Check the NgFor Import Path in IDEs like WebStorm

If you’re using WebStorm, there’s an issue reported with WebStorm’s Angular Language Service plugin.

The IDE may incorrectly report that ngFor or ngIf aren’t recognized, even when they work perfectly in the actual app.

JetBrains is aware of this issue (Reference: WEB-62594) and may provide a fix in a future update. For now, double-check your code to ensure it runs correctly in the browser despite IDE warnings.