BrowserModule already loaded Error

Question

I upgraded my application to RC6 and now I keep getting this error:

zone.js: 484 Unhandled promise rejection: BrowserModule has already been downloaded. If you need access to general directives like NgIf and NgFor from a lazy loaded module ...

I use lazy loading, and my application is broken into many lazy loadable modules. However, in RC5, everything worked fine.

The only change I managed to find in the changelog for RC6 is this:

compiler: describe a descriptive error error for invalid NgModule providers

But since I did not see any errors in RC5, this is probably not applicable here.

I am a little out of ideas, so any help is greatly appreciated.

Answer 1

I managed to solve my problem. One of the libraries that I used imported BrowserModule .

I will just leave a question here if someone has the same problem.

Answer 2

I think you are using the 'NoopAnimationsModule' or the 'BrowserAnimationsModule' which already contain the 'BrowserModule' and loading your module lazily. So the solution is to replace the BrowserModule with NoopAnimationsModule or BrowserAnimationsModule in your app.module.ts.

 import { Router } from '@angular/router'; import { AdminsModule } from './admins/admins.module'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; //import { BrowserModule } from '@angular/platform-browser'; import { NgModule,OnInit } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, ], imports: [ //BrowserModule, NoopAnimationsModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule {} 

Answer 3

In my case, I used the BrowserAnimationsModule in every component that uses the material design, I removed all the links to the "BrowserAnimationsModule" and put the BrowserAnimationsModule in the main module.

BrowserAnimationsModule has a built-in BrowserModule, this is a problem.

Answer 4

As the error description is self-evident, the module for which you want to implement lazy loading should not import the BrowserModule, as it has already been imported earlier (mainly in app.component). You should only import the BrowserModule once. Other modules should import CommonModules instead.

See the code below for an understanding.

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; //<-- This one import { SearchMovieMainComponent } from './search-movies-main.component'; @NgModule({ imports: [ CommonModule //<-- and this one ], declarations: [ SearchMovieMainComponent ] }) export class SearchMoviesMainModule { } 

Note This is not my own answer. I faced the same problem. Where I have a CommonModule with the same name angular one. So this was really a problem for me, because I did not know that there was another "CommonModule" in angular itself. I found this blog helpful. By sending a response from there.

Answer 5

I ran into a simulation problem. I have several lazy modules that all use BrowserAnimationModule (includes BrowserModule).

First, I decided to transfer the import of this module from the child module to the root module as app.module.ts.

 //app.module.ts @NgModule({ declarations: [ ], imports: [ BrowserAnimationsModule,] 

The second step is very important, you must also include the CommonModule in each child module.

 //lazychild.module.ts @NgModule({ declarations: [ ], imports: [ CommonModule,] 

Answer 6

I solved this using this in my app.component.ts :

 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; imports: [ .., BrowserAnimationsModule, ], 

and deleted it from another place.

Answer 7

As described here the angular problems page , you can create a Shared Module and add all the imports there only once and import this module wherever you make a new module.