延迟加载的组件未加载,显示空白页

问题描述 投票:0回答:0

我想在路径/ inventory上加载Lazyloaded Module,它在浏览器上显示路径,但不加载组件并显示空白页面

screenshot1

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: []
  }]

如上面的代码和添加了清单的图像所示,延迟加载了惰性加载的文件,它重定向了路径,但未加载组件,显示了空白页

angular lazy-loading angular-routing
© www.soinside.com 2019 - 2024. All rights reserved.