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

Question

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>

you don't need to bootstrap: [LazyComponent] in LazyModule — Pankaj Parkar
– Pankaj Parkar, Commented May 8, 2017 at 9:27
one more query we can lazy load components too or module is mandatory .... how can pass data between lazy components? — Screener Man
– Screener Man, Commented May 8, 2017 at 13:48
What is the use case? In most of the case I just pass entityId in the route.and Component grab the respectivedata from db/sever.. if it is generalized data then you could think of service for data sharing purpose — Pankaj Parkar
– Pankaj Parkar, Commented May 8, 2017 at 14:22

yurzui · Accepted Answer · 2017-05-08 09:23:12Z

6

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

answered May 8, 2017 at 9:23

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Screener Man Over a year ago

one more query we can lazy load components too or module is mandatory .... how can pass data between lazy components?

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related