Lazy Loading BrowserModule has already been loaded

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/fDate', 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 { }​

Continue reading...