我想在路径/ inventory上加载Lazyloaded Module,它在浏览器上显示路径,但不加载组件并显示空白页面
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',
}
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: []
}]
如上面的代码和添加了清单的图像所示,延迟加载了惰性加载的文件,它重定向了路径,但未加载组件,显示了空白页