BrowserModule has already been loaded Error

Question

I've updated my application to RC6 and now i keep getting this error:

zone.js:484 Unhandled Promise rejection: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module...

I'm using lazy loading and my application is broken up in to a lot of lazy loaded modules. However in RC5 everything worked fine.

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

compiler: throw descriptive error meesage for invalid NgModule providers

But since i haven't seen any errors in RC5 this probably doesn't apply here.

I'm kind of out of ideas so any help is greatly appreciated.

Answer 1

I think you are using 'NoopAnimationsModule' or 'BrowserAnimationsModule', Which already contain 'BrowserModule' and loading your module lazily. SO the solution is 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 2

I've managed to solve my problem. One of the libraries i was using was importing the BrowserModule.

I'll just leave the question here in case someone has the same issue.

Answer 3

In my case, I had using BrowserAnimationsModule in each component that is using material design, I removed all reference to "BrowserAnimationsModule" and I put BrowserAnimationsModule in main module.

BrowserAnimationsModule has inculuded BrowserModule, this is the problem.

Answer 4

None of the answers worked for me.

For people still looking for an answer and if you are using a SharedModule (and lazy loading) my answer may help you.

Solution: Move following exports: BrowserModule, BrowserAnimationsModule, HttpModule and HttpClientModule (from SharedModule) to imports in AppModule.

Example:

OLD shared.module.ts:

@NgModule({
   declarations: [],
   imports: [],
   exports: [
      BrowserModule,
      BrowserAnimationsModule,
      HttpClientModule,
      // ...
   ]
})
export class SharedModule { }

OLD app.module.ts:

@NgModule({
   declarations: [
      AppComponent,
   ],
   imports: [
      SharedModule
   ],
   providers: [],
   exports: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

NEW shared.module.ts:

@NgModule({
   declarations: [],
   imports: [],
   exports: [
      // ...
   ]
})
export class SharedModule { }

NEW app.module.ts:

@NgModule({
   declarations: [
      AppComponent,
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      HttpClientModule,
      SharedModule
   ],
   providers: [],
   exports: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Answer 5

As the error description is self-explanatory, the module for which you want to implement lazy loading shouldn’t import BrowserModule as this is already been imported earlier (mainly in app.component). You should only import BrowserModule once. Other modules should be importing CommonModules instead.

See the code below for 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 was facing the same problem. Where I myself have a CommonModule in the same name of angular one. So it was real a problem for me, as I was not aware that there is another CommonModule that exists in angular itself. I found this blog helpful. Posting the answer from there.

Answer 6

I've encountered a simular problem. I have serveral lazyloading modules which all use BrowserAnimationModule(Includes BrowserModule).

My solution first is to move the importation 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 quite essential, you should also include the CommonModule in each child module .

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

Answer 7

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

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

and removed it from anywhere else.

Answer 8

as Described here Angular Issues Page you can make a Shared Module and add all imports in there just once and import that module everywhere you make a new module.

Answer 9

Remove all the import of "BrowserAnimationsModule" as well except from AppModule.

Answer 10

Solved BrowserModule Already loaded issue

In My project i import directly one ownmodule in another childmodule without mentioned in shared module,that why it cause error.