title: RangeError: Maximum call stack size exceeded Lazy routing Angular 2
body: <p>I'm trying to implement lazy routing into my app.</p>
  
  <p>I have a very big project and when it was at router-deprecated I used AsyncRoute, but now it was removed. </p>
  
  <p>So I tried to implement newest lazy loading, but I got an issue
  <strong>RangeError: Maximum call stack size exceeded</strong>
  What I'm doing wrong? I did all code like in instructions.</p>
  
  <p>Take a look please</p>
  
  <p><strong>EncountersModule</strong></p>
  
  <pre><code>    import { NgModule } from '@angular/core';
      // import { CommonModule } from '@angular/common';
      /* ---------------  !System modules  --------------- */
  
      import { SharedModule } from 'sharedModule';   //There is  a lot of shared components/directives/pipes (over 60) and it re-exports CommonModule so I can't avoid it
      /* ---------------  !App outer modules  --------------- */
  
  
      import { EncountersComponent } from './encounters.component';
      // import { PassCodeComponent } from '../../shared/components/passcode/passcode.component';
  
  
      @NgModule({
        imports: [ SharedModule ],
        declarations: [ EncountersComponent],
        exports: [ EncountersComponent ],
      })
  
  
      export class EncountersModule {  }
  </code></pre>
  
  <p>Here is my <strong>app.routing.module</strong></p>
  
  <pre><code>import { NgModule }     from '@angular/core';
  // import { ModuleWithProviders }  from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  
  import { ImagingComponent }      from '../modules/index';
  import { DashboardComponent }      from '../modules/index';
  import { PrescriptionNoticesComponent }      from '../modules/index';
  // import { EncountersComponent } from "../modules/encounters/encounters.component";
  import { ScheduleComponent } from "../modules/schedule/schedule.component";
  import { AdminComponent } from '../modules/index';
  
  
  
  
  @NgModule({
    imports: [
      RouterModule.forRoot([
        {
          path: '',
          component: DashboardComponent,
          data: { label: 'Dashboard' }
        },
        {
          path: 'encounters',
          // component: EncountersComponent,
          loadChildren: 'production/modules/encounters/encounters.module#EncountersModule',
          data: { label: 'Encounters' }
        },
        {
          path: 'admin',
          component: AdminComponent,
          data: { label: 'Admin' }
        }
      ])
    ],
    exports: [
      RouterModule
    ]
  })
  export class AppRoutingModule {}
  
  
  
  
  // const appRoutes: Routes = [
  //   {
  //     path: 'imaging',
  //     component: ImagingComponent,
  //     data: { label: 'Imaging' }
  //   },
  //   {
  //     path: '',
  //     component: DashboardComponent,
  //     data: { label: 'Dashboard' }
  //   },
  //   {
  //     path: 'prescription_notices',
  //     component: PrescriptionNoticesComponent,
  //     data: { label: 'Prescription Notices' }
  //   },
  //   {
  //     path: 'encounters',
  //     component: EncountersComponent,
  //     data: { label: 'Encounters' }
  //   },
  //   {
  //     path: 'schedule',
  //     component: ScheduleComponent,
  //     data: { label: 'Schedule' }
  //   },
  //   {
  //     path: 'admin',
  //     component: AdminComponent,
  //     data: { label: 'Admin' }
  //   }
  // ];
  //
  // export const appRoutingProviders: any[] = [
  //
  // ];
  //
  // export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
  </code></pre>