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 loade

Answer 1

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.

Answer 2

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 3

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 4

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 5

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 6

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.