angular - 延迟加载的组件未加载它显示空白页面
问题描述
我想在路径/inventory上加载 Lazyloaded 模块, 它在浏览器上显示路径,但不加载组件并显示空白页面
app.routes 代码
{
path: "inventory",
pathMatch:"full",
data: {
Permission: {
Only: ['ROLE_CREATE_DEVICE', 'ROLE_UPDATE_DEVICE', 'ROLE_VIEW_DEVICE'],
RedirectTo: 'login'
} as IPermissionGuardModel
}
,
loadChildren: './pages/inventory/inventory.module#InventoryModule',
}
库存模块
这个库存模块
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { Ng2Permission } from 'angular2-permission';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { MatSlideToggleModule, MatButtonModule, MatTooltipModule, MAT_PLACEHOLDER_GLOBAL_OPTIONS, MatCheckboxModule, MatRadioModule, MatAutocompleteModule, MatInputModule, MatSidenavModule, MatSelectModule, MatDialogModule, MatStepperModule } from '@angular/material';
import { ColorPickerModule } from 'ngx-color-picker';
import { TreeModule } from 'angular-tree-component';
import { TreeviewModule } from '../../common/ngx-treeview-dropdown';
import { AllocateBeaconComponent } from './allocate-beacon/allocate-beacon.component';
import { AllocateDeviceComponent } from './allocate-device/allocate-device.component';
import { routes, InventoryRouter } from './inventory.routing';
import { ChangeDeviceStatusPopupComponent } from './change-device-status-popup/change-device-status-popup.component';
import { DeviceInventoryComponent } from './device-inventory/device-inventory.component';
import { DeviceInventoryPopupComponent } from './device-inventory-popup/device-inventory-popup.component';
import { DeviceInventorySidebarComponent } from './device-inventory-sidebar/device-inventory-sidebar.component';
import { Common_Module } from '../../common/common-module';
@NgModule({
imports: [
CommonModule,
Ng2Permission,
Common_Module,
FormsModule,
ReactiveFormsModule,
NgxDatatableModule,
MatButtonModule, MatCheckboxModule, MatRadioModule, MatAutocompleteModule, MatInputModule,
MatDialogModule, MatSidenavModule, MatSelectModule, MatDialogModule, MatStepperModule, MatTooltipModule, MatSlideToggleModule,
ColorPickerModule,
TreeModule,
TreeviewModule.forRoot(),
InventoryRouter,
RouterModule.forChild(routes),
],
declarations: [
AllocateBeaconComponent,
AllocateDeviceComponent,
ChangeDeviceStatusPopupComponent,
DeviceInventoryComponent,
DeviceInventoryPopupComponent,
DeviceInventorySidebarComponent
]
})
export class InventoryModule { }
库存路由
export const routes: Routes = [
{
path: "",
redirectTo:'device',
component:DeviceInventorySidebarComponent,
pathMatch:'full',
}, {
path: "device",
canActivate: [AuthGuard, PermissionGuard],
component: DeviceInventoryComponent,
data: {
Permission: {
Only: ['ROLE_CREATE_DEVICE', 'ROLE_UPDATE_DEVICE', 'ROLE_VIEW_DEVICE'],
RedirectTo: 'login'
} as IPermissionGuardModel
},
children: []
}]
如上面的代码和图像添加库存延迟加载它重定向路径但不加载它显示一个空白页面的组件
解决方案
推荐阅读
- python - 过滤列表中以字符串开头的对象
- ftp - FTP 因 Inet 控制而失败 - 状态 11 (icError)
- gradle - Gradle 在相关项目之间以级联方式共享依赖关系
- java - Kafka-streams 延迟启动消费者优雅关闭的重新平衡
- excel - 如何在 Power Pivot 中显示当月没有销售的项目的前期销售?
- javascript - 倍数标记谷歌地图
- kubernetes - 如何获取 kubernetes 作业消耗的资源?
- angularjs - 如何在angularjs中将数据从控制器传递到mainApp
- css - 使用 npm 和 css 代码设置 bootstrap 4 环境在 chrome 中不起作用
- angular - TS 类型缺少以下属性