wake-up-neo.com

RangeError: Maximale Aufrufstackgröße überschritten Lazy Routing Angular 2

Ich versuche, Lazy Routing in meiner App zu implementieren.

Ich habe ein sehr großes Projekt und als es bei Router-veraltet war, habe ich AsyncRoute verwendet, aber jetzt wurde es entfernt. 

Also habe ich versucht, das neueste Lazy Loading zu implementieren, bekam aber ein Problem RangeError: Maximale Aufrufstackgröße überschritten Was mache ich falsch? Ich habe den ganzen Code wie in Anweisungen gemacht.

Schauen Sie sich bitte um

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

Hier ist mein 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);
37
Velidan

loadChildren muss das Modul mit Routing referenzieren

Wenn Sie der Eigenschaft loadChildren innerhalb einer Route einen Wert zuweisen, müssen Sie ein Modul referenzieren, auf dem ein Routing-System implementiert ist. Mit anderen Worten, referenzieren Sie nur auf ein Modul, das RoutingModule importiert und mit der forChild-Methode (routes) konfiguriert.

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

Ich bin nicht sicher, weil es nicht explizit in der Dokumentation (2.4.2) erwähnt wird, aber aus den Beispielen in den Handbüchern "Angular Modules" und "Routing & Navigation" habe ich folgendes Muster hervorgerufen:

  • Das Lazy-Modul sollte ein eigenes Routing-Modul haben.
  • Das in "lazy-routing.module" definierte Routen-Array sollte ein einzelnes Element enthalten. Die path-Eigenschaft dieses Elements sollte eine leere Zeichenfolge sein. Die component-Eigenschaft sollte definiert werden (dies ist erforderlich, wenn das Lazy-Modul einen Dienst bereitstellt, damit die Injektion gut funktioniert) und die Vorlage der referenzierten Komponente sollte ein Element mit der <router-outlet>-Direktive enthalten. Diese Route hat normalerweise eine children-Eigenschaft.
  • Der Wert der path-Eigenschaft der Lazy-Route, die in "app-routing.module" (in meinem Beispiel "lazyModulePrefix") definiert ist, ist das Präfix aller Pfade, die in ".lazy-routing.module" definiert sind.

Zum Beispiel:

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

Mit dem obigen Code würde die Routenzuordnung lauten:

http: // Host/login -> LoginComponent

http: // Host/lazyModulePrefix -> LazyModuleHomeComponent

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

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

http: // Host/anythingElse -> PageNotFoundComponent

11
Readren

Versuchen Sie, Kommentare zu entfernen. Als ich meinen Router in der Anwendung, an der ich arbeitete, auf den neuesten Stand brachte, kommentierte ich ein paar Sachen vom alten Router, weil ich ihn nicht verlieren wollte. Nach dem Entfernen von Kommentaren sind einige der seltsamen Fehler verschwunden. 

1
Frank

Die obigen Antworten sind gut. Überprüfen Sie Ihre Importe - wahrscheinlich haben Sie vergessen, das Modul zu importieren. Sie können auch Ihre TypeScript-Paketversion überprüfen. In meinem Fall in Angular 5 hatte ich eine Warnung in CLI:

@ angle/compiler-cli @ 5.2.11 erfordert TypeScript @ '> = 2.4.2 <2.5.0', aber stattdessen wurde 2.5.3 gefunden. Die Verwendung dieser Version kann zu undefiniertem Verhalten und schwer zu debuggenden Problemen führen. Führen Sie den folgenden Befehl aus, um eine kompatible Version von TypeScript zu installieren.

npm install [email protected]'>=2.4.2 <2.5.0' --save

Dies kann ebenfalls zu Fehlern führen.

1

Ich stand vor demselben Problem und hatte alles richtig. Folgendes hat für mich gearbeitet

  1. Stoppen Sie den Winkelserver
  2. Starten Sie den Server erneut mit ng serve

Es fing wieder spontan an zu arbeiten. Stellen Sie zunächst sicher, dass Sie alles richtig haben, wie in anderen Antworten erwähnt, und versuchen Sie es dann.

0
Hari Das