Lazy Loading BrowserModule has already been loaded

Question

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

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

Solution 1

Import BrowserModule, BrowserAnimationsModule, HttpModule or HttpClientModule only once, preferably in your root module.

Solution 2

I also got the same error and finally, after little bit struggle, I was able to fix it.

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)

Solution 3

I had the same problem and Jota.Toledo gave the correct answer and I want only extend that: please check in shared module imports any modules that related with

@angular/platform-browser/animations

and move those modules into app.module.ts

Solution 4

This error can occur if you have imported BrowseModule in some child.app module.ts also. Please make sure you import CommonModule in all modules other than app.module as it has browser modules.

Solution 5

In my case I had shared module which was importing BrowserAnimationModule. I was importing shared module in my root module. to solve this error remove all imports of BrowserAnimationModule from all modules and add it to root module.

imports: [
    AppRoutingModule,
    SharedModule,
    BrowserAnimationsModule
  ],

View more solutions

Comments

[Fatema Saifee]

you can import CommonModule from '@angular/common'

[Er Sushil]

Still getting the same error. And you can check only in AppModule I have imported BrowseModule

[Phil]

yeah me too, only imported in app module

[Brahmmeswara Rao Palepu]

1)If we declare BrowserModule in any module other than app module(Duplicate) this error will come.In app module if we import 10 modules or plugins,first we have to import BrowserModule at top and declare in decorates (import:[BrowserModule ]) at top

[Federico Grandi]

I've edited your answer with that explanation. Please remember to edit your questions and answer instead of just commenting, when possible :)

[Alvaro]

It works! Just a little add: if you're using both BrowserAnimationsModule and BrowserModule, they should be imported in the same module.

[harmonickey]

Also, for those who have NoopAnimationsModule, the same rule applies. I had to also move that module.

[bwinchester]

THIS...So much this. I was trying to generate a lazy module with Angular CLI 9 and the output error was this non-descriptive 'cannot read properties of undefined' error. This answer saved me from burning my room down. I owe you Jota.

[Braelyn B]

This worked for me, but how am I supposed to use CarouselModule and others from other modules outside of AppModule now?

[Amit Chigadani]

I had to import AppRoutingModule at the last, that resolved my error. But could not figure out the reason for that.

[Chund]

You sir saved my day. Have my upvote. Would you be so kind to explain how this is necessary?

[Ilker Cat]

@Alvaro Your information and the answer of Jota should have made their way into the Angular-Docs! Thanks guys.

[Crushnik]

I had no NoopAnimationsModule imported in app.module.ts :). Solved my problem instantly.

[Cesar Gamboa Avellan]

this worked for me, thanks!

[mcheah]

After this solved my issue, the next console error I got was "Cannot bind to ngIf etc etc" - which I figured was still a BrowserModule/CommonModule issue. I was importing both BrowserModule and BrowserAnimationsModule, and I got it to work by just removing BrowserModule. Hope this helps someone.

[Armando Guarino]

I did and this helped! Cheers

[albanx]

what if I want to lazy load BrowserAnimationsModule ( to reduce bundle size?)