typescript - RangeError: Maximum call stack size exceeded Lazy routing Angular 2

Question

I'm trying to implement lazy routing into my app.

I have a very big project and when it was at router-deprecated I used AsyncRoute, but now it was removed.

So I tried to implement newest lazy loading, but I got an issue RangeError: Maximum call stack size exceeded What I'm doing wrong? I did all code like in instructions.

Take a look please

EncountersModule

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

Here is my app.routing.module

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);

Answer 1

loadChildren needs to reference module with routing

By assigning a value to loadChildren property inside a route, you have to reference a module, which has a routing system implemented. In other words reference only a module that imports RoutingModule and configures it with forChild(routes) method.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 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';

export const encountersModuleRoutes: Routes = [
  /* configure routes here */
];


@NgModule({
  imports: [ SharedModule, RouterModule.forChild(encountersModuleRoutes) ],
  declarations: [ EncountersComponent],
  exports: [ EncountersComponent ],
})


export class EncountersModule {  }