title: Angular 4 ERROR Error: Uncaught (in promise): RangeError: Maximum call stack size exceeded
body: <ol>
  <li><p>I have AppModule as below - </p>
  
  <pre><code>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 { }
  </code></pre></li>
  <li><p>My AppRoutingModule is like below - </p>
  
  <pre><code>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 {}```
  </code></pre></li>
  <li><p>MainModule - </p>
  
  <pre><code>import { CommonModule } from '@angular/common';
  import { MainComponent } from './main.component';
  
  @NgModule({
    imports: [
      CommonModule
    ],
    declarations: [MainComponent]
  })
  export class MainModule {}```
  </code></pre></li>
  <li><p>app.component.html is like below</p>
  
  <p><code>&lt; router-outlet &gt; &lt; /router-outlet &gt;</code></p></li>
  <li><p>main.component.html -</p>
  
  <p><code>&lt; h1 &gt; main works! &lt; /h1 &gt;</code></p></li>
  </ol>
  
  <p>when I am starting application, I am getting the following error:-</p>
  
  <pre><code>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 &lt;anonymous&gt;
  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
  </code></pre>
  
  <p>Why I am getting this error as there is no loop in my code?</p>