【问题标题】：RangeError: Maximum call stack size exceeded Lazy routing Angular 2RangeError：超过最大调用堆栈大小延迟路由Angular 2
【发布时间】：2017-03-01 03:28:28
【问题描述】：

我正在尝试在我的应用中实现延迟路由。

我有一个非常大的项目，当它在路由器弃用时，我使用了 AsyncRoute，但现在它被删除了。

所以我尝试实现最新的延迟加载，但我遇到了问题 RangeError: 超出最大调用堆栈大小 我做错了什么？我按照说明完成了所有代码。

请看一下

遭遇模块

    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);

【问题讨论】：

可能是因为我的遭遇模块没有任何路由
可能尝试删除 cmets。当我在我正在处理的应用程序中将我的路由器更新为当前路由器时，我从旧路由器中评论了一堆东西，因为我不想丢失它。删除 cmets 后，一些奇怪的错误消失了。虽然我的所有 cmets 都在我的代码顶部，所以我不确定这是否适用于此。
感谢弗兰克的帮助！
很高兴成功了！我发布了答案，以便人们可以更轻松地找到它。在更新时，同样的问题让我几乎一整天都感到困惑。

标签： angular typescript angular2-routing

【解决方案1】：

loadChildren 需要通过路由引用模块

通过为路由中的 loadChildren 属性赋值，您必须引用一个已实现路由系统的模块。换句话说，仅引用一个导入 RoutingModule 并使用 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 {  }

【讨论】：

去图吧！！
上帝保佑你。有一个幸福的生活我的朋友。我试图从 1 小时内找到错误，您保存了我的 n 小时数：D
是的，这绝对是一个模块导入/加载问题，还要注意引用模块中的导入顺序，我在放置 CommonModule 时遇到了随机且烦人的问题。
谢谢，当我不小心删除了路由模块的导入时，我收到了这个错误。不知道它是关于什么的:)
我支持@VikasBansat 的评论。上帝保佑你解决了这个问题……我这几天一直在寻找这个问题的答案！

【解决方案2】：

我不确定，因为文档 (2.4.2) 中没有明确提到它，但是从“Angular Modules”和“Routing & Navigation”指南中的示例中，我得出了以下模式：

惰性模块应该有自己的路由模块。
“lazy-routing.module”中定义的路由数组应该有一个元素；该元素的path 属性应该是一个空字符串；应该定义component 属性（当惰性模块提供任何服务以便注入工作良好时是必需的）并且引用组件的模板应该具有带有<router-outlet> 指令的元素。此路由通常具有 children 属性。
“app-routing.module”（在我的示例中为“lazyModulePrefix”）中定义的惰性路由的path 属性的值将是“.lazy-routing.module”中定义的所有路径的前缀。模块”。

例如：

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

使用上面的代码，路由映射将是：

http://host/login -> 登录组件

http://host/lazyModulePrefix -> LazyModuleHomeComponent

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

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

http://host/anythingElse -> PageNotFoundComponent

【讨论】：

【解决方案3】：

长话短说：当没有插入（忘记）子路由到功能模块时，我遇到了这个错误：

landings.routing.ts export const LandingsRoutes = RouterModule.forChild(routes);

landings.module.ts

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

如果您不将路由模块导出为模块 - 您需要导出唯一具有路由的路由器。只有忘记的东西才会导致错误

【讨论】：

【解决方案4】：

我有同样的错误。我的 Angular 应用程序中有四个模块。

ERROR in Maximum call stack size exceeded

我的错误

我在模块内手动创建了一个路由文件，但该文件未导入到 module.ts 文件中。所以你需要在你的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 { }

警告： 此模块文件不是 app.module.ts

【讨论】：

【解决方案5】：

尝试删除 cmets。当我在我正在处理的应用程序中将我的路由器更新为当前路由器时，我从旧路由器中评论了一堆东西，因为我不想丢失它。删除 cmets 后，一些奇怪的错误消失了。

【讨论】：

【解决方案6】：

以上答案都不错。检查您的导入 - 可能您忘记导入模块。您还可以检查您的打字稿包版本。在 Angular 5 中，我在 CLI 中收到警告：

@angular/compiler-cli@5.2.11 需要 typescript@'>=2.4.2

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

这也会出错。

【讨论】：

【解决方案7】：

我遇到了同样的问题，而且我的一切都是正确的。以下对我有用

停止 Angular 服务器
使用ng serve 再次启动服务器

它又自发地开始工作了。首先确保你在其他答案中提到的一切都是正确的，然后试试这个。

【讨论】：

【解决方案8】：

将路由组件导入模块。

在你的 EncounterModule.ts

import:[
   AppRoutingModule 
]

【讨论】：