RangeError:超出最大调用堆栈大小惰性路由Angular 2 [英] RangeError: Maximum call stack size exceeded Lazy routing Angular 2
问题描述
我正在尝试在我的应用程序中实现延迟路由.
I'm trying to implement lazy routing into my app.
我有一个非常大的项目,当它不支持路由器时,我使用了AsyncRoute,但是现在将其删除了.
I have a very big project and when it was at router-deprecated I used AsyncRoute, but now it was removed.
所以我尝试实现最新的延迟加载,但是遇到了一个问题 RangeError:超出了最大调用堆栈大小 我做错了什么?我按照说明执行了所有代码.
So I tried to implement newest lazy loading, but I got an issue RangeError: Maximum call stack size exceeded What I'm doing wrong? I did all code like in instructions.
请看看
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 { }
这是我的 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);
推荐答案
loadChildren需要通过路由引用模块
通过为路由内的loadChildren属性分配值,您必须引用实现了路由系统的模块.换句话说,仅引用导入RoutingModule并使用forChild(routes)方法对其进行配置的模块.
loadChildren needs to reference module with routing
By assigning a value to loadChildren property inside a route, you have to reference a module, which has a routing system implemented. In other words reference only a module that imports RoutingModule and configures it with forChild(routes) method.
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 { }
这篇关于RangeError:超出最大调用堆栈大小惰性路由Angular 2的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!