chargement paresseux ne fonctionne pas dans les enfants routeur

Question

Auparavant, j'ai développé un projet angulaire basé sur ASP MVC framework. Maintenant, je veux le changer en angulaire-cli. Mais j'ai rencontré quelques problèmes de routeur avec le chargeur paresseux dans le routeur d'enfants.

Deux modules 'Industries' sont chargés aléatoirement, chaque fois qu'ils sont chargés et ne changent jamais lors de la navigation. Mauvais code est ci-dessous:

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 { } 

Mais quand je ne pas utiliser le chargeur paresseux, il fonctionne très bien. Le code est comme ci-dessous:

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

Mon projet précédent dans ASP MVC, j'utiliser le routeur suivant dans HomeModule. Mais dans Angular-cli, il est dit "Can not find module", aidez-moi s'il vous plaît.

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 { } 

Le 'IndustriesModule' et 'Industries1Module' sont à peu près les mêmes, mais diffèrent dans le fichier HTML uniquement pour le test. Le problème est que 'IndustriesModule' peut être chargé avec succès, mais 'Industries1Module' ne peut pas être chargé lorsque je navigue vers '/ home/industries1'. L'inverse est le même, lorsque '/ home/industries1' est défini comme URL par défaut, 'Industries1Module' peut être chargé, mais 'IndustriesModule' ne peut pas être chargé lorsque je navigue vers '/ home/industries' . Donc, je pense que le problème devrait être lié à "home" html ou appRoutes.

Answer 1

Dans loadChildren, vous devez spécifier le nom de fichier et le nom du module séparés par un #.

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

Ainsi, au lieu de 'app/industries/industries.module', vous devez utiliser 'app/industries/industries.module#InsertModuleNameHere'.