RangeError：最大呼び出しスタックサイズを超えました遅延ルーティング角度2

Question

私はアプリケーションに遅延ルーティングを実装しようとしています。

私は非常に大きなプロジェクトを持っていて、ルータで廃止されたときにAsyncRouteを使用しましたが、今は削除されました。

は、だから私は、最新の遅延ロードを実装しようとしたが、私は問題 例外RangeErrorを得た：最大コールスタックのサイズは、私が間違ってやっている何 を超えましたか？私は指示のようにすべてのコードをしました。

は見てください

EncountersModuleここ

import { NgModule } from '@angular/core'; 
    // import { CommonModule } from '@angular/common'; 
    /* --------------- !System modules --------------- */ 

    import { SharedModule } from 'sharedModule'; //There is a lot of shared components/directives/pipes (over 60) and it re-exports CommonModule so I can't avoid it 
    /* --------------- !App outer modules --------------- */ 


    import { EncountersComponent } from './encounters.component'; 
    // import { PassCodeComponent } from '../../shared/components/passcode/passcode.component'; 


    @NgModule({ 
     imports: [ SharedModule ], 
     declarations: [ EncountersComponent], 
     exports: [ EncountersComponent ], 
    }) 


    export class EncountersModule { } 

私app.routing.module

import { NgModule }  from '@angular/core'; 
// import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 


import { ImagingComponent }  from '../modules/index'; 
import { DashboardComponent }  from '../modules/index'; 
import { PrescriptionNoticesComponent }  from '../modules/index'; 
// import { EncountersComponent } from "../modules/encounters/encounters.component"; 
import { ScheduleComponent } from "../modules/schedule/schedule.component"; 
import { AdminComponent } from '../modules/index'; 




@NgModule({ 
    imports: [ 
    RouterModule.forRoot([ 
     { 
     path: '', 
     component: DashboardComponent, 
     data: { label: 'Dashboard' } 
     }, 
     { 
     path: 'encounters', 
     // component: EncountersComponent, 
     loadChildren: 'production/modules/encounters/encounters.module#EncountersModule', 
     data: { label: 'Encounters' } 
     }, 
     { 
     path: 'admin', 
     component: AdminComponent, 
     data: { label: 'Admin' } 
     } 
    ]) 
    ], 
    exports: [ 
    RouterModule 
    ] 
}) 
export class AppRoutingModule {} 




// const appRoutes: Routes = [ 
// { 
//  path: 'imaging', 
//  component: ImagingComponent, 
//  data: { label: 'Imaging' } 
// }, 
// { 
//  path: '', 
//  component: DashboardComponent, 
//  data: { label: 'Dashboard' } 
// }, 
// { 
//  path: 'prescription_notices', 
//  component: PrescriptionNoticesComponent, 
//  data: { label: 'Prescription Notices' } 
// }, 
// { 
//  path: 'encounters', 
//  component: EncountersComponent, 
//  data: { label: 'Encounters' } 
// }, 
// { 
//  path: 'schedule', 
//  component: ScheduleComponent, 
//  data: { label: 'Schedule' } 
// }, 
// { 
//  path: 'admin', 
//  component: AdminComponent, 
//  data: { label: 'Admin' } 
// } 
// ]; 
// 
// export const appRoutingProviders: any[] = [ 
// 
// ]; 
// 
// export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

Answer 1

コメントを削除してくださいです。私が作業していたアプリケーションで現在のルータにアップデートしたとき、私はそれを失いたくないので、古いルータからたくさんのものをコメントしました。コメントを削除した後、奇妙なエラーのいくつかは消え去った。

Answer 2

loadChildrenルート内部プロパティをloadChildrenする値を割り当てることによって、

ルーティングとモジュールを参照する必要があり、あなたが実装ルーティングシステムを有するモジュールを参照しなければなりません。言い換えれば、RoutingModuleをインポートしてforChild（routes）メソッドで設定するモジュールのみを参照します。

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 
// import { CommonModule } from '@angular/common'; 
/* --------------- !System modules --------------- */ 

import { SharedModule } from 'sharedModule'; //There is a lot of shared components/directives/pipes (over 60) and it re-exports CommonModule so I can't avoid it 
/* --------------- !App outer modules --------------- */ 


import { EncountersComponent } from './encounters.component'; 
// import { PassCodeComponent } from '../../shared/components/passcode/passcode.component'; 

export const encountersModuleRoutes: Routes = [ 
    /* configure routes here */ 
]; 


