Angular 4 ERROR Error: Uncaught (in promise): RangeError: Maximum call stack size exceeded

Question

I have AppModule as below -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { Router } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

My AppRoutingModule is like below -

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
        {
        path: '',
        loadChildren: './skeleton/main/main.module#MainModule',
    },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {}```

MainModule -

import { CommonModule } from '@angular/common';
import { MainComponent } from './main.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [MainComponent]
})
export class MainModule {}```

app.component.html is like below

< router-outlet > < /router-outlet >
main.component.html -

< h1 > main works! < /h1 >

when I am starting application, I am getting the following error:-

core.js:1427 ERROR Error: Uncaught (in promise): RangeError: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
    at MapSubscriber.Subscriber._error (Subscriber.js:130)
    at MapSubscriber.Subscriber.error (Subscriber.js:105)
    at CatchSubscriber.Subscriber._error (Subscriber.js:131)
    at CatchSubscriber.Subscriber.error (Subscriber.js:105)
    at CatchSubscriber.error (catchError.js:108)
    at FirstSubscriber.Subscriber._error (Subscriber.js:131)
    at FirstSubscriber.Subscriber.error (Subscriber.js:105)
    at MergeMapSubscriber.OuterSubscriber.notifyError (OuterSubscriber.js:24)
    at InnerSubscriber._error (InnerSubscriber.js:28)
    at InnerSubscriber.Subscriber.error (Subscriber.js:105)
    at MapSubscriber.Subscriber._error (Subscriber.js:130)
    at MapSubscriber.Subscriber.error (Subscriber.js:105)
    at CatchSubscriber.Subscriber._error (Subscriber.js:131)
    at CatchSubscriber.Subscriber.error (Subscriber.js:105)
    at CatchSubscriber.error (catchError.js:108)
    at FirstSubscriber.Subscriber._error (Subscriber.js:131)
    at FirstSubscriber.Subscriber.error (Subscriber.js:105)
    at MergeMapSubscriber.OuterSubscriber.notifyError (OuterSubscriber.js:24)
    at InnerSubscriber._error (InnerSubscriber.js:28)
    at InnerSubscriber.Subscriber.error (Subscriber.js:105)
    at resolvePromise (zone.js:821)
    at resolvePromise (zone.js:785)
    at eval (zone.js:870)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4744)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:594)
    at <anonymous>
defaultErrorLogger @ core.js:1427
ErrorHandler.handleError @ core.js:1488
next @ core.js:5498
schedulerFn @ core.js:4339
SafeSubscriber.__tryOrUnsub @ Subscriber.js:240
SafeSubscriber.next @ Subscriber.js:187
Subscriber._next @ Subscriber.js:128
Subscriber.next @ Subscriber.js:92
Subject.next @ Subject.js:56
EventEmitter.emit @ core.js:4319
(anonymous) @ core.js:4775
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
NgZone.runOutsideAngular @ core.js:4701
onHandleError @ core.js:4775
ZoneDelegate.handleError @ zone.js:392
Zone.runGuarded @ zone.js:154
_loop_1 @ zone.js:692
api.microtaskDrainDone @ zone.js:701
drainMicroTaskQueue @ zone.js:602
Promise resolved (async)
scheduleMicroTask @ zone.js:577
ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:297
ZoneDelegate.scheduleTask @ zone.js:401
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:868
resolvePromise @ zone.js:815
(anonymous) @ zone.js:736
webpackJsonpCallback @ inline.bundle.js:22
(anonymous) @ main.module.chunk.js:1
core.js:1427 ERROR RangeError: M

Why I am getting this error as there is no loop in my code?

RouterModule.forChild({ path: '', component: MainComponent }) — yurzui
– yurzui, Commented Dec 28, 2017 at 12:03

Matthew Brown · Accepted Answer · 2018-05-03 20:43:15Z

5

You would need to add a routing module inside of the mainModule for the main module route. For example.

import {NgModule} from "@angular/core";
import {Routes, RouterModule} from "@angular/router";
import {MainComponent} from "./main.component"

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

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class MainRoutingModule {}

Then include the routing module in your MainModule

answered May 3, 2018 at 20:43

Matthew Brown

511 silver badge2 bronze badges

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

Comments

Eric Arnaud · Accepted Answer · 2019-10-11 12:27:53Z

0

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { HomePage } from './home.page';
import {AppointmentComponent} from '../../components/views/appointment/appointment.component';
import {ComponentsModule} from '../../components/components.module';

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

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        ComponentsModule,
        RouterModule.forChild(routes)
    ],
    declarations: [HomePage, AppointmentComponent]
})
export class HomePageModule {}

answered Oct 11, 2019 at 12:27

Eric Arnaud

213 bronze badges

1 Comment

Alessio Over a year ago

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

Dharman · Accepted Answer · 2020-08-13 13:23:40Z

0

I had the same error message with a different issue, using Ionic (though it could happen with Angular only too): inside a page (which is an Angular component) called chat-list I put a component also called chat-list, meaning both of them had the same app-chat-list selector, which caused an infinite loop.

edited Aug 13, 2020 at 13:23

Dharman♦

34k27 gold badges106 silver badges157 bronze badges

answered Aug 13, 2020 at 13:18

Rob

2,3354 gold badges33 silver badges41 bronze badges

Comments

Flavien Volken · Accepted Answer · 2020-11-06 11:25:44Z

0

I had the same problem and things even gone wrong on startup if I had the {preloadingStrategy: PreloadAllModules}enabled.

The problem was that I had a cyclic dependency due to a children module which for some reason imported the parent one.

To quickly find from where the issue came, I used madge

npm i -g madge
madge --circular --extensions ts ./

In my case I got the following output:

✖ Found 1 circular dependency!

1) app/features/customer/customer.module.ts > app/features/customer/customer-routing.module.ts > app/features/customer/create/create.module.ts

Meaning create.module.ts was importing something from customer.module.ts (and conversely). Removing the useless import fixed the issue.

answered Nov 6, 2020 at 11:25

Flavien Volken

21.5k14 gold badges116 silver badges147 bronze badges

Collectives™ on Stack Overflow

Angular 4 ERROR Error: Uncaught (in promise): RangeError: Maximum call stack size exceeded

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related