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.
请看一下
遭遇模块
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屋!