Angular 2: Maximum Call Stack size exceeded(Lazy Loading)

Question

I have been implementing lazy loading, everything was working fine till some point but suddenly I am getting below error.

Any idea on what might be the possibilities

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)

Praveen · Accepted Answer · 2017-12-11 04:38:00Z

5

I know it's a bit late....but for anyone having a similar problem in future,here it is:-

Actually this problem may arise cause of many reasons.

1.Recursive operations

The routing module where you have defined your routes , hasn't been included in the .module.ts file of that Module.

3.duplicate routes defined.

principally its cause of the 2nd reason. So look out into your code for these errors.

answered Dec 11, 2017 at 4:38

Praveen

1193 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Praveen Over a year ago

Glad that it helped :)

Exitare Over a year ago

#2 was the key!

aruna harichandan · Accepted Answer · 2016-12-06 13:29:27Z

3

Probably you didn't have any routing for lazy loaded module.But always ensure you don't comment lines in route config files or any files that may cause lot of problem.Or you are doing some operation recursively.

If you can post the code then it will be easier to identify the cause.

Hope this helps!

answered Dec 6, 2016 at 13:29

aruna harichandan

606 bronze badges

1 Comment

sudhir Over a year ago

thanks , In a hurry I included my module the in app module and also lazily loaded it (so it was recursive). Thank you

Humberto Morera · Accepted Answer · 2017-09-12 15:56:41Z

I was having this issue, the reason was that I was missing the declaration of my routes in my LAZY module, in this case I am telling that for the relative path '' use the RandomComponent to load. and then add the reference in the 'imports', like this 'RouterModule.forChild(routes)'.

This is the code:

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

lordUhuru · Accepted Answer · 2017-04-16 20:42:55Z

For anyone else who has a similar issue. Inspect your code properly. I added the module I was creating SharedModule in the import array, making it recursive. Removing it from the imports array, solved it.

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")
}
}

Collectives™ on Stack Overflow

Angular 2: Maximum Call Stack size exceeded(Lazy Loading)

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related