Can't bind to 'ngForOf' since it isn't a known property of 'tr' (final release)

Question

I'm using Angular2 2.1.0. When I want to display a list of companies, I got this error.

in file.component.ts :

public companies: any[] = [
    { "id": 0, "name": "Available" },
    { "id": 1, "name": "Ready" },
    { "id": 2, "name": "Started" }
];

In file.component.html :

<tbody>
  <tr *ngFor="let item of companies; let i =index">
     <td>{{i}}</td>
     <td>{{item.name}}</td>
  </tr>
</tbody>

Answer 1

Add BrowserModule to imports: [] in @NgModule() if it's the root module (AppModule), otherwise the CommonModule.

// older Angular versions
// import {BrowserModule, CommonModule} from '@angular/common';

import { BrowserModule } from '@angular/platform-browser'
..
..
@NgModule({
  imports: [BrowserModule, /* or CommonModule */],
  ..
})

Answer 2

In my case, the issue was that my teammate mentioned *ngfor in templates instead of *ngFor. Strange that there is no correct error to handle this issue (In Angular 4).

Answer 3

You have to import 'CommonModule' in the module where you are using these in-built directives like ngFor,ngIf etc.

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


@NgModule({
  imports: [
    CommonModule
  ]
})

export class ProductModule { }

Answer 4

For me the problem was that I did not import the custom made module HouseModule in my app.module.ts. I had the other imports.

File: app.module.ts

import { HouseModule } from './Modules/house/house.module';

@NgModule({
  imports: [
    HouseModule
  ]
})

Answer 5

This can also happen if you don't declare a route component in your feature module. So for example:

feature.routing.module.ts:

...
    {
        path: '',
        component: ViewComponent,
    }
...

feature.module.ts:

     imports: [ FeatureRoutingModule ],
     declarations: [],

Notice the ViewComponent is not in the declarations array, whereas it should be.

Answer 6

There can be any possible reason:

1. Your module does not have CommonModule in imports[]
2. Your component, where you are using *ngFor, is not a part of any module.
3. You might have typo in *ngFor i.e. **ngFor or *ngfor etc.
4. If everything seems fine then restart your IDE i.e. VS Code, IntelliJ etc.

Answer 7

Things to remember:

When custom modules are used (modules other than AppModule) then it is necessary to import the common module in it.

yourmodule.module.ts

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

@NgModule({
  imports: [
    CommonModule
  ],
  exports:[ ],
  declarations: []
})

Answer 8

Future Readers

Check each of the following:

1. The component is declared in a SINGLE angular module
2. Make sure you have import { CommonModule } from '@angular/common';
3. Restart the IDE/editor
4. Restart the dev server (ng serve)

Answer 9

If you are making your own module then add CommonModule in imports in your own module

Answer 10

I received the error because the component I was using wasn't registered in the declarations: [] section of the module.

After adding the component the error went away. I would have hoped for something less obscure than this error message to indicate the real problem.

Answer 11

I was getting the same error, You can fix through one of this method:

1. If you don't have any nested module

   a. Import the CommonModule in your App module

   b. Import your Component where you are adding the *ngFor in the App Module, define in declarations

// file App.modules.ts
@NgModule({
  declarations: [
    LoginComponent // declarations of your component
  ],
  imports: [
    BrowserModule
    DemoMaterialModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [
    ApiService, 
    CookieService, 
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ApiInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})

c. If you are using the separate module file for routing then Import the CommonModule in your Routing module else Import the CommonModule in your App module

// file app.routing.modules.ts
import { LoginComponent } from './login/login.component';
import { CommonModule } from "@angular/common";

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent }
];

@NgModule({
  imports: [RouterModule,RouterModule.forRoot(routes), CommonModule],
  exports: [RouterModule]
})

2. If you have nested module then perform the 1st step in that particular module

In my case, the 2nd method solved my issue.
Hope this will help you

Answer 12

For Angular 10:

1. Add BrowserModule to the imports of your routes module.
2. Make sure that you added the component that not working to the app module declarations.

Failing to do step 2 will trigger this error!

Make sure to RESTART ng serve !!!

Answer 13

Just in case someone still facing an error after trying to import CommonModule, try to restart the server. It surprisingly work

Answer 14

Custom Module Needs common module

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


@NgModule({
  imports: [
    CommonModule
  ]
})

