RangeError: Przekroczono maksymalny rozmiar stosu wywołań Lazy routing Angular 2

Question

Próbuję wprowadzić leniwy routing do mojej aplikacji.

Mam bardzo duży projekt i kiedy był na routerze przestarzałe, użyłem AsyncRoute, ale teraz został usunięty.

Więc starałem się wdrożyć najnowszy leniwy załadunku, ale mam problem RangeError: Maksymalny rozmiar stosu wywołań przekroczyła Co robię źle? Zrobiłem wszystko, jak w instrukcjach.

Spójrz proszę

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

Oto moja 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

Spróbuj usunąć komentarze. Kiedy zaktualizowałem swój router do bieżącego w aplikacji, nad którą pracowałem, skomentowałem kilka rzeczy ze starego routera, ponieważ nie chciałem go zgubić. Po usunięciu komentarzy niektóre dziwne błędy zniknęły.

Answer 2

loadChildren musi odwoływać się moduł z routingu

Przypisując wartość loadChildren własność wewnątrz trasy, trzeba odwołać się do modułu, który posiada system routingu realizowane. Innymi słowy, odwołaj się tylko do modułu, który importuje RoutingModule i konfiguruje go za pomocą metody 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

nie jestem pewien, ponieważ nie jest wyraźnie wymienione w dokumentacji (2.4.2), ale z przykładów w „kątowe Modules” i „Routing & nawigację” prowadnice, mam następujący wzór skłonił :

• Leniwy moduł powinien mieć własny moduł routingu.
• Tablica tras zdefiniowana w "lazy-routing.module" powinna mieć pojedynczy element; Właściwość path tego elementu powinna być pustym ciągiem; należy zdefiniować właściwość component (konieczna, gdy leniwy moduł zapewnia jakąkolwiek usługę, aby wtrysk dobrze działał), a szablon przywoływanego komponentu powinien mieć element z dyrektywą <router-outlet>. Ta trasa ma zazwyczaj właściwość children.
• Wartość właściwości path dla leniwej trasy zdefiniowanej w "app-routing.module" ("lazyModulePrefix" w moim przykładzie) byłaby prefiksem wszystkich ścieżek zdefiniowanych w ".lazy-routing.module" .

Na przykład

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

Z powyższego kodu mapowania trasy będzie:

http://host/login -> LoginComponent

http://host/lazyModulePrefix -> LazyModuleHomeComponent

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

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

http://host/anythingElse -> PageNotFoundComponent