StephenWilson StephenWilson - 15 days ago 11
TypeScript Question

Lazy loading in Angular2 RC7 and angular-cli webpack

I have created a new app using

ng new
but when I try to configure a module to load using lazy loading I keep getting an error that the module cannot be found.

EXCEPTION: Uncaught (in promise): Error: Cannot find module 'app/home/home.module'


package.json



"dependencies": {
"@angular/common": "2.0.0-rc.7",
"@angular/compiler": "2.0.0-rc.7",
"@angular/core": "2.0.0-rc.7",
"@angular/forms": "2.0.0-rc.7",
"@angular/http": "2.0.0-rc.7",
"@angular/platform-browser": "2.0.0-rc.7",
"@angular/platform-browser-dynamic": "2.0.0-rc.7",
"@angular/router": "3.0.0-rc.3",
"core-js": "^2.4.1",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.21"
},
"devDependencies": {
"@types/jasmine": "^2.2.30",
"angular-cli": "1.0.0-beta.11-webpack.9-4",
"codelyzer": "~0.0.26",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.5",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "2.0.2"
}



  • angular2 RC7

  • angular-cli: 1.0.0-beta.11-webpack.9-4

  • node: 6.5.0

  • os: win32 x64



app.routing.ts:



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

const appRoutes: Routes = [{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: `home`,
loadChildren: `app/home/home.module`
}];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);


app.module.ts



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 { routing } from './app.routing';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


app.component.ts



import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
title = 'app works!';
}


app.component.html



<router-outlet></router-outlet>


I'm sure I'm missing something stupid but I tried various options and nothing has worked so far. Given my configuration, am I missing anything?

Thanks in advance,
Stephen

Answer

With RC7, you can do as follow:

const appRoutes: Routes = [
  {
    path: 'home',
    loadChildren: 'app/home/home.module#HomeModule',
  }
];

Don't forget the "#"

Then kill ng serve and restart it

It will works with angular-cli@webpack

P.S: The angular convention is to prefix lazy loaded folders with a (+) e.g. +home/