CODEWITHSUNDEEP
angularangular-ui-routerangular7lazy-loading
Postilla
Postilla

Reputation: 161

BrowserModule has already been loaded

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?

Upvotes: 12

Views: 20893

Answers (6)

Chris Barr
Chris Barr

Reputation: 34022

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

Upvotes: 0

jose
jose

Reputation: 1

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]
})

Upvotes: 0

R. Salisbury
R. Salisbury

Reputation: 2006

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.

Upvotes: 0

RajuPedda
RajuPedda

Reputation: 3379

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

Upvotes: 8

Denuka
Denuka

Reputation: 1242

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

Upvotes: 2

Shubham Sali
Shubham Sali

Reputation: 482

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)

Upvotes: 20

Related Questions