懒加载不工作在儿童路由器

Question

以前，我开发了一个基于ASP MVC框架的角度项目。现在我想把它改成Angular-cli。但是我遇到了儿童路由器中懒惰的加载器的一些路由器问题。

两个“工业”模块随机加载，每加载一次，导航时都不会改变。错码如下：

export const appRoutes: Routes = [ 
    { path: '', redirectTo: 'home', pathMatch: 'full' }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'home', component: HomeComponent, canActivate: [AuthGuard], 
     children: [ 
      { path: 'industries', loadChildren: './industries/industries.module', canActivate: [AuthGuard] }, 
      { path: 'industries1', loadChildren: './industries1/industries1.module', canActivate: [AuthGuard] }, 
     ] 
    } 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(appRoutes)], 
    exports: [RouterModule] 
}) 

export class AppRoutingModule { } 

但是，当我不使用懒惰的加载程序，它工作正常。正确的代码如下：

children: [ 
     { path: 'industries', component: IndustriesComponent, canActivate: [AuthGuard] }, 
     { path: 'industries1', component: Industries1Component, canActivate: [AuthGuard] }, 
    ] 

我以前的项目在ASP MVC中，我在HomeModule中使用以下路由器。但是在Angular-cli中，它说“无法找到模块”，请帮助我。

export const homeRoutes: Routes = [ 
    { 
     path: '', component: HomeComponent, 
     children: [ 
      { path: 'industries', loadChildren: 'app/industries/industries.module', canActivate: [AuthGuard] }, 
      { path: 'industries1', loadChildren: 'app/industries1/industries1.module', canActivate: [AuthGuard] }, 
     ] 
    } 
]; 

@NgModule({ 
    imports: [ 
     CommonModule, ReactiveFormsModule, FormsModule, 
     RouterModule.forChild(homeRoutes), 
    ], 
    declarations: [ 
     HomeComponent, 
    ], 
}) 

export default class HomeModule { } 

'industries.module.ts'

import { NgModule } from '@angular/core'; 
import { APP_BASE_HREF, CommonModule } from '@angular/common'; 
import { ReactiveFormsModule, FormsModule } from '@angular/forms'; 
import { HttpModule, Http } from '@angular/http'; 
import { Routes, RouterModule } from '@angular/router'; 
import { PopupModule } from '@progress/kendo-angular-popup'; 

// components 
import { IndustriesComponent } from './industries.component'; 

import { SharedCommonModule } from './../core/shared-module/shared-common.module'; 

import { CommonService } from "./../core/service/common.service"; 

import { ChartsModule } from '@progress/kendo-angular-charts'; 
import { DropDownsModule } from '@progress/kendo-angular-dropdowns'; 
import { ScrollViewModule } from '@progress/kendo-angular-scrollview'; 
import { LayoutModule } from '@progress/kendo-angular-layout'; 
import { DialogModule } from '@progress/kendo-angular-dialog'; 


import { 
    PaginationModule, ButtonsModule 
} from 'ngx-bootstrap'; 


export const industriesRoutes: Routes = [ 
    { 
     path: '', component: IndustriesComponent, 
    } 
]; 

@NgModule({ 
    imports: [ 
     CommonModule, ReactiveFormsModule, FormsModule, 
     SharedCommonModule, 
     DropDownsModule, ScrollViewModule, 
     LayoutModule, ChartsModule, PopupModule, 
     PaginationModule.forRoot(), ButtonsModule.forRoot(), 
     RouterModule.forChild(industriesRoutes), 
    ], 
    declarations: [ 
     IndustriesComponent 
    ], 
}) 

export class IndustriesModule { } 

'industries1.module.ts'

import { NgModule } from '@angular/core'; 
import { APP_BASE_HREF, CommonModule } from '@angular/common'; 
import { ReactiveFormsModule, FormsModule } from '@angular/forms'; 
import { HttpModule, Http } from '@angular/http'; 
import { Routes, RouterModule } from '@angular/router'; 
import { PopupModule } from '@progress/kendo-angular-popup'; 

// components 
import { Industries1Component } from './industries1.component'; 

import { SharedCommonModule } from './../core/shared-module/shared-common.module'; 

import { CommonService } from "./../core/service/common.service"; 

import { ChartsModule } from '@progress/kendo-angular-charts'; 
import { DropDownsModule } from '@progress/kendo-angular-dropdowns'; 
import { ScrollViewModule } from '@progress/kendo-angular-scrollview'; 
import { LayoutModule } from '@progress/kendo-angular-layout'; 
import { DialogModule } from '@progress/kendo-angular-dialog'; 


import { 
    PaginationModule, ButtonsModule 
} from 'ngx-bootstrap'; 


export const industries1Routes: Routes = [ 
    { 
     path: '', component: Industries1Component, 
    } 
]; 

@NgModule({ 
    imports: [ 
     CommonModule, ReactiveFormsModule, FormsModule, 
     SharedCommonModule, 
     DropDownsModule, ScrollViewModule, 
     LayoutModule, ChartsModule, PopupModule, 
     PaginationModule.forRoot(), ButtonsModule.forRoot(), 
     RouterModule.forChild(industries1Routes), 
    ], 
    declarations: [ 
     Industries1Component 
    ], 
}) 

export class Industries1Module { } 

在 'IndustriesModule' 和 'Industries1Module' 几乎相同，但不同之在HTML文件中仅用于测试。 问题是'IndustriesModule'可以成功加载，但当导航到'/ home/industries1'时，'Industries1Module'无法加载。 与之相反，当'/ home/industries1'设置为默认url时，'Industries1Module'可以被成功加载，但当导航到'/ home/industries'时无法加载'IndustriesModule' 。 所以我认为这个问题应该与'home'html或appRoutes相关。

Answer 1

在loadChildren中，您必须指定由＃分隔的文件名和模块名称。

{ path: 'industries', loadChildren: 'app/industries/industries.module', canActivate: [AuthGuard] }, 
{ path: 'industries1', loadChildren: 'app/industries1/industries1.module', canActivate: [AuthGuard] }, 

所以不是'app/industries/industries.module'，你必须使用'app/industries/industries.module#InsertModuleNameHere'。