子どものルータで遅延ロードが機能しない

Question

以前、私はASP MVCフレームワークに基づいた角度のあるプロジェクトを開発しました。今度はAngular-cliに変更したいと思います。しかし、私は子供のルータの遅延ローダーでいくつかのルータの問題に会った。

2つの 'Industries'モジュールはランダムに読み込まれ、読み込まれるたびに読み込まれ、ナビゲーション時には決して変更されません。間違ったコードは以下のとおりです。

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' 。 だから私は問題が 'ホーム' 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'を使用する必要があります。