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

i’m trying with angular-cli from master npm linked, i’m getting the System is not defined error and adding Systemjs typings does not help (there are typings for System in src/typings.d.ts apparently), investigating… i would really like to have the lazy loading working with webpack

@Martin-Wegner I’m guessing if you add typings for System.import it will work? The PR referenced (https://github.com/angular/angular-cli/pull/1632) uses the webpack contextplugin so the existing System.imports should work for webpack as well? At least i think that’s the idea. check this for typescript support: https://github.com/TypeStrong/ts-loader/issues/129 I’m just theorizing after reading up on webpack contextplugin, i will test it when i have time :p edit: System.import only works with webpack 2.x as far as i know

@Martin-Wegner if you’re concerned with the implementation, wait until its officially supported and explained by the CLI. Once RC6 lands, using loadChildren with a function that returns a promise will be supported.

I imagine that the CLI will replace the loadChildren string with the appropriate function returning a promise that resolves the lazy loaded module as if you did it the “webpack way” and will not being using the provided SystemJS loader.

The built in loader assumes you have SystemJS available globally already. You need to add SystemJS to your head scripts, and be on the master builds of angular also for this to work. If you want to do it the “webpack” way right now you’ll need a custom loader.

this is actually not closed… #1632 only adds the base for lazy loading, the actual loader seems to be missing… or atleast I didn’t manage to find it in the commits 😃

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.

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