延迟加载 BrowserModule 已经加载

Question

我正在尝试实现延迟加载，但出现如下错误**

ERROR 错误：未捕获（承诺中）：错误：BrowserModule 已加载。如果您需要从延迟加载的模块中访问常用指令，例如 NgIf 和 NgFor，请改为导入 CommonModule。

**

需要帮助。这是我的模块

1. 共享模块

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

1. 应用路由模块

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.App模块

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

原文由 Er Sushil 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

导入 BrowserModule, BrowserAnimationsModule , HttpModule 或 HttpClientModule 一次

原文由 Jota.Toledo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我必须从任何子组件 导入 中移动 BrowserAnimationsModule

原文由 Ste 发布，翻译遵循 CC BY-SA 4.0 许可协议