Lazy loading with webpack angular2

Question

I am using angular2 full version and i am trying to implement lazy loading. my main routing is as below

export const ROUTES: Routes = [
    { path: 'login', component: LoginPage },
    { path: 'reset-password', component: Myaccount },
    {
        path: '',
        redirectTo: 'app',
        pathMatch: 'full'
    },
    ...ROUTES_APP,
    { path: "sub", loadChildren: "es6-promise?,[name]!./app/sub/sub.module#SubModule" },
];

My Sub routing is as below

import { Routes, RouterModule } from "@angular/router";
import { SubAppComponent } from "./sub-app.component";
import { SubHomeComponent } from "./sub-home.component";

export const subRoutes: Routes = [
  {
    path: "",
    component: SubAppComponent,
    children: [
      { path: "", component: SubHomeComponent }
    ]
  },
];

export const subRouting = RouterModule.forChild(subRoutes);

My sub module is as below

import { NgModule } from "@angular/core";
import { subRouting } from "./sub.routing";
import { SubAppComponent } from "./sub-app.component";
import { SubHomeComponent } from "./sub-home.component";

@NgModule({
  imports: [
    subRouting,
  ],
  declarations: [
    SubAppComponent,
    SubHomeComponent,
  ],
})
export class SubModule {
}

while navigating to sub i am getting error But i am getting below error

core.umd.js:3462 EXCEPTION: Uncaught (in promise): TypeError: System.import is not a function

Please help me on this/ let me know how to handle lazy loading using webpack

Your title says webpack, but your error says that you still use System.js. Angular2 webpack version doesn't use system.js at all. — choz
– choz, Commented Sep 26, 2016 at 9:31

Sudheer KB · Accepted Answer · 2016-09-26 10:40:28Z

2

I have solved above by using require

{ path: "sub", loadChildren: () => require("es6-promise!./app/sub/sub.module")("SubModule") }

answered Sep 26, 2016 at 10:40

Sudheer KB

1,60615 silver badges29 bronze badges

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

Comments

Ignatius Andrew · Accepted Answer · 2016-12-15 12:18:57Z

-1

Try angular-router-loader

Follow the steps..

npm install angular-router-loader --save-dev

in your route for lazy loading

import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: 'lazy', loadChildren: './lazy.module#LazyModule' }
];

for synchronous loading

import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: 'lazy', loadChildren: './lazy.module#LazyModule?sync=true' }
];

in webpack.config.js

test: /\.ts$/,
    loaders: [
      'awesome-typescript-loader',
      'angular-router-loader'
    ]
  }

answered Dec 15, 2016 at 12:18

Ignatius Andrew

8,2643 gold badges56 silver badges54 bronze badges

2 Comments

Sudheer KB Over a year ago

I am getting EXCEPTION: Maximum call stack size exceeded error. Subscriber.js:227 Uncaught RangeError: Maximum call stack size exceeded

Sudheer KB Over a year ago

Tried by removing all comments again same error. If you have any github link please provide me.

Collectives™ on Stack Overflow

Lazy loading with webpack angular2

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related