web-dev-qa-db-ja.com

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

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

私には非常に大きなプロジェクトがあり、ルーターが非推奨のときは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);
angulartypescriptangular2-routing
40
Velidan

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 {  }
76
Marek Dulowski

ドキュメント（2.4.2）に明示的に記載されていないのでわかりませんが、「Angular Modules」および「Routing＆Navigation」ガイドの例から、次のパターンを誘導しました。

  • 遅延モジュールには、独自のルーティングモジュールが必要です。
  • 「lazy-routing.module」で定義されているルート配列には単一の要素が必要です。その要素の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

13
Readren

コメントを削除してみてください。作業中のアプリケーションでルーターを最新に更新したときに、古いルーターから大量のものをコメントアウトしました。失いたくないからです。コメントを削除した後、いくつかの奇妙なエラーはなくなりました。

1
Frank

上記の答えは良いです。インポートを確認してください-モジュールをインポートするのを忘れた可能性があります。 TypeScriptパッケージのバージョンを確認することもできます。 Angular 5の場合、CLIで警告が表示されました。

@ angular/compiler-cli @ 5.2.11にはTypeScript @ '> = 2.4.2 <2.5.0'が必要ですが、代わりに2.5.3が見つかりました。このバージョンを使用すると、未定義の動作が発生し、デバッグが困難になる可能性があります。次のコマンドを実行して、互換性のあるTypeScriptをインストールしてください。

npm install TypeScript@'>=2.4.2 <2.5.0' --save

これもエラーになる可能性があります。

1
Mieszczańczyk S.

私は同じ問題に直面していましたが、すべてが正しかったのです。次は私のために働いた

  1. angularサーバーを停止します
  2. ng serveでサーバーを再起動します

自発的に再び働き始めました。最初に、他の回答に記載されているとおりにすべてが正しいことを確認してから、これを試してください。

0
Hari Das