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

Answer 1

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

Answer 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)