angular-cli: Lazy Loading on ng-cli 1.0.0 Error: BrowserModule has already been loaded.
Bug Report or Feature Request (mark with an x)
- [X] bug report -> please search issues before submitting
- [ ] feature request
Versions.
@angular/cli: 1.0.0 node: 7.0.0 os: darwin x64 @angular/common: 4.0.0 @angular/compiler: 4.0.0 @angular/core: 4.0.0 @angular/forms: 4.0.0 @angular/http: 4.0.0 @angular/platform-browser: 4.0.0 @angular/platform-browser-dynamic: 4.0.0 @angular/router: 4.0.0 @angular/animations: 4.0.0 @angular/cli: 1.0.0 @angular/compiler-cli: 4.0.0
Repro steps.
Lazy Loading worked before for me in beta.26, I have updated following the guide and everything but lazy loaded modules work. When I try to render a lazy loaded module I get the following error at the console browser:
Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead. Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.
In my routes module I load it like so:
{ path : 'p/:postId', loadChildren: './postView/postView.module#PostViewModule', canActivate : [ AuthChecker ] },
and this is how my lazy loaded module looks like: `export const lazyPostRoutes: Routes = [ { path : ‘’, pathMatch: ‘full’, component: PostViewComponent, }, ];
@NgModule( { imports : [ CommonModule, SharedModule, PostElementModule, RouterModule.forChild( lazyPostRoutes ) ], declarations: [ PostViewComponent ], exports : [ PostViewComponent ] } )
export class PostViewModule { } `
The log given by the failure.
ERROR Error: Uncaught (in promise): Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead. Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead. at y (polyfills.cabf62930fce2e0f0442.bundle.js:36) at new t (main.67dfa38472fde81d5107.bundle.js:739) at e.createInternal (4.ad08eede51bd3ba4065a.chunk.js:1) at e.t.create (main.67dfa38472fde81d5107.bundle.js:365) at t.create (main.67dfa38472fde81d5107.bundle.js:365) at e.project (main.67dfa38472fde81d5107.bundle.js:442) at e._next (main.67dfa38472fde81d5107.bundle.js:772) at e.next (main.67dfa38472fde81d5107.bundle.js:766) at main.67dfa38472fde81d5107.bundle.js:766 at t.invoke (polyfills.cabf62930fce2e0f0442.bundle.js:36) at Object.onInvoke (main.67dfa38472fde81d5107.bundle.js:365) at t.invoke (polyfills.cabf62930fce2e0f0442.bundle.js:36) at e.run (polyfills.cabf62930fce2e0f0442.bundle.js:36) at polyfills.cabf62930fce2e0f0442.bundle.js:36 at t.invokeTask (polyfills.cabf62930fce2e0f0442.bundle.js:36) at y (polyfills.cabf62930fce2e0f0442.bundle.js:36) at new t (main.67dfa38472fde81d5107.bundle.js:739) at e.createInternal (4.ad08eede51bd3ba4065a.chunk.js:1) at e.t.create (main.67dfa38472fde81d5107.bundle.js:365) at t.create (main.67dfa38472fde81d5107.bundle.js:365) at e.project (main.67dfa38472fde81d5107.bundle.js:442) at e._next (main.67dfa38472fde81d5107.bundle.js:772) at e.next (main.67dfa38472fde81d5107.bundle.js:766) at main.67dfa38472fde81d5107.bundle.js:766 at t.invoke (polyfills.cabf62930fce2e0f0442.bundle.js:36) at Object.onInvoke (main.67dfa38472fde81d5107.bundle.js:365) at t.invoke (polyfills.cabf62930fce2e0f0442.bundle.js:36) at e.run (polyfills.cabf62930fce2e0f0442.bundle.js:36) at polyfills.cabf62930fce2e0f0442.bundle.js:36 at t.invokeTask (polyfills.cabf62930fce2e0f0442.bundle.js:36) at y (polyfills.cabf62930fce2e0f0442.bundle.js:36) at l (polyfills.cabf62930fce2e0f0442.bundle.js:36) at l (polyfills.cabf62930fce2e0f0442.bundle.js:36) at polyfills.cabf62930fce2e0f0442.bundle.js:36 at t.invokeTask (polyfills.cabf62930fce2e0f0442.bundle.js:36) at Object.onInvokeTask (main.67dfa38472fde81d5107.bundle.js:365) at t.invokeTask (polyfills.cabf62930fce2e0f0442.bundle.js:36) at e.runTask (polyfills.cabf62930fce2e0f0442.bundle.js:36) at a (polyfills.cabf62930fce2e0f0442.bundle.js:36)
Desired functionality.
Load a lazy loaded module
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 35 (3 by maintainers)
Commits related to this issue
- Fix lazy loading modules ... by removing imported Browser*Module in the shared module. For details, see: https://github.com/angular/angular-cli/issues/5684#issuecomment-289431382 — committed to naeramarth7/Angular-2-Datepicker by naeramarth7 7 years ago
- Fix lazy loading modules ... by removing imported Browser*Module in the shared module. For details, see: https://github.com/angular/angular-cli/issues/5684#issuecomment-289431382 — committed to MaibornWolff/Angular-2-Datepicker by naeramarth7 7 years ago
I found the error, I had browserAnimationsModule in sharedModule and in AppModule. Would’ve been easier if the error had shown that I had browserAnimationsModule imported twice :S
Ok the same here… i fixed moving my browserAnimationsModule from the shared module to the app.module.ts
But… the question is… WHY? Why cannot share on my shared module? Is any warning on official documentation? I mean… WTF Angular??? xD
You should only import BrowserModule in AppModule. I’m guessing you’ve declared it in your SharedModule
Watch out to not be including browserAnimationsModule twice, Angular throws the error as “BrowserModule” is imported twice.
@zmkn only import BrowserModule and the animations one once (app and not shared)
But if you imported on app.module.ts then your child modules which feeds from shared module won’t have BrowserAnimation available. How are you handling this?
If you have
BrowserAnimationsModuleimported at the AppModule, then removeBrowserModule@rollwhistler i have the same problem, the lazy loading modules haven’t the BrowserAnimationsModule available, but the child modules have it.
i got lazyload animation import solved by changing the order of the browserModule and BrowserAnimationsModule.
imports: [ BrowserModule, BrowserAnimationsModule ] thows error with lazyloding modules
BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.imports: [ BrowserAnimationsModule, BrowserModule ] works. Solved my problem
thanks for the answer. It was very annoying error
I guess that’s one for angular/angular as the errors are channeled from there 😃
Thanks!
What you don’t have to do, is import modules that have to be imported only once in app.module (Yes, both
BrowserModuleandBrowserAnimationsModulehave to be imported only once).Yes. You have. See angular/material2 for an example of that.