lazy-load routes (loadChildren) does not work in production mode

[Yuan]

## Issue Overview

<Please explain the issue overview here, short but concise and to-the-point>
loadChildren routes do not work in production mode

Issue Description

I made a little change of the starter project by adding a loadChildren property for todolist route. It is working very well in development mode, but will get the following error when running in production mode. The issue exists in both RC5 and RC6.

app-f6ab9486a8.js:19 STACKTRACE:b.logError @ app-f6ab9486a8.js:19a.call @ app-f6ab9486a8.js:24next @ app-f6ab9486a8.js:25b.object.e @ app-f6ab9486a8.js:25b.__tryOrUnsub @ app-f6ab9486a8.js:23b.next @ app-f6ab9486a8.js:23b._next @ app-f6ab9486a8.js:23b.next @ app-f6ab9486a8.js:23b._finalNext @ app-f6ab9486a8.js:22b._next @ app-f6ab9486a8.js:22b.next @ app-f6ab9486a8.js:22b.emit @ app-f6ab9486a8.js:25onError @ app-f6ab9486a8.js:25onHandleError @ app-f6ab9486a8.js:25t.handleError @ lib-6587db3213.js:7t.runGuarded @ lib-6587db3213.js:7r @ lib-6587db3213.js:7o @ lib-6587db3213.js:7invoke @ lib-6587db3213.js:7
app-f6ab9486a8.js:19 Error: Uncaught (in promise): TypeError: ob.System.import is not a function
at l (lib-6587db3213.js:7)
at lib-6587db3213.js:7
at t.invoke (lib-6587db3213.js:7)
at Object.onInvoke (app-f6ab9486a8.js:25)
at t.invoke (lib-6587db3213.js:7)
at t.run (lib-6587db3213.js:7)
at lib-6587db3213.js:7
at t.invokeTask (lib-6587db3213.js:7)
at Object.onInvokeTask (app-f6ab9486a8.js:25)
at t.invokeTask (lib-6587db3213.js:7)b.logError @ app-f6ab9486a8.js:19a.call @ app-f6ab9486a8.js:24next @ app-f6ab9486a8.js:25b.object.e @ app-f6ab9486a8.js:25b.__tryOrUnsub @ app-f6ab9486a8.js:23b.next @ app-f6ab9486a8.js:23b._next @ app-f6ab9486a8.js:23b.next @ app-f6ab9486a8.js:23b._finalNext @ app-f6ab9486a8.js:22b._next @ app-f6ab9486a8.js:22b.next @ app-f6ab9486a8.js:22b.emit @ app-f6ab9486a8.js:25onError @ app-f6ab9486a8.js:25onHandleError @ app-f6ab9486a8.js:25t.handleError @ lib-6587db3213.js:7t.runGuarded @ lib-6587db3213.js:7r @ lib-6587db3213.js:7o @ lib-6587db3213.js:7invoke @ lib-6587db3213.js:7
lib-6587db3213.js:7 Unhandled Promise rejection: ob.System.import is not a function ; Zone: angular ; Task: Promise.then ; Value: TypeError: ob.System.import is not a function
at a.loadAndCompile (http://localhost:3001/assets/app-f6ab9486a8.js:26:7794)
at a.load (http://localhost:3001/assets/app-f6ab9486a8.js:26:7648)
at a.load (http://localhost:3001/assets/app-f6ab9486a8.js:21:23958)
at b.project (http://localhost:3001/assets/app-f6ab9486a8.js:21:31437)
at b._tryNext (http://localhost:3001/assets/app-f6ab9486a8.js:15:11934)
at b._next (http://localhost:3001/assets/app-f6ab9486a8.js:15:11836)
at b.next (http://localhost:3001/assets/app-f6ab9486a8.js:23:1243)
at b._subscribe (http://localhost:3001/assets/app-f6ab9486a8.js:15:24033)
at b.a.subscribe (http://localhost:3001/assets/app-f6ab9486a8.js:23:4585)
at a._subscribe (http://localhost:3001/assets/app-f6ab9486a8.js:23:5086) TypeError: ob.System.import is not a function
at a.loadAndCompile (http://localhost:3001/assets/app-f6ab9486a8.js:26:7794)
at a.load (http://localhost:3001/assets/app-f6ab9486a8.js:26:7648)
at a.load (http://localhost:3001/assets/app-f6ab9486a8.js:21:23958)
at b.project (http://localhost:3001/assets/app-f6ab9486a8.js:21:31437)
at b._tryNext (http://localhost:3001/assets/app-f6ab9486a8.js:15:11934)
at b._next (http://localhost:3001/assets/app-f6ab9486a8.js:15:11836)
at b.next (http://localhost:3001/assets/app-f6ab9486a8.js:23:1243)
at b._subscribe (http://localhost:3001/assets/app-f6ab9486a8.js:15:24033)
at b.a.subscribe (http://localhost:3001/assets/app-f6ab9486a8.js:23:4585)
at a._subscribe (http://localhost:3001/assets/app-f6ab9486a8.js:23:5086)i @ lib-6587db3213.js:7r @ lib-6587db3213.js:7o @ lib-6587db3213.js:7invoke @ lib-6587db3213.js:7
lib-6587db3213.js:7 Error: Uncaught (in promise): TypeError: ob.System.import is not a function
at l (http://localhost:3001/assets/lib-6587db3213.js:7:10952)
at http://localhost:3001/assets/lib-6587db3213.js:7:10702
at t.invoke (http://localhost:3001/assets/lib-6587db3213.js:7:15312)
at Object.onInvoke (http://localhost:3001/assets/app-f6ab9486a8.js:25:23423)
at t.invoke (http://localhost:3001/assets/lib-6587db3213.js:7:15263)
at t.run (http://localhost:3001/assets/lib-6587db3213.js:7:12699)
at http://localhost:3001/assets/lib-6587db3213.js:7:11295
at t.invokeTask (http://localhost:3001/assets/lib-6587db3213.js:7:15941)
at Object.onInvokeTask (http://localhost:3001/assets/app-f6ab9486a8.js:25:23323)
at t.invokeTask (http://localhost:3001/assets/lib-6587db3213.js:7:15877)i @ lib-6587db3213.js:7r @ lib-6587db3213.js:7o @ lib-6587db3213.js:7invoke @ lib-6587db3213.js:7

Reproducables

<Please explain the way to reproduce your issue, or even better with Plunker link>

Information

Operating System	OSX
Node version	5.x
NPM Version	3.x
Environment	Chrome

[Antony Budianto]

I'm still not sure how to do the bundling for lazy loaded modules. I'd love to accept a PR for this!

[pg2000]

@yuan-java Can you show us an example. When i use somethign like this in my app.routing

const adminRoutes: Routes = [
    {
        path: 'admin',
        loadChildren: 'app/admin/admin.module#AdminModule'
    }
];


const appRoutes: Routes = [
    ...HomeRoutes,
    ...adminRoutes

];

export const appRoutingProviders: any[] = [];

export const routing = RouterModule.forRoot(appRoutes);

it works out of the box.

[Yuan]

@PG2000 I guess you were running the app in development mode. If you run it by 'npm run serve-build', you will get the error.

[pg2000]

@yuan-java i didn't get an error...do you have a plnkr where i can check it?

[Yuan]

@PG2000 Hi, here is the code:
app.routing.ts:

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

import { ModuleWithProviders } from '@angular/core';
import { HomeComponent } from './home/home.component';

const appRoutes: Routes = [
    { path: 'todolist', loadChildren: 'app/todolist/todolist.module#TodolistModule' },
    { path: '',  component: HomeComponent }
];

export const appRoutingProviders: any[] = [

];

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

todolist.routes.ts:

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

import { TodolistComponent } from './todolist.component';
import { ModuleWithProviders } from '@angular/core';

const routes: Routes = [
  { path: 'a', component: TodolistComponent }
];

export const TodolistRoutes: ModuleWithProviders = RouterModule.forChild(routes);

navbar.html:

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">{{brand}}</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a [routerLink]="['/']">Home</a></li>
        <li><a [routerLink]="['/todolist/a']">Todolist</a></li>
      </ul>
    </div>
  </div>
</nav>

[pg2000]

Please provide a demo project or a plunkr
So that we can try to find a solution.

Thanks in advance

[Yuan]

@PG2000 Hi, you can get the demo project from https://github.com/yuan-java/ng2-test.git. Thanks.

[Antony Budianto]

https://github.com/antonybudianto/angular-webpack-starter