Angular 2:超出最大调用堆栈大小(延迟加载)

时间:2016-12-06 13:05:09

标签: angular lazy-loading angular2-routing

我一直在实施延迟加载,一切都运行良好,直到某些点但突然我得到低于错误。

对可能存在的可能性有所了解

RangeError: Maximum call stack size exceeded
     at CatchSubscriber.OuterSubscriber [as constructor] (OuterSubscriber.ts:9)
     at new CatchSubscriber (catch.ts:48)
     at CatchOperator.call (catch.ts:35)
     at Observable.subscribe (Observable.ts:93)
     at Object.subscribeToResult (subscribeToResult.ts:32)
     at MergeAllSubscriber._next (mergeAll.ts:86)
     at MergeAllSubscriber.Subscriber.next (Subscriber.ts:95)
     at MapSubscriber._next (map.ts:84)
     at MapSubscriber.Subscriber.next (Subscriber.ts:95)
     at ArrayObservable._subscribe (ArrayObservable.ts:124)

4 个答案:

答案 0 :(得分:3)

可能你没有为延迟加载的模块做任何路由。但是要始终确保你不要在路由配置文件或任何可能导致很多问题的文件中注释行。或者你正在递归地做一些操作

如果您可以发布代码,那么更容易确定原因。

希望这有帮助!

答案 1 :(得分:3)

我知道它有点晚了......但是对于今后遇到类似问题的人来说,这里是: -

实际上这个问题可能由多种原因引起。

1.递归操作

  1. 您已定义路线的路由模块尚未包含在该模块的.module.ts文件中。
  2. 3.定义了重复的路线。

    主要是其原因的第二个原因。 因此,请查看您的代码以了解这些错误。

答案 2 :(得分:0)

对于有类似问题的其他人。正确检查您的代码。我在导入数组中添加了我正在创建 SharedModule 的模块,使其递归。从导入数组中删除它,解决了它。

import {Optional, SkipSelf, NgModule, OnDestroy, OnInit} from 
"@angular/core";
import {AppConfig} from "./conf/app-config";
import {UrlService} from "./url.service";
import {TranslateModule, TranslateService} from "ng2-translate";
import {Subscription} from "rxjs";
import {ActivatedRoute} from "@angular/router";

@NgModule({
declarations:[],
imports:[SharedModule],
providers: [AppConfig, UrlService],
exports:[TranslateModule]
})
export class SharedModule implements OnInit, OnDestroy{

private subscription: Subscription;

constructor (@Optional() @SkipSelf() parentModule: SharedModule,
           private _translate: TranslateService, private _route :ActivatedRoute ) {
if (parentModule) {
  throw new Error(
    'SharedModule is already loaded. Import it in the AppModule only');
}

//add languages
_translate.addLangs(["en", "fr", "es", "zh"]);
_translate.setDefaultLang("en");


let browserLang = _translate.getBrowserLang();
_translate.use(browserLang.match(/en|fr|es|zh/) ? browserLang : "en")
}
}

答案 3 :(得分:0)

我遇到了这个问题,原因是我错过了我的LAZY模块中的路线声明,在这种情况下,我告诉我相对路径''使用 RandomComponent 加载。然后在' imports'中添加引用,如此' RouterModule.forChild(routes)'。

这是代码:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { RandomComponent } from './random-component';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    component: RandomComponent,
    path: ''
  }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    RandomComponent
  ]
})
export class RandomModule { }