bug: lazy loading routes with property undefined and error when redirecting

[jackrobertscott]

Please provide us with the following information:

OS?

Mac OSX El Capitan

Versions.

angular-cli: 1.0.0-beta.22-1
node: 6.9.1
os: darwin x64

Repro steps.

Yes, this app was created with the CLI. The app runs fine on my laptop. However, on my larger, more powerful Mac Desktop, the error(s) occur. 2 errors occur which are both associated with my lazy loading of modules.

1. It is trying to call the property of listLazyRoutes on an undefined variable.
2. It won't let me set a redirect url to a lazy loaded module.

The log given by the failure.

The listLazyRoutes error:

webpack: bundle is now INVALID.
Hash: d5cf9613b92421a92d2d
Time: 1688ms
chunk    {0} main.bundle.js, main.bundle.map (main) 10.9 kB {2} [initial]
chunk    {1} styles.bundle.js, styles.bundle.map (styles) 10.6 kB {3} [initial]
chunk    {2} vendor.bundle.js, vendor.bundle.map (vendor) 3.33 MB [initial]
chunk    {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry]

ERROR in Cannot read property 'listLazyRoutes' of undefined
webpack: bundle is now VALID.

The error that prevents me from setting a redirect url to a lazy loaded path like the following (and yes, I have tried relative urls).

const routes: Routes = [
  { path: '', redirectTo: 'auth/login', pathMatch: 'full' },
  { path: 'auth', loadChildren: 'app/auth/auth.module#AuthModule' },
];

Error log:

Error: Uncaught (in promise): Error: Cannot find module 'app/auth/auth.module'.
Error: Cannot find module 'app/auth/auth.module'.
    at webpackEmptyContext (src async:2)
    at SystemJsNgModuleLoader.loadAndCompile (system_js_ng_module_factory_loader.js:46)
    at SystemJsNgModuleLoader.load (system_js_ng_module_factory_loader.js:38)
    at RouterConfigLoader.loadModuleFactory (router_config_loader.js:42)
    at RouterConfigLoader.load (router_config_loader.js:33)
    at MergeMapSubscriber.project (apply_redirects.js:242)
    at MergeMapSubscriber._tryNext (mergeMap.js:110)
    at MergeMapSubscriber._next (mergeMap.js:100)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:89)
    at ScalarObservable._subscribe (ScalarObservable.js:49)
    at webpackEmptyContext (src async:2)
    at SystemJsNgModuleLoader.loadAndCompile (system_js_ng_module_factory_loader.js:46)
    at SystemJsNgModuleLoader.load (system_js_ng_module_factory_loader.js:38)
    at RouterConfigLoader.loadModuleFactory (router_config_loader.js:42)
    at RouterConfigLoader.load (router_config_loader.js:33)
    at MergeMapSubscriber.project (apply_redirects.js:242)
    at MergeMapSubscriber._tryNext (mergeMap.js:110)
    at MergeMapSubscriber._next (mergeMap.js:100)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:89)
    at ScalarObservable._subscribe (ScalarObservable.js:49)
    at resolvePromise (zone.js:468)
    at resolvePromise (zone.js:453)
    at zone.js:502
    at ZoneDelegate.invokeTask (zone.js:265)
    at Object.onInvokeTask (ng_zone.js:227)
    at ZoneDelegate.invokeTask (zone.js:264)
    at Zone.runTask (zone.js:154)
    at drainMicroTaskQueue (zone.js:401)

Mention any other details that might be useful.

I believe the listLazyRoutes property is in the node_modules/@ngtools/webpack/src/plugin.js file:

// Process the lazy routes
_this._lazyRoutes = {};
var allLazyRoutes = compiler_cli_1.__NGTOOLS_PRIVATE_API_2.listLazyRoutes({
  program: _this._program,
  host: _this._compilerHost,
  angularCompilerOptions: _this._angularCompilerOptions,
  entryModule: _this._entryModule
});

Like I said, this issue doesn't occur on my laptop. Maybe it has to do with the speed at which the modules are loaded, running code that accesses the property of an object that hasn't yet been set? I'm not sure...

Thanks everyone!

[hansl]

Upgrade to Angular CLI beta 24, or Angular 2.3 (or higher), that will fix the problem.

[vitmaraliaga]

