本文介绍了延迟加载 BrowserModule 已经加载的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

ERROR Error: Uncaught (in promise): Error: BrowserModule has been已加载.如果您需要访问常用指令,例如 NgIf 和从延迟加载的模块中导入 NgFor,改为导入 CommonModule.

**

需要这方面的帮助.这是我的模块

  1. 共享模块
@NgModule({声明:[TimePipe],供应商: [Ems员工服务,EMS指定服务,EMS组织服务,EmsAuth服务,AmsEmployeeService,AmsShift服务,验证器服务,AmsLeaveService,Ams出勤服务,AmsDeviceService,Ams组织服务,AmsAlert服务,AmsHolidayService,自动完成服务,AmsTimelogsService,本地存储服务],进口:[Http模块,ToastyModule.forRoot(),AgmCoreModule.forRoot({apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'}),],出口:[表单模块,Http模块,浏览器动画模块,路由器模块,材料模块,MdDatepicker 模块,MdNativeDateModule,烤面包模块,文件上传模块,Ngx分页模块,NguiAutoCompleteModule,AgmCore 模块,时间管道]})导出类 SharedModule { }

2.设置模块

 @NgModule({进口:[通用模块,共享模块,设置路由模块],声明: [设置组件,Shifts 组件,设备组件,警报组件,假期组件,改变类型组件,更改编辑组件,ShiftType 新组件,设备日志组件,通道类型组件,频道类型编辑组件],出口:[设置组件,Shifts 组件,设备组件,警报组件,假期组件,改变类型组件,更改编辑组件,ShiftType 新组件,设备日志组件,通道类型组件,频道类型编辑组件,]})导出类 SettingsModule { }

3.SettingRoutingModule
const settings_routes: Routes = [{ path: '', redirectTo: 'shifts', pathMatch: 'full' },{ path: 'shifts', 组件: ShiftsComponent },{ path: 'shifts/new', 组件: ShiftTypeNewComponent },{ path: 'shifts/edit/:id', 组件: ShiftTypeNewComponent },{路径:'设备',组件:设备组件},{ path: 'deviceLogs', 组件: DeviceLogsComponent },{ path: 'holidays', 组件: HolidaysComponent },{ path: 'alerts', 组件: AlertsComponent },{ 路径:'警报/类型',组件:AlterTypesComponent },{ path: 'alerts/:id', 组件: AlterEditComponent },{ path: 'channelTypes', 组件: ChannelTypesComponent },{ 路径:'channelTypes/:id',组件:ChannelTypeEditComponent }];const 路由:路由 = [{ 路径:'',组件:SettingsComponent,孩子:settings_routes }];@NgModule({进口:[RouterModule.forChild(routes)],出口:[路由器模块]})导出类 SettingsRoutingModule { }

  1. 应用路由模块
const attdendance_routes: Routes = [{ path: '', redirectTo: 'daily', pathMatch: 'full' },{ path: 'monthly', 组件: MonthlyComponent },{ path: 'daily', 组件: DailyComponent },{ path: 'daily/:empId', 组件: AttendanceDetailsComponent },{ path: 'details/:empId', 组件: AttendanceDetailsComponent },{ path: 'monthly/:empId', component: AttendanceDetailsComponent },{ path: 'leaves/:empId', 组件: AttendanceDetailsComponent },{ path: 'details/:empId/apply-leave', 组件: ApplyLeaveComponent },{ path: 'daily/:empId/apply-leave', 组件: ApplyLeaveComponent },{ path: 'daily/:empId/attendance-logs/:ofDate', component: AttendanceLogsComponent },{ path: 'monthly/:empId/apply-leave', 组件: ApplyLeaveComponent },{ path: 'leaves/:empId/apply-leave', 组件: ApplyLeaveComponent },{ path: 'leaves/new/apply', 组件: ApplyLeaveComponent },{ path: 'leaves', 组件: LeavesComponent },{ path: 'leave-balances', 组件: LeaveBalancesComponent },{ path: 'leave-balances/:empId', component: AttendanceDetailsComponent },{ path: 'manage-leaves', 组件: ManageLeavesComponent },];const emp_routes: 路由 = [{路径:'',重定向到:'列表',路径匹配:'完整'},{ path: 'list', 组件: EmployeeListComponent },{ path: 'list/:id', 组件: EmpEditComponent },{ 路径:'designations',组件:DesignationsComponent }];const page_routes: 路由 = [{路径:'',redirectTo:'出勤',pathMatch:'完整'},{ path: 'employees', 组件: EmployeesComponent, children: emp_routes },{ 路径:'出勤',组件:出勤组件,孩子:attdendance_routes },{ path: 'settings', loadChildren: './pages/settings/settings.module#SettingsModule' },];//主要路线const 路由:路由 = [{ path: '', redirectTo: 'pages', pathMatch: 'full' },{ path: 'login', 组件: LoginComponent, canActivate: [LoginGuard] },{ path: 'pages', 组件: PagesComponent, canActivate: [UserGuard], children: page_routes },{ path: 'loginViaOrg', 组件: OrgLoginComponent },{ 路径:'下载',组件:AppDownloadComponent },{路径:'**',重定向到:'页面'},];@NgModule({进口:[RouterModule.forRoot(routes, { useHash: true })],出口:[路由器模块]})导出类 AppRoutingModule { }

5.AppModule

@NgModule({声明: [应用组件,页面组件,登录组件,员工组件,组织登录组件,员工列表组件,EmpEditComponent,DayEventDialogComponent,出勤组件,每月组件,考勤详情组件,每日组件,设备对话框组件,离开ActionDialog组件,叶子组件,离开余额组件,管理叶子组件,应用离开组件,确认对话框组件,重置密码对话框组件,应用下载组件,名称组件,考勤日志组件,],入口组件:[DayEventDialogComponent,设备对话框组件,离开ActionDialog组件,确认对话框组件,重置密码对话框组件],进口:[浏览器模块,//通用模块,共享模块,应用路由模块,//功能模块//设置模块],供应商: [登录保护,用户保护,],引导程序:[AppComponent]})导出类 AppModule { }

解决方案

Import BrowserModule, BrowserAnimationsModule, HttpModule or HttpClientModule 仅一次,最好在您的根模块中.

I am trying to implement lazy loading but getting error as following**

**

Need Help on this.Here are my Modules

  1. Shared MOdule

2.SettingModule

3.SettingRoutingModule
  1. App-routing-module

5.AppModule

解决方案

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

这篇关于延迟加载 BrowserModule 已经加载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-22 16:08
查看更多