example - RangeError: se excedió el tamaño máximo de la pila de llamadas. Lazy routing Angular 2

loadchildren angular 6

Question

Estoy tratando de implementar enrutamiento perezoso en mi aplicación.

Tengo un proyecto muy grande y cuando estaba en desuso, utilicé AsyncRoute, pero ahora fue eliminado.

Así que traté de implementar la carga diferida más reciente, pero tuve un problema RangeError: Se excedió el tamaño máximo de la pila de llamadas ¿Qué estoy haciendo mal? Hice todo el código como en las instrucciones.

Mira por favor

EncuentroModulo

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

Aquí está mi 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

loadChildren necesita hacer referencia al módulo con enrutamiento

Al asignar un valor a la propiedad loadChildren dentro de una ruta, debe hacer referencia a un módulo, que tiene un sistema de enrutamiento implementado. En otras palabras, haga referencia solo a un módulo que importa RoutingModule y lo configura con el método forChild (rutas).

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 2

Intenta eliminar los comentarios. Cuando actualicé mi enrutador a la versión actual en la aplicación en la que estaba trabajando, comenté un montón de cosas del enrutador anterior porque no quería perderlo. Después de eliminar los comentarios, algunos de los errores extraños desaparecieron.

Answer 3

No estoy seguro porque no se menciona explícitamente en la documentación (2.4.2), pero a partir de los ejemplos de las guías "Módulos angulares" y "Enrutamiento y navegación", he inducido el siguiente patrón:

• El módulo perezoso debe tener su propio módulo de enrutamiento.
• La matriz de rutas definida en el "lazy-routing.module" debe tener un solo elemento; la propiedad de path de ese elemento debe ser una cadena vacía; la propiedad del component debe definirse (necesaria cuando el módulo perezoso proporciona cualquier servicio para que la inyección funcione bien) y la plantilla del componente al que se hace referencia debe tener un elemento con la directiva <router-outlet> . Esta ruta suele tener una propiedad children .
• El valor de la propiedad de path de la ruta diferida definida en el "app-routing.module" ("lazyModulePrefix" en mi ejemplo) sería el prefijo de todas las rutas definidas en el ".lazy-routing.module".

Por ejemplo:

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

Con el código anterior, el mapeo de rutas sería:

http://host/login -> LoginComponent

http://host/lazyModulePrefix -> LazyModuleHomeComponent

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

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

http://host/anythingElse -> PageNotFoundComponent