Error browsermodule has already been loaded

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

Which @angular/* package(s) are the source of the bug?

platform-browser

Is this a regression?

No

Description

I am trying to use a component from an angular library (SharedModule) and get the console 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.

Both the SharedModule from the library and the AppModule in the app have the imports
import { BrowserModule } from ‘@angular/platform-browser’; import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;

The library is imported into the AppModule using
import { SharedModule as pdlSharedModule } from ‘pdl’;

If I remove the Browser imports from SharedModule and try to use CommonModule instead, I get the console error message NullInjectorError: R3InjectorError(t)[y -> y -> y -> y]: when I try to access

If I remove the Browser imports from AppModule that gets the same NullInjectorError but on the first page.

user.module.ts.txt
app.module.ts.txt
shared.module.ts.txt

This configuration worked in a9.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

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.
    at new qe (main.js:1)
    at Object.qe.ɵfac [as factory] (main.js:1)
    at I3.hydrate (main.js:1)
    at I3.get (main.js:1)
    at main.js:1
    at Set.forEach (<anonymous>)
    at I3._resolveInjectorDefTypes (main.js:1)
    at new Wg (main.js:1)
    at If.create (main.js:1)
    at i.project (main.js:1)
    at A (polyfills.js:1)
    at A (polyfills.js:1)
    at polyfills.js:1
    at h.invokeTask (polyfills.js:1)
    at Object.onInvokeTask (main.js:1)
    at h.invokeTask (polyfills.js:1)
    at h.runTask (polyfills.js:1)
    at m (polyfills.js:1)
    at h.invokeTask [as invoke] (polyfills.js:1)
    at y (polyfills.js:1)

Please provide the environment you discovered this bug in

Angular CLI: 12.2.6
Node: 12.19.0
Package Manager: npm 6.14.8
OS: darwin x64

Angular: 12.2.6
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Anything else?

No response

Issue

Error is :

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.
    at new BrowserModule

Two days i search Internet , not getting fisible solution:

Add and remove BrowserModule and import CommonModule in NotificationModule no use of it.

Here See the ScreenShot: https://i.stack.imgur.com/sM9ZS.png

I have Two Modules ,

1. AppModule
2. NotificationModule

My Goal is : I have SearchComponent in app.module , i need to get in notification.module .

In AppModule i define:

imports: [
    BrowserAnimationsModule,
    HttpClientModule,
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    NgxSpinnerModule,
    NgSelectModule,
    CalendarModule,
    PopoverModule.forRoot(),
    TabsModule.forRoot(),
    TooltipModule.forRoot(),
    AccordionModule.forRoot(),
    NgxUsefulSwiperModule,
    PickerModule,
    NgxFileDropModule,
    NgxMaterialTimepickerModule,
    PlyrModule,
    NgbModule,
    SocketIoModule.forRoot(config),
    ContenteditableModule,
    ScrollEventModule,
    NgxStarsModule,
    NgImageSliderModule,
    NgxImageZoomModule.forRoot(),
    ProgressBarModule,
    InfiniteScrollModule,
    ColorPickerModule,
    NgxBraintreeModule,
    QRCodeModule
  ],
 exports: [
    SearchComponent ,
],

Routing AppModule:

{ 
        path: 'Notification',
        loadChildren: () => import('./notification/notification.module').then(m => m.NotificationModule) 
    },

And My NotificationModule : here i import app.module

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

import { AppModule } from '../app.module';
import { NotificationRoutingModule } from './notification-routing.module';
import { ListComponent } from './list/list.component';

@NgModule({
  declarations: [
        ListComponent
    ],
  imports: [
    CommonModule ,
    AppModule ,
    NotificationRoutingModule
  ]
})
export class NotificationModule { }

Routing NotificationModule is :

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ListComponent } from './list/list.component';

const routes: Routes = [
        {
            path: 'List',
            component: ListComponent
        }
    ];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class NotificationRoutingModule { }

Help is really appreciated .

Solution

The reason you are getting the error is becauase in notification module you import the App module again.

@NgModule({
  declarations: [
        ListComponent
    ],
  imports: [
    CommonModule ,
    AppModule ,// remove this line.
    NotificationRoutingModule
  ]
})
export class NotificationModule { }

If there is a need for something in the appmodule then extract it to a separate shared module and import that one.

Answered By – Sándor Jankovics

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

5 ответов

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

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

//app.module.ts
@NgModule({
    declarations: [  ],
    imports: [    BrowserAnimationsModule,]

//lazychild.module.ts
@NgModule({
  declarations: [  ],
  imports: [  CommonModule,]

I am trying to implement lazy loading but getting error as following
**

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.

**

Need Help on this.
Here are my Modules

1. Shared MOdule

@NgModule({

  declarations: [TimePipe],
  providers: [
    EmsEmployeeService,
    EmsDesignationService,
    EmsOrganizationService,
    EmsAuthService,
    AmsEmployeeService,
    AmsShiftService,
    ValidatorService,
    AmsLeaveService,
    AmsAttendanceService,
    AmsDeviceService,
    AmsOrganizationService,
    AmsAlertService,
    AmsHolidayService,
    AutoCompleteService,
    AmsTimelogsService,
    LocalStorageService
  ],
  imports: [
    HttpModule,
    ToastyModule.forRoot(),
    AgmCoreModule.forRoot({
      apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx'
    }),
  ],
  exports: [
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    RouterModule,
    MaterialModule,
    MdDatepickerModule,
    MdNativeDateModule,
    ToastyModule,
    FileUploadModule,
    NgxPaginationModule,
    NguiAutoCompleteModule,
    AgmCoreModule,
    TimePipe
  ]
})
export class SharedModule { }

2.SettingModule

 @NgModule({
  imports: [
    CommonModule,
    SharedModule,
    SettingsRoutingModule
  ],
  declarations: [
    SettingsComponent,
    ShiftsComponent,
    DevicesComponent,
    AlertsComponent,
    HolidaysComponent,
    AlterTypesComponent,
    AlterEditComponent,
    ShiftTypeNewComponent,
    DeviceLogsComponent,
    ChannelTypesComponent,
    ChannelTypeEditComponent
  ], exports: [
    SettingsComponent,
    ShiftsComponent,
    DevicesComponent,
    AlertsComponent,
    HolidaysComponent,
    AlterTypesComponent,
    AlterEditComponent,
    ShiftTypeNewComponent,
    DeviceLogsComponent,
    ChannelTypesComponent,
    ChannelTypeEditComponent,
  ]
})
export class SettingsModule { }

3.SettingRoutingModule

const settings_routes: Routes = [
  { path: '', redirectTo: 'shifts', pathMatch: 'full' },
  { path: 'shifts', component: ShiftsComponent },
  { path: 'shifts/new', component: ShiftTypeNewComponent },
  { path: 'shifts/edit/:id', component: ShiftTypeNewComponent },
  { path: 'devices', component: DevicesComponent },
  { path: 'deviceLogs', component: DeviceLogsComponent },
  { path: 'holidays', component: HolidaysComponent },
  { path: 'alerts', component: AlertsComponent },
  { path: 'alerts/types', component: AlterTypesComponent },
  { path: 'alerts/:id', component: AlterEditComponent },
  { path: 'channelTypes', component: ChannelTypesComponent },
  { path: 'channelTypes/:id', component: ChannelTypeEditComponent }
];


const routes: Routes = [
  { path: '', component: SettingsComponent, children: settings_routes }
];



@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class SettingsRoutingModule { }

1. App-routing-module

const attdendance_routes: Routes = [
  { path: '', redirectTo: 'daily', pathMatch: 'full' },
  { path: 'monthly', component: MonthlyComponent },
  { path: 'daily', component: DailyComponent },

  { path: 'daily/:empId', component: AttendanceDetailsComponent },
  { path: 'details/:empId', component: AttendanceDetailsComponent },
  { path: 'monthly/:empId', component: AttendanceDetailsComponent },
  { path: 'leaves/:empId', component: AttendanceDetailsComponent },

  { path: 'details/:empId/apply-leave', component: ApplyLeaveComponent },
  { path: 'daily/:empId/apply-leave', component: ApplyLeaveComponent },
  { path: 'daily/:empId/attendance-logs/:ofDate', component: AttendanceLogsComponent },
  { path: 'monthly/:empId/apply-leave', component: ApplyLeaveComponent },
  { path: 'leaves/:empId/apply-leave', component: ApplyLeaveComponent },
  { path: 'leaves/new/apply', component: ApplyLeaveComponent },

  { path: 'leaves', component: LeavesComponent },
  { path: 'leave-balances', component: LeaveBalancesComponent },
  { path: 'leave-balances/:empId', component: AttendanceDetailsComponent },
  { path: 'manage-leaves', component: ManageLeavesComponent },

];



const emp_routes: Routes = [
  { path: '', redirectTo: 'list', pathMatch: 'full' },
  { path: 'list', component: EmployeeListComponent },
  { path: 'list/:id', component: EmpEditComponent },
  { path: 'designations', component: DesignationsComponent }
];



const page_routes: Routes = [
  { path: '', redirectTo: 'attendances', pathMatch: 'full' },
  { path: 'employees', component: EmployeesComponent, children: emp_routes },
  { path: 'attendances', component: AttendancesComponent, children: attdendance_routes },

  { path: 'settings', loadChildren: './pages/settings/settings.module#SettingsModule' },
];

// main routes
const routes: Routes = [
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: 'login', component: LoginComponent, canActivate: [LoginGuard] },
  { path: 'pages', component: PagesComponent, canActivate: [UserGuard], children: page_routes },
  { path: 'loginViaOrg', component: OrgLoginComponent },
  { path: 'download', component: AppDownloadComponent },
  { path: '**', redirectTo: 'pages' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

5.AppModule

@NgModule({

  declarations: [
    AppComponent,
    PagesComponent,
    LoginComponent,
    EmployeesComponent,
    OrgLoginComponent,
    EmployeeListComponent,
    EmpEditComponent,
    DayEventDialogComponent,
    AttendancesComponent,
    MonthlyComponent,
    AttendanceDetailsComponent,
    DailyComponent,
    DeviceDialogComponent,
    LeaveActionDialogComponent,
    LeavesComponent,
    LeaveBalancesComponent,
    ManageLeavesComponent,
    ApplyLeaveComponent,
    ConfirmDialogComponent,
    ResetPasswordDialogComponent,
    AppDownloadComponent,
    DesignationsComponent,
    AttendanceLogsComponent,
  ],

  entryComponents: [
    DayEventDialogComponent,
    DeviceDialogComponent,
    LeaveActionDialogComponent,
    ConfirmDialogComponent,
    ResetPasswordDialogComponent
  ],

  imports: [
    BrowserModule,
    // CommonModule,
    SharedModule,
    AppRoutingModule,
    // feature modules
    // SettingsModule
  ],

  providers: [
    LoginGuard, UserGuard,
  ],

  bootstrap: [AppComponent]
})
export class AppModule { }

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

Tags:

Typescript

Angular