TAGS :Viewed: 12 - Published at: a few seconds ago

[ Unable to Lazy load modules in Angular2(RC-6) ]

I am trying to implement lazy loading of feature modules in my sample angular2 application.

My application has a root module and two feature modules.

Path of Root module and routing files are

app/public/scripts/app.module.ts
app/public/scripts/app.routing.ts

Path of feature module and it's routing for which I want to implement lazy loading are

app/public/scripts/modules/user/app.user.module.ts
app/public/scripts/modules/user/app.user.routing.ts

Below is app.routing.ts code

'use strict';

import {Routes , RouterModule } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';

const appRoutes : Routes = [
{path: 'ausers' , loadChildren: 'scripts/modules/user/app.users.module#UsersModule' }
];

export const appRoutingProviders: any[] = [];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Below is app.user.routing.ts code

'use strict';

import { ModuleWithProviders } from '@angular/core';
import { Routes , RouterModule } from '@angular/router';

//-- import components , directives and pipes
import { AppUsersComponent } from './app.users.component';


const UserRoutes :Routes = [
{path: 'ausers/showusers' , component: AppUsersComponent }
]

export const userRouting: ModuleWithProviers =  RouterModule.forChild(UserRoutes);

When user clicks below link in application

routerLink="ausers/showusers"

it is displaying below error

Failed to parse SourceMap: http://localhost:3000/scripts/BehaviorSubject.js.map Angular 2 is running in the development mode. Call >enableProdMode() to enable the production mode. EXCEPTION: Uncaught (in promise): Error: SyntaxError: Unexpected >token < Evaluating http://localhost:3000/scripts/modules/user/app.users.module Error loading http://localhost:3000/scripts/modules/user/app.users.module

I am using webpack for module loading and bundling.
Any idea what could be the reason for this error?

Answer 1


You need to specify the path of the module relative to src/:

{path: 'ausers' , loadChildren: 'app/public/scripts/modules/user/app.users.module#UsersModule' }

Also lazy-loading was buggy with webpack on RC6, which was fixed in #11837 and RC7.