web-dev-qa-db-fra.com

RangeError: taille maximale de la pile d'appels dépassée Routage différé angulaire 2

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

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

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

Jetez un coup d'oeil s'il vous plaît

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 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
37
Velidan

loadChildren doit référencer le module avec le routage

En attribuant une valeur à la propriété loadChildren dans un itinéraire, vous devez référencer un module pour lequel un système de routage est implémenté. En d'autres termes, référencez 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 {  }
64
Marek Dulowski

Je ne suis pas sûr car ce n'est pas explicitement mentionné dans la documentation (2.4.2), mais d'après les exemples des guides "Modules angulaires" et "Routage & Navigation", j'ai induit le schéma suivant:

  • Le module paresseux devrait avoir son propre module de routage.
  • Le tableau de routes défini dans "lazy-routing.module" doit avoir un seul élément; la propriété path de cet élément doit être une chaîne vide; la propriété component doit être définie (nécessaire lorsque le module lazy fournit un service pour que l'injection fonctionne correctement) et le modèle du composant référencé doit comporter un élément avec la directive <router-outlet>. Cet itinéraire a généralement une propriété children.
  • La valeur de la propriété path de la route paresseuse définie dans "app-routing.module" ("lazyModulePrefix" dans mon exemple) serait le préfixe de tous les chemins définis dans ".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: // hôte/login -> LoginComponent

http: // Host/lazyModulePrefix -> LazyModuleHomeComponent

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

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

http: // Host/thingElse -> PageNotFoundComponent

11
Readren

Essayez de supprimer les commentaires. Lorsque j'ai mis à jour mon routeur pour qu'il corresponde à l'application sur laquelle je travaillais, j'ai commenté un tas de choses de l'ancien routeur parce que je ne voulais pas le perdre. Après avoir supprimé les commentaires, certaines des erreurs étranges ont disparu. 

1
Frank

Je faisais face au même problème et j'avais tout correct. Ce qui suit a fonctionné pour moi

  1. Arrêtez le serveur angulaire
  2. Redémarrez le serveur avec ng serve

Cela a recommencé à fonctionner spontanément. Tout d’abord, assurez-vous que tout est correct comme indiqué dans les autres réponses, puis essayez ceci.

0
Hari Das