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

I had a problem because of ** instead *

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

Answer 2

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 3

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

Answer 4

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 5

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 6

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