懶加載不工作在兒童路由器

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'。