Lazy loading fails with beta 17

[intellix]

OS?

OSX Sierra

Versions.

beta 17
webpack 2.1.0-beta.25

Repro steps.

1. ng new --routing true r2d2
2. ng g module hello
3. Add this one route to app-routing.module.ts:

{
  path: '',
  loadChildren: 'app/hello/hello.module#HelloModule'
}

The log given by the failure.

Console error: EXCEPTION: Maximum call stack size exceeded

It's hard to really figure out what's going wrong here. ZoneJS is just swallowing any hope of debugging the cause.

[BafS]

Route generator seems to not be available with the current version
https://github.com/angular/angular-cli#generating-a-route

[criticalpixel]

However Lazy loading does work in beta.17 , you just have to do it manually.

[Meligy]

In beta-17, you don't start with app, you start with ./ (or ../ etc), and write a relative path from the -routing.module file to the .module file you want to lazy load, a way more sensible way IMHO 👍

The change was introduced in 7d7ef21

So, if you write this in your src/app/app-routing.module.ts file, it should work once you change it to:

{
  path: '',
  loadChildren: './hello/hello.module#HelloModule'
}

Note: you'll need to restart ng serve or ng build --watch etc for the build process to get the new change.

[intellix]

The change makes sense, but nothing of any variety works whatsoever even after restarting after every change. A few things I just tried:

{
  path: '',
  loadChildren: './hello/hello.module#HelloModule'
}

{
  path: '',
  loadChildren: './hello/hello.module.ts#HelloModule'
}

{
  path: '',
  loadChildren: 'hello/hello.module#HelloModule'
}

// Complaints about missing "default", adding it still fails
{
  path: '',
  loadChildren: './hello/hello.module'
}

If I do Cmd + P when in Chrome, I'm getting ngfactory files and no sourcemaps... perhaps it's a bug with AoT being used by default of which doesn't work?

I'm serving with: ng serve

[Meligy]

Hmm. It should just work with the first variation.

Try specifying the output folder specifically. Like ng serve -o dist.

Something more aggressive we might try is clear the environment and project.
Go to your project folder and run the following:

rm -rf node_modules
rm -rf dist
npm uninstall -g angular-cli
npm cache clear
npm install -g angular-cli
npm install

You might also run ng init after that and let it override your angular-cli.json, and then see in git diff if there was any interesting change.

Then try again.

Other things you can try:

First, routing needs a small change to work with AoT, change const routes: Routes = [ into export const routes: Routes = [ (it needs it to be exported).

Second: Does normal loading work?

import { HelloModule } from `./hello/hello.module`;

export function loadHelloModule() { return HelloModule; }

export const routes: Routes = [
  {
    path: '',
    loadChildren: loadHelloModule
  }
  // ...
];

Ensure you have a <router-outlet> in your app.component.html, and that this scenario works. Then remove the import and try lazy loading again. Remember to restart ng serve manually with each change.

[intellix]

Tried as you said and got the same: EXCEPTION: Maximum call stack size exceeded
I don't think the problem is finding or loading the module lazily. The error seems to appear when it finds the module. The example you gave for loadChildren also caused the same error.

Did you try it? This is on a second laptop and still the same. It doesn't work at all

[Meligy]

I'm sure it works in general, and does not trigger AoT by default. I have created a repo showing it.

See @Meligy/routing-angular-cli.

If you run npm run ng -- serve. it should just work, or simply ng serve assuming you have beta-17 installed properly.

AoT

AoT compilation still fails. But again, ng serve should not be calling that.

[Meligy]

AoT

This is the error in the browser that gets shown when running the sample ng serve --aot:

Repro https://github.com/Meligy/routing-angular-cli

backend.js:34621 Uncaught TypeError: Cannot read property 'get' of null
    at bind (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:34621:32)
    at Array.forEach (native)
    at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:34637:34
    at checkDebug (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:34633:10)
    at Object.<anonymous> (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:34636:2)
    at Object.<anonymous> (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:34812:31)
    at __webpack_require__ (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:20:30)
    at Object.<anonymous> (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:47:19)
    at __webpack_require__ (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:20:30)
    at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:40:18

This is with beta-17, and with latest git. It's also with Angular packages at 2.0.0, and at 2.1.0 (including @angular/compiler).

The repro fixes the build issues (suggested as default in #2680), but the browser error still exists.

// cc @filipesilva @Brocco @TheLarkInn sorry for the spam, but you guys were interested in this in one way or another. Let me know if you prefer this to be a new issue and close this one.

[intellix]

Deeply compared your example to mine and found the issue.
I hadn't created a routing module for the lazily loaded module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LazyComponent } from './lazy.component';

export const routes: Routes = [
  {
    path: '',
    component: LazyComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: []
})
export class LazyRoutingModule { }

If you lazily load a module without any routes, that's the error you get. So I guess this issue has nothing to do with angular-cli and can be closed. Not sure if it's as expected in ng2 but a better error would be good :)

To elaborate on AOT always being used. If you CMD+P in Chrome to search for source-mapped code, files are suffixed with ngfactory. I'm guessing this could be an issue of the source map generation?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}