BrowserModule has already been loaded Error

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

Solution 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.

Solution 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.

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