ERROR Error: Uncaught (in promise): Error: BrowserModule has already been loaded : angular 6

Question

I'm using multiple module with lazy loading concept but i'm getting given below error:

ERROR Error: Uncaught (in promise): 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 CommonModule instead.

app.module.ts

     import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app.routes';
import { CookieModule } from 'ngx-cookie';
/* Modules */
import { SharedModule } from 'shared/shared.module';

/* Components */
import { AppComponent } from './app.component';
/* Models */
import { User } from './shared/models/user';

// /* Services */
import { GlobalLoader } from './core/global-loader';
import { SecurityService } from './shared/services/security.service';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
   declarations: [
       AppComponent
   ],
   entryComponents: [], // Needed to declare dynamic components
   imports: [      
       BrowserModule,
       AppRoutingModule,
       CookieModule.forRoot(),                          
       SharedModule,
   ],
  exports: [
    SharedModule
  ],
   providers: [SecurityService,
       GlobalLoader,
       User],
   bootstrap: [AppComponent]
})
export class AppModule { }

shared.module.ts

    import { NgModule } from '@angular/core';
// import { FormsModule } from '@angular/forms';
// Small sample component used for dymanic tabs/accordion

/* Components */
import { SampleContent } from './components/sample-content';
import { AccordionCardComponent } from './components/accordion-card/accordion-card.component';
import { BannerComponent } from './components/banner/banner.component';
import { HeaderComponent } from './components/header/header.component';
import { SearchComponent } from './components/search/search.component';
import { TabCardComponent } from './components/tab-card/tab-card.component';
import { TableCardComponent } from './components/table-card/table-card.component';
import { Base64Pipe } from './pipes/base64.pipe';
import { FlexLayoutModule } from '@angular/flex-layout';
import { UXStyleguideModule } from 'ux-angular-styleguide';
import { CommonModule } from '@angular/common';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
// import { RouterModule } from '@angular/router';
/* Shared */
@NgModule({
    declarations: [
        Base64Pipe,
        SampleContent,
        AccordionCardComponent,
        BannerComponent,
        HeaderComponent,
        SearchComponent,
        TabCardComponent,
        TableCardComponent
    ],
    entryComponents: [], // Needed to declare dynamic components
    imports: [
        HttpClientModule,
        FormsModule,
        CommonModule,
        NgxDatatableModule,
        FlexLayoutModule,
        UXStyleguideModule],
    providers: [],
    exports: [
        HttpClientModule,
        FlexLayoutModule,
        NgxDatatableModule,
        FormsModule,
        CommonModule,
        UXStyleguideModule,
        Base64Pipe,
        SampleContent,
        AccordionCardComponent,
        BannerComponent,
        HeaderComponent,
        SearchComponent,
        TabCardComponent,
        TableCardComponent
    ]
})
export class SharedModule { }

and i have nowhere imported that browserModule but still getting error.

thanks in adavance.

score 2 · Answer 1 · answered Sep 24 '18 at 08:51

2

In app.module.ts

Import {BrowserModule} from '@angular/platform-browser';

In Shared Module:

import { CommonModule } from '@angular/common';

Remove BrowserModule from Shared. Remove CommonModule from app.module

answered Sep 24 '18 at 08:51

Suresh Kumar Ariya

8,140
1
12
23

error is still the same.thanks for your effort,anything else i should try ? – ER.SHASHI TIWARI Sep 24 '18 at 09:09
You can check any library package is importing the BrowserModule. Do global search with 'BrowserModule' – Suresh Kumar Ariya Sep 24 '18 at 09:19
i have updated the question with your suggested changes – ER.SHASHI TIWARI Sep 24 '18 at 09:55
actually One of the libraries i was using was importing the BrowserModule, i have removed that libraries from my code. – ER.SHASHI TIWARI Oct 15 '18 at 05:15

score 2 · Answer 2 · answered Sep 17 '19 at 13:52

2

In my case I identified that when importing some module loadChildren in app-routing-module.ts the problem starts, I still don't know how to adjust it.

loadChildren: () => import(`./home/home.module`).then(m => m.HomeModule)

or

 loadChildren: './home/home.module#HomeModule'

answered Sep 17 '19 at 13:52

Vinycius Oliveira

21
4

were you able to find any solution for this by any luck? – Premalatha Jun 14 '20 at 04:54
Yeah, careful with import/export modules on 'routing-module' and 'module' files. As you may have seen, some cores Modules can't be loaded more than once on your project. @Premalatha – Vinycius Oliveira Jun 22 '20 at 14:07

Aniket Avhad · Answer 3 · 2018-09-24T09:15:48.020

You have to do this following steps,

1) Remove CommonModule from App.module and add into Shared.module

2) Remove BrowserModule from Shared.module and into App.module

Here's an example

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

