Angular2 RC6 - importing BrowserModule in my submodules

Question

I have DashboardModule imported in my root AppModule. In a component template from DashboardModule I use *ngFor. It is declared in BrowserModule (precisely in CommonModule imported by BrowserModule).

I'd like to declare importing of BrowserModule once in my application in root module. But something is not working and I must import it also in DashboardModule. When I comment out importing, I have error in console Can't bind to 'ngForOf' since it isn't a known property of ....

Here is the plunker, currently working: http://plnkr.co/edit/73SYTnsMJxoVl5OSvWiF?p=preview (best view in Chrome because of console usage).

Edit file src/dashboard/dashboard.module.ts - comment line 18 (importing BrowserModule) and error is visible in console.

Answer 1

You should not import BrowserModule in submodule.

Import BrowserModule in the root module and CommonModule in submodules.

Plunker example

See also https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#q-browser-vs-common-module

Do not import BrowserModule in any other module. Feature modules and lazy loaded modules should import CommonModule instead. They need the common directives. They don't need to re-install the app-wide providers.