Answer 15

I had the same error but I had the CommonModule imported. Instead I left a comma where it shouldn't be because of copy/paste when splitting a module:

@NgModule({
    declarations: [
        ShopComponent,
        ShoppingEditComponent
    ],
    imports: [
        CommonModule,
        FormsModule,
        RouterModule.forChild([
            { path: 'shop', component: ShopComponent }, <--- offensive comma
        ])
    ]
})

Answer 16

app.module.ts fixed and changed to: import the BrowserModule in your app module

import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  declarations: [
    AppComponent    
  ],
  imports: [
    BrowserModule, 
  ],     
  providers: [],
  bootstrap: [AppComponent]
})

Answer 17

I have encountered a similar error (*ngIf) even if all my imports were OK and the component was rendered without any other error + routing was OK.

In my case AppModule was not including that specific module. The strange thing is that it did not complain about this, but this might be related with how Ivy works with ng serve (kind of loads modules according to routing, but its dependencies are not considered).

Answer 18

So please make sure

1. No syntax error in directives

2. Browser (in App Module) and Common (in other/child) Modules are imported (Same what Günter Zöchbauer mentioned above)

3. If you've routes in the application then route module should be imported in App Module

4. All the routed component's Module are also imported in App Module, for eg: app-routing.module.ts is as follows:

   const routes: Routes = [

   {path: '', component: CustomerComponent},

   {path: 'admin', component: AdminComponent}

   ];

Then App module must imports modules of CustomerComponent and AdminComponent in @NgModule().

Answer 19

When use "app-routing.module" we forget import "CommonModule". Remember to import!

import { CommonModule } from "@angular/common";
@NgModule({  imports: [ CommonModule]})

Answer 20

I am started on Angular8 base live project got the above issue but When use "app-routing.module" we forget import "CommonModule". Remember to import!

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

@NgModule({
  imports: [
    CommonModule
]})

It will solve your error.

Answer 21

I had a problem because of ** instead *

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

Answer 22

A lot of answers seem to converge by importing CommonModule in other(new/custom) modules.
This step only isn't enough in all situations.

The full solution consist in two steps:

1. Make directives NgIf, NgFor etc visible to your project.
2. Reassemble everything in a correct way in the main component (app.module.ts)

Point 1
BrowserModule in main module seems to be enough for having access to NgFor. Angular Documentation stands it here: .

CommonModule Exports all the basic Angular directives and pipes, such as NgIf, NgForOf, DecimalPipe, and so on. Re-exported by BrowserModule,

See also accepted answer here: CommonModule vs BrowserModule in angular

Point 2
The only changes needed (in my case) are the followings:

1. import Module OtherModule
2. import Component OtherComponent
3. ng build (important!)
4. ng serve

app.module.ts

@NgModule({
    imports: [
        BrowserModule,
        OtherModule
    ],
    declarations: [OtherComponent, AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {
}

other.html

<div *ngFor='let o of others;'> 
</div>

other.component.ts

@Component({
    selector: 'other-component',
    templateUrl: './other.html'
})
export class OtherComponent {
}

app.module.ts

@NgModule({
    imports: [],
    providers: []
})
export class OtherModule{
}

Answer 23

After using correct syntax in all of your code, please see if you have mentioned your component in the declarations of your angular module. Something like below:

@NgModule({ declarations: [ AppComponent, YourComponent ],

Answer 24

For me, what solved the problem was to do a git clone of my project and run (as usual):

npm install

Answer 25

I had the same problem, even though I had imported "BrowserModule" and "CommonModule" in "module.ts" it didn't work, my error was, not adding in "NgModule.declarations" my Component.

@NgModule ({
   declarations: [
     Your_Component // here
   ]
}) 

Answer 26

Add the component to your app.module

import { ModalComponent } from './modal/modal.component';

@NgModule({
  declarations: [ModalComponent],
  entryComponents: [ModalComponent],
  
  }),
  providers: [
  ],
  bootstrap: [AppComponent]
})

Answer 27

I had a problem because of blank space in the json data.

Answer 28

This error can also be thrown when the ngFor syntax isn't written correctly, in my case I had:

<ng-template *ngForOf="let key of SomeObject; index as i">

And it got fixed by using the following syntax:

<ng-template ngFor let-key [ngForOf]="SomeObject" let-i="index">