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

Even I faced the same issue, i tried all the answers over here, but a simple change helped me to resolve this issue, instead of including *ngFor in tr tag , I included it in tbody tag. Hope it helps someone.

<tbody *ngFor="let product of products; let i=index">
        <tr >
            <td>{{product.id}}</td>
            <td>{{product.name}}</td>
            <td>{{product.description}}</td>
            <td>{{product.quantity}}</td>
            <td>
                <button type="button" >Update</button>
                <button type="button" (click)="crudService.delete(product.id)">Remove</button>
            </td>
        </tr>
    </tbody>

Answer 2

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 3

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 4

Custom Module Needs common module

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


@NgModule({
  imports: [
    CommonModule
  ]
})

Answer 5

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 6

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

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