RangeError : Taille maximale de la pile d'appels dépassée Routage paresseux Angular 2

Question

J'essaie d'implémenter le routage paresseux dans mon application.

J'ai un très gros projet et quand il était à router-deprecated j'ai utilisé AsyncRoute, mais maintenant il a été supprimé.

J'ai donc essayé d'implémenter le plus récent chargement paresseux, mais j'ai un problème RangeError : La taille maximale de la pile d'appels est dépassée Qu'est-ce que je fais de mal ? J'ai fait tout le code comme dans les instructions.

Jetez un coup d'œil

RencontresModule

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

Voici mon module.de.routage.de.l'application

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 doit référencer le module avec le routage

En assignant une valeur à la propriété loadChildren dans une route, vous devez faire référence à un module qui a un système de routage implémenté. En d'autres termes, il faut référencer uniquement un module qui importe RoutingModule et le configure avec la méthode 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 2

Je ne suis pas sûr car ce n'est pas explicitement mentionné dans la documentation (2.4.2), mais à partir des exemples dans les guides "Angular Modules" et "Routing & Navigation", j'ai induit le modèle suivant :

• Le module paresseux doit avoir son propre module de routage.
• Le tableau des routes défini dans le module "lazy-routing.module" ne doit comporter qu'un seul élément ; l'élément path de cet élément doit être une chaîne vide ; la propriété component doit être définie (nécessaire lorsque le module paresseux fournit un service quelconque afin que l'injection fonctionne bien) et le modèle du composant référencé doit comporter un élément avec la propriété <router-outlet> directive. Cette route a généralement un children propriété.
• La valeur de la path de la route paresseuse définie dans le module "app-routing.module" ("lazyModulePrefix" dans mon exemple) serait le préfixe de tous les chemins définis dans le module ".lazy-routing.module".

Par exemple :

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

Avec le code ci-dessus, le mappage des routes serait :

http://host/login -> Composant de connexion

http://host/lazyModulePrefix -> LazyModuleHomeComponent

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

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

http://host/anythingElse -> PageNotFoundComponent

Answer 3

Pour faire court : J'ai rencontré cette erreur lorsque je n'ai pas inséré (oublié) les routes enfant au module de fonctionnalité :

atterrissage.routage.ts export const LandingsRoutes = RouterModule.forChild(routes);

landings.module.ts

imports: [
    CommonModule,
    // LandingsRoutes // <-- this I forgot and receive error Callstack exceeded
  ]

Si vous n'exportez pas le module de routage en tant que module - vous devez exporter le seul routeur avec des routes. Seules les choses oubliées provoquent des erreurs

Answer 4

J'ai eu la même erreur. J'avais quatre modules dans mon application angulaire.

ERROR in Maximum call stack size exceeded

Mon erreur

J'avais créé manuellement un fichier de routage dans un module et ce fichier n'était pas importé dans le fichier module.ts. Vous devez donc importer le fichier de routage dans votre fichier module.ts.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserLoginComponent } from './user-login/user-login.component';
import { UserSignupComponent } from './user-signup/user-signup.component';
import { PublicComponent } from './public/public.component';
import { PublicRoutingModule } from './public-routing.modue'; //import it first

@NgModule({
  declarations: [UserLoginComponent, UserSignupComponent, PublicComponent],
  imports: [
    CommonModule,
    PublicRoutingModule // I was missing this line
  ]
})
export class PublicModule { }

Alerte : Ce fichier de module n'est pas app.module.ts

Answer 5

Les réponses ci-dessus sont bonnes. Vérifiez vos importations - vous avez probablement oublié d'importer le module. Vous pouvez également vérifier la version de votre paquetage typescript. Dans mon cas, avec Angular 5, j'ai eu un avertissement dans le CLI :

@angular/compiler-cli@5.2.11 requiert typescript@'>=2.4.2 <2.5.0' mais 2.5.3 a été trouvé à la place. L'utilisation de cette version peut entraîner un comportement indéfini et des problèmes difficiles à déboguer. Veuillez exécuter la commande suivante pour installer une version compatible de TypeScript.

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

Cela peut également entraîner des erreurs.