why lazy loaded module has to import commonModule? Angular 2

Question

When we import BrowserModule in root module of application ,we can use NgIf and NgFor( in eagerly loaded component). But for lazy loaded modules I have to import CommonModule which has been exported by BrowserModule of root. SO why do we have to import it again in lazy loaded module?

Answer 1

As Ward Bell said(https://devchat.tv/adv-in-angular/119-aia-avoiding-common-pitfalls-in-angular2):

As long as you only have one module in your application and you threw everything in there, you were benefiting from the common module hiding inside the browser module. The minute you create a new module, lazy or not, any new module and you declare anything into it, that new module has a clean state. It has no knowledge of anything, Angular or anything. It’s any module, not a lazy module in which you declare something, you’re going to have to import everything that you actually need for any of the component you declared in it. That’s why you needed common module

Modules don't inherit access to the components, directives, or pipes that are declared in other modules. (https://angular.io/guide/ngmodule#add-the-contactmodule see orange block)

That's why you have to import CommonModule to have access to ngIf, ngFor and so on directives. Your module doesn't know anything about directives from other modules. It only looks at its declarations and exports from imported modules

See also:

• Angular 2 Use component from another module