Angular2 (final version) * ngFor in component: cannot bind to 'ngForOf', since this is not a known property of 'div'

Question

I started using Angular2 (final version) and I had problems with * ngFor.

I built the following component tree: main → toolbar → alerts

Unhandled promise rejection: pattern parsing errors: cannot bind to 'ngForOf' because it is not a known property of 'div'.

("<div class =" item "[ERROR →] * ngFor =" warn about warnings ">"): DashboardAlertsComponent @ 5: 20 Binding properties ngForOf, not used by any directive for the built-in template.

Make sure the property name is spelled correctly and all directives are listed in the "directives" section.

It works fine, but when I tried to add * ngFor loop to the alert component, I got the following error:

DashboardAlertsComponent

import {Component, OnInit} from "@angular/core"; import {Alert} from "../../shared/models/alert.model"; @Component({ selector: 'dashboard-alerts', templateUrl: './alerts.component.html' }) export class DashboardAlertsComponent implements OnInit { alerts:Alert[] = new Array<Alert>(); constructor() { this.alerts.push(new Alert('1', 'high', 'My alert1', '12/11/2016 4:50 PM')); this.alerts.push(new Alert('2', 'low', 'My alert2', '11/11/2016 9:50 PM')); this.alerts.push(new Alert('3', 'medium', 'My alert3', '10/11/2016 2:50 PM')); } ngOnInit() { } } 

alerts.component.html

 <div class="item" *ngFor="let alert of alerts"> <span class="priority {{ alert }}"></span> <span class="title">{{ alert }}</span> <span class="time">3:40 PM</span> <a href="#" class="more-actions"><span>Actions</span></a> </div> 

DashboardModule

 @NgModule({ declarations: [ DashboardAlertsComponent ], providers: [], directives: [], }) export class DashboardModule { } 

Appmodule

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

PS I read a lot of suggested solutions for this problem, but none of them solved it

Answer 1

You must import the CommonModule into the main module and the BrowserModule into other modules (if you work with several modules). I have the same problem and it works great for me.