tengo el mismo problema en Windows. Ayuda please!

[jackrobertscott]

Fixed: upgrading Angular to ^2.4.0 worked for me. Thanks.

"@angular/common": "^2.4.0",
"@angular/compiler": "^2.4.0",
"@angular/core": "^2.4.0",
"@angular/forms": "^2.4.0",
"@angular/http": "^2.4.0",
"@angular/platform-browser": "^2.4.0",
"@angular/platform-browser-dynamic": "^2.4.0",
"@angular/router": "~3.4.0",
"angularfire2": "^2.0.0-beta.6",
"core-js": "^2.4.1",
"firebase": "^3.6.4",
"rxjs": "^5.0.0",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"

[vitmaraliaga]

Soy nuevo en angular, me puedes dar algunas ideas de como actualizo mis paquetes de angular2?

[rengokantai]

Not working for me...

D:\WebstormProjects\todos>npm install
todos@0.0.0 D:\WebstormProjects\todos
+-- UNMET DEPENDENCY @angular/common@^2.4.0
+-- UNMET PEER DEPENDENCY @angular/compiler@2.4.0
+-- UNMET PEER DEPENDENCY @angular/compiler-cli@2.2.3
+-- UNMET PEER DEPENDENCY @angular/core@2.4.0
+-- @angular/forms@2.4.0
+-- @angular/http@2.4.0
+-- UNMET PEER DEPENDENCY @angular/platform-browser@2.4.0
+-- @angular/platform-browser-dynamic@2.4.0
+-- UNMET PEER DEPENDENCY rxjs@5.0.0-beta.12
+-- UNMET PEER DEPENDENCY tslint@4.1.1
`-- UNMET PEER DEPENDENCY zone.js@0.6.26

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fseve
nts@1.0.15
npm WARN @angular/compiler-cli@2.2.3 requires a peer of @angular/compiler@2.2.3
but none was installed.
npm WARN @angular/compiler-cli@2.2.3 requires a peer of @angular/core@2.2.3 but
none was installed.
npm WARN @angular/core@2.4.0 requires a peer of rxjs@^5.0.1 but none was install
ed.
....

[hmmlopez]

I had the same problem and update worked for me:
https://github.com/angular/angular-cli#updating-angular-cli

Before was using:
angular-cli: 1.0.0-beta.22-1

I updated to the latest version:
angular-cli: 1.0.0-beta.24
node: 7.2.0
os: win32 x64

[egandro]

Ups they did it again :(

All my projects are broken.

I'm seeing this error now also.

angular-cli: 1.0.0-beta.24
node: 6.9.2
os: win32 x64

"@angular/common": "^2.4.0",
"@angular/compiler": "^2.4.0",
"@angular/core": "^2.4.0",
"@angular/forms": "^2.4.0",
"@angular/http": "^2.4.0",
"@angular/platform-browser": "^2.4.0",
"@angular/platform-browser-dynamic": "^2.4.0",

[sherwopj]

npm install -g angular-cli@latest
ng -v

angular-cli: 1.0.0-beta.22-1
node: 7.2.0
os: win32 x64

@latest still points to beta 22 it seems

@latest still points to beta 22 it seems

Did you clear your cache after uninstalling? I just ran npm install -g angular-cli@latest and it installed angular-cli: 1.0.0-beta.24

None the less, the issue persists on beta.24

[sherwopj]

yup...cache cleared, but hey ho.

npm install -g angular-cli@1.0.0-beta.24 worked for me

on beta.22-1
ng new foo
ng serve

ERROR in Cannot read property 'listLazyRoutes' of undefined

on beta.24
ng new foo
ng serve

All is well :)

[antonio-rodrigues]

I'm seeing this error on:
angular-cli: 1.0.0-beta.22-1
node: 6.9.1
os: darwin x64

What i did now:
uninstalled, cache cleared, npm install -g angular-cli@latest: end up with 1.0.0-beta.24

@ existing project folder:
npm i
ng serve

ERROR in Cannot read property 'listLazyRoutes' of undefined

@ new one:
ng new foo
npm i
ng serve

No error

[egandro]

@antonio-rodrigues: Yeah in new projects there are no routes ;)

Do we have a suggested fix for existing projects?

Can confirm it is no longer happening if I create a new project...