In Angular views for displaying object values in a list, we use *ngFor directive to iterate values. This directive takes out each row in the object and creates repetitive blocks of an element which is having NgFor.
But I faced a strange issue while using this directive which looks like this:
And reads:
core.js:6014 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can’t bind to ‘ngForOf’ since it isn’t a known property of ‘div’.
Why we face this issue?
Whenever we break our application to have a multilevel parent and child structure of modules, we may face this issue. In my application there is the main app module known as app.module.ts and also other child modules that we’re unable to access this directive globally.
How to resolve this issue?
To resolve this issue we need to import BrowserModule in the application’s main module i.e app.module.ts file and also import CommonModule in the child module.
So after imports, our files will look like these:
app.module.ts
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
...
...
@NgModule({
imports: [
BrowserModule,
....
....
child.module.ts
// child.module.ts
...
...
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
...
...
That’s it now you will be able to use *ngFor without any issue 🙂
