webpack rc5 loadChildren -Error: Uncaught (in promise): TypeError: Cannot read property 'import' of undefined

[jjlgjkkl]

• when i click the link redirecting to the lazy load path, error occurs:

browser_adapter.js:84 Error: Uncaught (in promise): TypeError: Cannot read property 'import' of undefined
at resolvePromise (zone.js:538)
at zone.js:515
at ZoneDelegate.invoke (zone.js:323)
at Object.onInvoke (ng_zone_impl.js:53)
at ZoneDelegate.invoke (zone.js:322)
at Zone.run (zone.js:216)
at zone.js:571
at ZoneDelegate.invokeTask (zone.js:356)
at Object.onInvokeTask (ng_zone_impl.js:44)
at ZoneDelegate.invokeTask (zone.js:355)

• my source code is:

export const routes: Routes = [
{ path: '', redirectTo: 'contact', pathMatch: 'full'},
{ path: 'crisis', loadChildren: 'app/crisis/crisis.module' },
{ path: 'heroes', loadChildren: 'app/hero/hero.module' }
];
which is from
https://angular.io/docs/ts/latest/guide/ngmodule.html

**everything is ok in systemjs**

• my environment is:
  angular-cli: 1.0.0-beta.11-webpack.2

angular: 2.0.0-rc.5

---

Thanks!

[iurii-kyrylenko]

I think you should use a custom module loader, not just a string.
See closed issue: angular/angular#9938

[iurii-kyrylenko]

Just updated my starter project for webpack.
I used Brandon's approach to lazy load Task2:

export const routes: Routes = [
    { path: '', redirectTo: 'task1', pathMatch: 'full' },
    { path: 'task1', component: Task1Component },
    {
        path: 'task2',
        loadChildren: load(() => new Promise(resolve => {
            (require as any).ensure([], (require: any) => {
                resolve(require('./task-2/task2.module').Task2Module);
            })
        }))
    }
];

Anyway, I would be grateful for any easier solution.
CC: @brandonroberts

[jjlgjkkl]

to @iurii-kyrylenko ,

• in https://angular.io/docs/ts/latest/guide/ngmodule.html , it's OK, but it's using SystemJs, not angular-cli@webpack
• in the latest router , support this kind of lazy loader

[filipesilva]

@TheLarkInn can you add some context to the current resolution of this issue?

[Martin-Luft]

I need the loadChildren feature with webpack and can't wait until RC6 is released therefore I used the nightly builds but it does not work :(

ReferenceError: System is not defined

So I realized that I now need systemjs (in other words... 2 module loaders?)?

Which steps are needed to make the Angular 2 webpack example (https://angular.io/docs/ts/latest/guide/webpack.html) work with loadChildren?

Thank you so much!

[kylecordes]

I think the best way to describe the status of this is simply that the CLI team hasn't gotten to it yet. Most likely, if things go well, down the road a bit you will simply use ng new, ng generate route, etc., and it will all get wired up to "just work" the first time. I can't speak to the timeline of that, I'm not on the CLI team.

I believe there are some lazy loading examples around the web right now, although I don't have a URL handy as I type this. As far as I know, these examples don't yet use CLI.