我正在尝试实现延迟加载,但出现如下错误
**
错误错误:未捕获(承诺):错误:BrowserModule 已经
已加载。如果您需要访问常见指令,例如 NgIf 和
NgFor 来自延迟加载的模块,请导入 CommonModule。
**
需要帮助。
这是我的模块
- 共享模块
@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.设置模块
@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 { }
- 应用程序路由模块
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.应用程序模块
@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 { }