CODEWITHSUNDEEP
angulartypescript
Filip Lauc
Filip Lauc

Reputation: 3029

BrowserModule has already been loaded Error

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.

Upvotes: 57

Views: 79732

Answers (10)

Rajdeo Das
Rajdeo Das

Reputation: 126

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

Upvotes: 2

Partha Sarathi Ghosh
Partha Sarathi Ghosh

Reputation: 11576

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.

Upvotes: 4

suresh
suresh

Reputation: 41

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.

Upvotes: 0

Emeric
Emeric

Reputation: 6895

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 { }

Upvotes: 9

Peyman
Peyman

Reputation: 143

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.

Upvotes: 1

esraa zezo
esraa zezo

Reputation: 21

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.

Upvotes: 2

Tethys Zhang
Tethys Zhang

Reputation: 474

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,]

Upvotes: 2

Efrain Luna Villafuerte
Efrain Luna Villafuerte

Reputation: 291

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.

Upvotes: 28

Shivam Mishra
Shivam Mishra

Reputation: 1856

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 {}

Upvotes: 98

Filip Lauc
Filip Lauc

Reputation: 3029

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.

Upvotes: 32

Related Questions