BrowserModule has already been loaded

Question

This is my code:

 import { CommonModule } from '@angular/common';
    import { HttpClientModule } from '@angular/common/http';
    import { NgModule } from '@angular/core';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { LanguageTranslationModule } from './shared/modules/language-translation/language-translation.module'

    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { AuthGuard } from './shared';

    import { SidebarComponent } from './layout/components/sidebar/sidebar.component';
    import { HeaderComponent } from './layout/components/header/header.component';

    @NgModule({
        imports: [
            CommonModule,
            BrowserAnimationsModule,
            HttpClientModule,
            LanguageTranslationModule,
            AppRoutingModule

        ],
        declarations: [AppComponent,HeaderComponent,SidebarComponent],
        providers: [AuthGuard],
        bootstrap: [AppComponent],
        exports: [
            HeaderComponent,
            SidebarComponent
      ],

    })
    export class AppModule {}

I don't why I obtain this excepion:

Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead. Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import

In the future module I import CommonModule and not BrowerModule. Anyone can help me?

Licence

You have CommonModule imported in your AppModule. This needs to be BrowserModule. – Chattel

The problem is you are importing CommonModule and BrowserAnimationsModule. BrowserAnimationsModule internally exports BrowserModule and CommonModule exports are reexported by BrowserModule. Use either of them as per your requirement. – Dakar

@SachinJagtap I delete CommonModule and I leave alone . Put in my child.module the commonModule, but it still not work. – Licence

Can you show your imports of child module. – Dakar

Answer 1

Import BrowserAnimationsModule and HttpModule only once (either in your root module or a core module).

import these mentioned modules only once(in app-module only):

BrowserModule, BrowserAnimationsModule, LazyLoadImageModule (if using it), CarouselModule (if using it), InfiniteScrollModule (if using it), HttpModule ( if using it)

Duumvir

Yes I imported their only once time – Licence

you check it properly? – Duumvir

Yes I do a research in the source folder with BrowserAnimationsModule and HttpModule like term and I read that the files where there are the result is app.module. Maybe there are some js library that import browsermodule? – Licence

then install if js library issue npm install browsermodule --save – Duumvir

I got this error too, and after a lot of pain and suffering BrowserAnimationsModule only worked without complains if imported in app.module.ts. Does anyone know why? I thought angular modules are completely independent. – Ornstead

Answer 2

Import BrowserAnimationsModule in AppModule only because BrowserAnimationsModule by default import BrowserModule, No Need to define BrowserModule in app.module.ts and then import CommonModule in your child / featured module.

 @NgModule({
imports:      [ 
                BrowserAnimationsModule
                ]
})    
export class ParentModule {}

Featured / Child Module

    @NgModule({
           imports:      [ CommonModule ]
     })   
export class FeaturedModule {}

Hope, this solves your problem

Testis

Answer 3

Replace CommonModule with BrowserModule in your AppModule.

import { BrowserModule} from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LanguageTranslationModule } from './shared/modules/language-translation/language-translation.module'

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthGuard } from './shared';

import { SidebarComponent } from './layout/components/sidebar/sidebar.component';
import { HeaderComponent } from './layout/components/header/header.component';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        LanguageTranslationModule,
        AppRoutingModule

    ],
    declarations: [AppComponent,HeaderComponent,SidebarComponent],
    providers: [AuthGuard],
    bootstrap: [AppComponent],
    exports: [
        HeaderComponent,
        SidebarComponent
  ],

})
export class AppModule {}

Abreaction

Did you replace the CommonModule with BrowserModule and import it ? – Abreaction

yes! I copy your code but it doesn't work! I'm becoming crazy – Licence

Are you importing BrowserAnimationsModule in your other modules other than AppModule ? – Abreaction

No! I check that only in the app.module the BrowserAnimationsModule is imported, in the other module is not imported ( the same with BrowserModule) – Licence

Sometimes you may importing a library package which is importing the BrowserModule. check for that aswell. – Abreaction

@Abreaction about your last comment about the library which imports the same module, how are we supposed to fix it, if the duplicate module comes from a library package? – Mccutchen

Answer 4

My issue was that I had imported BrowserModule in both my root AppModule and the SharedModule used by feature modules. I removed it from SharedModule and that got things working again.

Overrefinement

Answer 5

In my case, i had to remove the NoopAnimationsModule,from the imports of child module. In the APPModule i imported it from angular but never used in the imports. in the app.module.ts

import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    AppRoutingModule,
    BrowserAnimationsModule,
    ...
  ],
  providers: [
    
  ],
  bootstrap: [AppComponent]
})

Pallmall

Answer 6

My app uses standalone modules and I got this error as well when I added BrowserAnimationsModule to my imports list/

I was already importing CommonModule which apparently already contains this, so I simply had to remove BrowserAnimationsModule and it all worked including my animations

Petronille