Nsryjdtyk

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

Import BrowserAnimationsModule and HttpModule only once (either in your root module or a core module).

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)

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.

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

@First Import BrowerModule and in imports also first include BrowserModule import:[BrowerModule ] 



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

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



import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';



@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule

  ],

  providers: ,

  bootstrap: [AppComponent]

})

export class AppModule { }

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