// import { MaterialModule } from '@angular/material';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app.routes';
import { CookieModule } from 'ngx-cookie';
/* Modules */
import { SharedModule } from 'shared/shared.module';

/* Components */
import { AppComponent } from './app.component';
/* Models */
import { User } from './shared/models/user';

// /* Services */
import { GlobalLoader } from './core/global-loader';
// import { SecurityService } from './services/security.service';
// import { ServiceGroupService } from './services/service-group.service';

/* Shared */
// import { Base64Pipe } from './shared/base64.pipe';
import { SecurityService } from './shared/services/security.service';
 import { BrowserModule } from '@angular/platform-browser';
// import { RouterModule } from '@angular/router';
@NgModule({
    declarations: [
        AppComponent
    ],
    entryComponents: [], // Needed to declare dynamic components
    imports: [      
        BrowserModule,
        AppRoutingModule,
        CookieModule.forRoot(),
        FormsModule,                    
        SharedModule,
    ],
    providers: [SecurityService,
        GlobalLoader,
        User],
    bootstrap: [AppComponent]
})
export class AppModule { }

and Shared.module

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
// Small sample component used for dymanic tabs/accordion

/* Components */
import { SampleContent } from './components/sample-content';
import { AccordionCardComponent } from './components/accordion-card/accordion-card.component';
import { BannerComponent } from './components/banner/banner.component';
import { HeaderComponent } from './components/header/header.component';
import { SearchComponent } from './components/search/search.component';
import { TabCardComponent } from './components/tab-card/tab-card.component';
import { TableCardComponent } from './components/table-card/table-card.component';
import { Base64Pipe } from './pipes/base64.pipe';
import { FlexLayoutModule } from '@angular/flex-layout';
import { UXStyleguideModule } from 'ux-angular-styleguide';
import { CommonModule } from '@angular/common';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
/* Shared */
@NgModule({
    declarations: [
        Base64Pipe,
        SampleContent,
        AccordionCardComponent,
        BannerComponent,
        HeaderComponent,
        SearchComponent,
        TabCardComponent,
        TableCardComponent
    ],
    entryComponents: [], // Needed to declare dynamic components
    imports: [
        HttpClientModule,
        FormsModule,
        CommonModule,
        NgxDatatableModule,
        FlexLayoutModule,
        UXStyleguideModule],
    providers: [],
    exports: [
        FlexLayoutModule,
        NgxDatatableModule,
        // FormsModule,
        UXStyleguideModule,
        Base64Pipe,
        SampleContent,
        AccordionCardComponent,
        BannerComponent,
        HeaderComponent,
        SearchComponent,
        TabCardComponent,
        TableCardComponent
    ]
})
export class SharedModule { }

error is still the same.thanks for your effort,anything else i should try ? — ER.SHASHI TIWARI, Sep 24 '18 at 09:01
no need to add HttpClientModule,FormsModule,RouterModule in "shared.module" export array also remove SharedModule from "App.module" export array. — Aniket Avhad, Sep 24 '18 at 09:11
May be you are importing something wrong..otherwise you are facing issue that beause of only "BrowserModule" and "CommonModule". — Aniket Avhad, Sep 24 '18 at 09:39
Comapre your code with my answer, I have removed SharedModule from export array in 'App.module` and also removed CommonModule from 'Shared.Module' export array. — Aniket Avhad, Sep 24 '18 at 09:59
i have one more module where shared module i have imported to avoid ngIf error on that module — ER.SHASHI TIWARI, Sep 24 '18 at 10:06
You can import no. of time sharedModule in every module for that you don't need to export in 'App.Module' — Aniket Avhad, Sep 24 '18 at 10:09
yes, i have removed export from app.module.ts but error is same — ER.SHASHI TIWARI, Sep 24 '18 at 10:13

score 1 · Answer 4 · answered Sep 24 '18 at 08:53

1

Last line in the file shared.module.ts:

import { BrowserModule } from '@angular/platform-browser';

Remove it and the error will disappear.

answered Sep 24 '18 at 08:53

Michał Makowski

11
2

i have updated the question with your suggested changes – ER.SHASHI TIWARI Sep 24 '18 at 09:55
https://stackoverflow.com/questions/39286667/browsermodule-has-already-been-loaded-error – shubham singh Sep 24 '18 at 10:20

score 1 · Answer 5 · answered Sep 24 '18 at 10:03

1

it is because if you have used *ngFor and *ngIf in your html file you have to import import { CommonModule } from '@angular/common'; in module. so try to import it inside your module.

answered Sep 24 '18 at 10:03

shubham singh

392
2
7

score 0 · Answer 6 · answered Jun 22 '20 at 15:31

0

If you're using material module make sure to remove import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

answered Jun 22 '20 at 15:31

Amineze

156
3
8

ERROR Error: Uncaught (in promise): Error: BrowserModule has already been loaded : angular 6

6 Answers6