title: `ERROR RangeError: Maximum call stack size exceeded` - not able to load the page from nested project
body: <p>I am trying to load the page from nested project, but getting error as:
  <code>ERROR RangeError: Maximum call stack size exceeded</code> - any one help me here?</p>
  
  <p>both parent and child app has the <code>app.component.html</code> with <code>router-outlet</code> - will it be an issue?</p>
  
  <p>my project app name (ibo-platform-service):</p>
  
  <p><code>app-routing.module</code> :</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { HomeComponent } from './home/home.component';
  
  const routes: Routes = [
      {
          path: 'home', component: HomeComponent
      }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p><code>app.module.ts</code> :</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule, ModuleWithProviders } from '@angular/core';
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { HomeComponent } from './home/home.component';
  
  const providers = [];
  
  @NgModule({
    declarations: [
      AppComponent,
      HomeComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule
    ],
    exports: [AppRoutingModule],
    providers,
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  
  
  @NgModule({})
  export class App1SharedModule {
    static forRoot(): ModuleWithProviders {
      return {
        ngModule: AppModule,
        providers
      };
    }
  }
  </code></pre>
  
  <p>my main application router module:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { HomeComponent } from './home/home.component';
  
  const routes: Routes = [
      {
          path: '', pathMatch: 'full', redirectTo: 'home'
      },
      {
          path: 'home',
          loadChildren: () =&gt; import('./../../projects/ibo-platform-service/src/app/app.module').then((m) =&gt; m.App1SharedModule)
      }
  ];
  
  @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>app.module.ts:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { HomeComponent } from './home/home.component';
  
  import { App1SharedModule } from './../../projects/ibo-platform-service/src/app/app.module';
  
  @NgModule({
    declarations: [
      AppComponent,
      HomeComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      App1SharedModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>when i run this no page loading from nested project app. getting an error as:</p>
  
  <pre><code>ERROR RangeError: Maximum call stack size exceeded
      at InnerSubscriber._error (InnerSubscriber.js:13)
      at InnerSubscriber.error (Subscriber.js:55)
      at CatchSubscriber._error (Subscriber.js:75)
      at CatchSubscriber.error (Subscriber.js:55)
      at CatchSubscriber.error (catchError.js:32)
      at MergeMapSubscriber.notifyError (OuterSubscriber.js:7)
      at InnerSubscriber._error (InnerSubscriber.js:14)
      at InnerSubscriber.error (Subscriber.js:55)
      at CatchSubscriber._error (Subscriber.js:75)
      at CatchSubscriber.error (Subscriber.js:55)
  </code></pre>
  
  <p>any one figure-out the issue?</p>