Angular 2 Lazy Loading : RangeError: Maximum call stack size exceeded

angular, lazy-loading

Solution

You forgot to configure child routing

lazy.routing.ts

export const ROUTER_CONFIG = RouterModule.forRoot(ROUTER_DATA);

export const ROUTER_CONFIG = RouterModule.forChild(ROUTER_DATA);

lazy.module.ts

import { ROUTER_CONFIG } from './lazy.routing';
... 

imports: [
    ROUTER_CONFIG
  ]
})
export class LazyModule { }

Problem

I am new to Angular 2 and was trying lazy loading. I got error as "RangeError: Maximum call stack size exceeded" I tried many other similar questions but nothing worked for me. below is my code for your reference. let me know the issue. ``` // App Module import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { ROUTER_CONFIG } from './app.routing'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule, ROUTER_CONFIG ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } // App Routing import { RouterModule, Routes } from '@angular/router'; import { AppComponent } from './app.component'; const ROUTER_DATA: Routes = [ { path:'home', component: AppComponent }, { path:'lazy', loadChildren: './lazy/lazy.module#LazyModule' }, { path:'', redirectTo:'home', pathMatch: 'full'} ]; export const ROUTER_CONFIG = RouterModule.forRoot(ROUTER_DATA); //App Component import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app works!'; } // Lazy module import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { LazyComponent } from './lazy.component'; import { ROUTER_CONFIG } from './lazy.routing'; @NgModule({ declarations: [ LazyComponent ], imports: [ CommonModule ], providers: [], bootstrap: [LazyComponent] }) export class LazyModule { } // lazy Routing import { RouterModule, Routes } from '@angular/router'; import { LazyComponent } from './lazy.component'; const ROUTER_DATA: Routes = [ { path:'', component: LazyComponent } ]; export const ROUTER_CONFIG = RouterModule.forRoot(ROUTER_DATA); // lazy component import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-lazy', templateUrl: './lazy.component.html', styleUrls: ['./lazy.component.css'] }) export class LazyComponent implements OnInit { constructor() { } ngOnInit() { } } ``` ``` <!-- App HTML --> <div [routerLink]="['/home']">Home</div> <div [routerLink]="['/lazy']">Lazy</div> <router-outlet></router-outlet> <!-- lazy html --> <p> lazy works! </p> ```

Original source