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

Question

I\'m using Angular2 Final release (2.1.0). When I want to display a list of companies, I got this error.

in file.component.ts :

public          


        

Answer 1

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 2

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 3

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 4

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 5

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 6

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