@NgModule({ 
    imports: [ SharedModule, RouterModule.forChild(encountersModuleRoutes) ], 
    declarations: [ EncountersComponent], 
    exports: [ EncountersComponent ], 
}) 


export class EncountersModule { } 

Answer 3

それが明示的に文書（2.4.2）で言及されていないので、私はわからないが、「角度モジュール」とガイド「&ナビゲーションのルーティング」の例から、私は次のパターンを誘発しています：

• 遅延モジュールには、独自のルーティングモジュールが必要です。
• "lazy-routing.module"で定義されているroutes配列は、単一の要素を持つ必要があります。その要素のpathプロパティは空の文字列でなければなりません。 componentプロパティを定義する必要があります（レイジーモジュールがインジェクションをうまく実行するためにサービスを提供する場合に必要です）。参照されるコンポーネントのテンプレートは、<router-outlet>ディレクティブの要素を持つ必要があります。このルートには通常、childrenというプロパティがあります。
• "app-routing.module"（私の例では "lazyModulePrefix"）で定義された遅延経路のpathプロパティの値は、 ".lazy-routing.module"で定義されたすべてのパスの接頭辞です。 。例えば

：

///////////// app-routing.module.ts ///////////////////// 
import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { LoginComponent } from './login/login.component'; 
import { PageNotFoundComponent } from './page-not-found.component'; 

const appRoutes: Routes = [ 
    { path: 'login', component: LoginComponent }, 
    { path: 'lazyModulePrefix', loadChildren: 'app/lazyModulePath/lazy.module#LazyModule' }, // 
    { path: '', redirectTo: 'login', pathMatch: 'full'}, 
    { path: '**', component: PageNotFoundComponent }, 
]; 

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

。

///////////// lazy-routing.module.ts ///////////////////// 
import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { LazyModuleRootComponent } from './lazy-module-root.component'; 
import { LazyModuleHomeComponent } from './lazy-module-home.component'; 
import { AComponentDeclaredInTheLazyModule1 } from './a-component-declared-in-the-lazy-module-1.component'; 
import { AComponentDeclaredInTheLazyModule2 } from './a-component-declared-in-the-lazy-module-2.component'; 

const lazyModuleRoutes: Routes = [ // IMPORTANT: this array should contain a single route element with an empty path. And optionally, as many children as desired. 
    { path: '', 
     component: LazyModuleRootComponent, // the `component` property is necessary when the lazy module provides some service in order to injection work well. If defined, the referenced component's template should have an element with the `<router-outlet>` directive. 
     children: [ 
     { path: '', component: LazyModuleHomeComponent }, // this component has no diference with the other children except for the shorter route. 
     { path: 'somePath1', component: AComponentDeclaredInTheLazyModule1 }, 
     { path: 'somePath2', component: AComponentDeclaredInTheLazyModule2 }, 
    ] } 
]; 

@NgModule({ 
    imports: [RouterModule.forChild(lazyModuleRoutes)], 
    exports: [RouterModule] 
}) 
export class LazyRoutingModule { } 

。

//////////////////// lazy.module.ts //////////////////// 
import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 

import { SharedModule } from '../shared/shared.module'; 
import { LazyRoutingModule } from './lazy-routing.module'; 
import { LazyModuleRootComponent } from './lazy-module-root.component'; 
import { LazyModuleHomeComponent } from './lazy-module-home.component'; 
import { AComponentDeclaredInTheLazyModule1 } from './a-component-declared-in-the-lazy-module-1.component'; 
import { AComponentDeclaredInTheLazyModule2 } from './a-component-declared-in-the-lazy-module-2.component'; 

@NgModule({ 
    imports: [ 
     CommonModule, 
     SharedModule, 
     LazyRoutingModule, 
    ], 
    declarations: [ 
     LazyModuleRootComponent, 
     LazyModuleHomeComponent, 
     AComponentDeclaredInTheLazyModule1, 
     AComponentDeclaredInTheLazyModule2, 
    ] 
}) 
export class LazyModule { } 

。上記のコードで

//////////////// lazy-module-root.component.ts ////////////////// 
import { Component } from '@angular/core'; 

@Component({ 
    template: '<router-outlet></router-outlet>' 
}) 
export class LazyModueRootComponent { } 

、経路マッピングは次のようになります

http://host/login - > LoginComponent

http://host/lazyModulePrefix - > LazyModuleHomeComponent

http://host/lazyModulePrefix/somePath1 - > AComponentDeclaredInTheLazyModule1

http://host/lazyModulePrefix/somePath2 - > AComponentDeclaredInTheLazyModule2

http://host/anythingElse - > PageNotFoundComponent