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

Question

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

2. 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 {}```
   

3. MainModule -

   import { CommonModule } from '@angular/common';
   import { MainComponent } from './main.component';
   
   @NgModule({
     imports: [
       CommonModule
     ],
     declarations: [MainComponent]
   })
   export class MainModule {}```
   

4. app.component.html is like below

   < router-outlet > < /router-outlet >

5. 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?

Answer 1

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