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

jackrobertscott · 2016-12-21T02:46:02Z

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.

It is trying to call the property of listLazyRoutes on an undefined variable.
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!

The text was updated successfully, but these errors were encountered:

hansl · 2016-12-21T03:14:34Z

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

vitmaraliaga · 2016-12-21T03:38:38Z

tengo el mismo problema en Windows. Ayuda please!

jackrobertscott · 2016-12-21T03:42:12Z

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 · 2016-12-21T03:48:37Z

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

rengokantai · 2016-12-21T04:06:49Z

Not working for me...

D:\WebstormProjects\todos>npm install
[email protected] D:\WebstormProjects\todos
+-- UNMET DEPENDENCY @angular/common@^2.4.0
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- @angular/[email protected]
+-- UNMET PEER DEPENDENCY [email protected]
+-- UNMET PEER DEPENDENCY [email protected]
`-- UNMET PEER DEPENDENCY [email protected]

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fseve
[email protected]
npm WARN @angular/[email protected] requires a peer of @angular/[email protected]
but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but
none was installed.
npm WARN @angular/[email protected] requires a peer of rxjs@^5.0.1 but none was install
ed.
....

hmmlopez · 2016-12-21T05:17:25Z

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 · 2016-12-21T09:57:24Z

Ups they did it again :(

All my projects are broken.

ghost · 2016-12-21T10:50:33Z

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 · 2016-12-21T10:57:39Z

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

ghost · 2016-12-21T11:01:25Z

@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 · 2016-12-21T11:06:18Z

yup...cache cleared, but hey ho.

npm install -g [email protected] 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 · 2016-12-21T11:44:03Z

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 · 2016-12-21T11:50:20Z

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

ghost · 2016-12-21T12:42:03Z

Do we have a suggested fix for existing projects?

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

antonio-rodrigues · 2016-12-21T13:15:12Z

@egandro DOH! of course not...

Did setup a test route and the result was the expected one:

No error

Second that:
Anyone with a fix for existing projects?

angular/angular-cli#3662 https://github.com/angular/angular-cli#updating-angular-cli

catfireparty · 2016-12-21T14:56:53Z

Please pin angular-cli internal dependencies! The new release of ngtools/webpack completely breaks my build and I've pinned angular-cli to 1.0.0-beta.22-1.

I've fixed this by adding a dependency of my own to ngtools/webpack v1.1.9

This is going to make it a nightmare to upgrade when I'm finally able to do that.

Edit :

Just to make this absolutely clear, I haven't added this comment into this issue for no reason. The release of ngtools/webpack ^1.2.0 is what causes the error Cannot read property 'listLazyRoutes' of undefined to appear in a previously working build.

psurrey · 2016-12-21T15:36:17Z

I can confirm upgrading to beta-24 and angular 2.4.0 fixed the issue

ghost · 2016-12-21T15:36:22Z

AH! So it turns out my existing projects continued to fail due to the dev dependency not being updated also. Silly mistake I missed!

Updated my package.json to "angular-cli": "1.0.0-beta.24",

After updating my project version and my global version, this has been resolved :)

egandro · 2016-12-21T15:57:18Z

@psurrey && @nombienombie which webpack version?

Can you please provide us some of your package.json content?
Are you guys using lazy loading for routes?

aaronleestic · 2016-12-21T15:59:25Z

Hi @hansl , thanks for all your work. Can you reconsider opening this bug as below?

This has not been resolved for me since upgrading to beta.24 introduces another bug, #3674. I am using AoT builds, and I think it is because the dependencies have not been re-exported with the latest ng compiler.

So, upgrading to beta.24 / angular 2.3.0+ may not be a feasible solution for all AoT apps out there that has such dependencies. We may need a beta.22-2 version so as to not force an breaking upgrade to Angular 2.3.0+

antonio-rodrigues · 2016-12-21T16:07:34Z

@nombienombie thanks for the tip!
Also update my devDependencies and now it's working like a charm ;)

@egandro i'm not using lazy loading for now, and here's my package content:

"dependencies": {
"@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/material": "^2.0.0-alpha.11-3",
"@angular/platform-browser": "2.4.0",
"@angular/platform-browser-dynamic": "2.4.0",
"@angular/router": "3.2.3",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.23"
},
"devDependencies": {
"@angular/compiler-cli": "2.4.0",
"@types/hammerjs": "^2.0.33",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.24",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"ts-node": "1.2.1",
"tslint": "^4.0.2",
"typescript": "~2.0.3",
"webdriver-manager": "10.2.5"
}

ghost · 2016-12-21T16:40:14Z

@antonio-rodrigues no problemo ;)

@egandro my package.json is as follows :

  "dependencies": {
    "@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",
    "core-js": "2.4.1",
    "rxjs": "5.0.0",
    "zone.js": "0.7.2",
    "body-parser": "1.15.2",
    "compression": "1.6.2",
    "cors": "2.8.1",
    "express": "4.14.0",
    "path": "0.12.7",
    "ts-helpers": "1.1.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "2.4.0",
    "@types/body-parser": "0.0.33",
    "@types/compression": "0.0.33",
    "@types/cors": "0.0.33",
    "@types/express": "4.0.34",
    "@types/jasmine": "2.5.38",
    "@types/node": "6.0.42",
    "angular-cli": "1.0.0-beta.24",
    "codelyzer": "2.0.0-beta.1",
    "concurrently": "3.1.0",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.0.2",
    "karma-remap-istanbul": "0.2.1",
    "protractor": "4.0.9",
    "rimraf": "2.5.4",
    "ts-node": "1.2.1",
    "tslint": "4.0.2",
    "typescript": "2.0.3",
    "webdriver-manager": "10.2.5"
  }

aaronleestic · 2016-12-21T20:18:52Z

@jdpearce can you help us with more detailed instructions on how you pinned the angular cli internal dependencies? Regarding ngtools/webpack 1.1.9? This change in internal dep may be the culprit for another issue, #3682, as bmbrown10 suggested.

hansl · 2016-12-21T20:41:33Z

To all:

The error pointed to by the creator is the following:

ERROR in Cannot read property 'listLazyRoutes' of undefined

This has been fixed in angular 2.3.1. The other issues you guys are discussing should be kept in a separate issue. I will not reopen this.

aaronleestic · 2016-12-21T20:56:08Z

@egandro @antonio-rodrigues possible solution without upgrading to 2.3.1 (per @jdpearce, thanks!)

Pin ngtools/webpack to 1.1.9 by adding "@ngtools/webpack": "1.1.9", to your package.json dependencies.

This way your app will still build/serve while running beta.22 / 2.2.3, and can hold off on upgrading to 2.3.1+, since for that version, many 3rd party libraries are not yet aot-compatible.

davemo88 · 2016-12-22T05:17:35Z

i get this error with:

angular-cli: 1.0.0-beta.24
node: 6.9.2
os: linux 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
@angular/router: 3.4.0

and then i also get some sass-loader errors like

Module build failed: TypeError: Cannot read property 'path' of undefined

if I roll back angular-cli to 1.0.0-beta.22-1 then I still get the lazy loading error but none of the sass-loader errors. however the app seems to build ok with 22-1 and my routes work

…h routing (angular/angular-cli#3662)

rex2002xp · 2016-12-25T17:36:34Z

Issue solventado al actualizar a la versión 1.0.0-beta.24

Detalle de mi ambiente de desarrollo:

angular-cli: 1.0.0-beta.24
node: 6.9.1
os: linux x64
@angular/common: 2.4.1
@angular/compiler: 2.4.1
@angular/core: 2.4.1
@angular/forms: 2.4.1
@angular/http: 2.4.1
@angular/platform-browser: 2.4.1
@angular/platform-browser-dynamic: 2.4.1
@angular/router: 3.4.1
@angular/compiler-cli: 2.4.1

qiankaiyu · 2016-12-26T09:30:22Z

it may be help. Team-Directive17-Angular2/Angular2-Course-Project@1770529

not only update angular-cli ,but also update your package.json file.

…t read property 'listLazyRoutes' of undefined" as suggested in angular/angular-cli#3662.

davyvanlaere · 2016-12-31T06:08:54Z

Im starting to think an "ng update" command would be great.

conor-mac-aoidh · 2017-01-04T15:16:14Z

I was seeing the original issue - listLazyRoutes error but only on a Windows machine. My setup was working without issue on my linux machine.

I updated angular-cli to beta.24:

angular-cli: 1.0.0-beta.24
node: 7.2.1
os: linux x64
@angular/common: 2.4.1
@angular/compiler: 2.4.1
@angular/core: 2.4.1
@angular/forms: 2.4.1
@angular/http: 2.4.1
@angular/platform-browser: 2.4.1
@angular/platform-browser-dynamic: 2.4.1
@angular/router: 3.4.1
@angular/compiler-cli: 2.4.1

However now this has created another error. When navigating to one of my lazy loaded routes, I get the following error:

EXCEPTION: Uncaught (in promise): Error: Cannot find module 'app/path/to/my/my.module'.

I have changed no code (only package.json versions) and this route was loading previously. Anybody any idea why this is happening?

Needed to upgrade Angular as it was a bug with current version: angular/angular-cli#3662

dtro-devuk · 2017-01-13T12:24:54Z

I had the same issue working with
@angular-cli 1.0.0.-beta.24
node 6.9.4
os win32 x64
Angular was packaged at 2.3.1 and router 2.3.1

I did the following to get a fix:
Upgrade Angular CLI
Update Package.json and ensure all @angular is ^2.4.1 and router is ~3.4.0
Remove node modules

rmdir -rf node_modules dist
npm install --save-dev angular-cli@latest
npm install

Everything then started working, no errors
Good Luck!

dtro-devuk · 2017-01-13T12:25:29Z

I had the same issue working with
@angular-cli 1.0.0.-beta.24
node 6.9.4
os win32 x64
Angular was packaged at 2.3.1 and router 2.3.1

I did the following to get a fix:
Upgrade Angular CLI
Update Package.json and ensure all @angular is ^2.4.1 and router is ~3.4.0
Remove node modules

rmdir -rf node_modules dist
npm install --save-dev angular-cli@latest
npm install
Everything then started working, no errors
Good Luck!

dtro-devuk · 2017-01-13T12:26:26Z

I should of added that client I upgraded to was
@angular-cli 1.0.0.-beta.25.5

codeepic · 2017-02-12T15:01:38Z

I have updated my Angular dependencies to 2.4.0
"@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",

and Angular-CLI to
"angular-cli": "1.0.0-beta.24",

and I still see the ERROR in Cannot read property 'listLazyRoutes' of undefined but webpack compiles successfully and loads the app in the browser.

steelx · 2017-03-20T06:41:34Z

Uninstalled older CLI npm uninstall -g @angular/cli
npm clean cache
Type: npm install -g @angular/cli
And then ng -v
Match the package.json with your ng version result and then finally run npm install and ng serve

angular-automatic-lock-bot · 2019-09-06T22:41:52Z

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.}

hansl closed this as completed Dec 21, 2016

FunkeMT added a commit to fstiehle/de.htwg.wt.nmm that referenced this issue Dec 21, 2016

angular 2 update

f7da469

angular/angular-cli#3662 https://github.com/angular/angular-cli#updating-angular-cli

dustintheweb mentioned this issue Dec 22, 2016

listLazyRoutes cj-wang/mean-start#1

Closed

tslazarov pushed a commit to Team-Directive17-Angular2/Angular2-Course-Project that referenced this issue Dec 22, 2016

Changed some versions of Angular and Angular-CLI causing problems wit…

1770529

…h routing (angular/angular-cli#3662)

Ron537 mentioned this issue Dec 22, 2016

listLazyRoutes is undefined angular/components#2353

Closed

pglazkov added a commit to pglazkov/Linqua that referenced this issue Dec 27, 2016

Pinned the version of WebPack to solve the issue with "ERROR in Canno…

526439e

…t read property 'listLazyRoutes' of undefined" as suggested in angular/angular-cli#3662.

antcalatayud added a commit to antcalatayud/Angular_Form that referenced this issue Jan 4, 2017

Upgrage Angular to 2.4 and first part of the form

5e7c21b

Needed to upgrade Angular as it was a bug with current version: angular/angular-cli#3662

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019

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

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

Comments

jackrobertscott commented Dec 21, 2016

Please provide us with the following information:

OS?

Versions.

Repro steps.

The log given by the failure.

Mention any other details that might be useful.

Thanks everyone!

hansl commented Dec 21, 2016

vitmaraliaga commented Dec 21, 2016

jackrobertscott commented Dec 21, 2016 • edited Loading

vitmaraliaga commented Dec 21, 2016

rengokantai commented Dec 21, 2016 • edited Loading

hmmlopez commented Dec 21, 2016

egandro commented Dec 21, 2016

ghost commented Dec 21, 2016 • edited by ghost Loading

sherwopj commented Dec 21, 2016

ghost commented Dec 21, 2016

sherwopj commented Dec 21, 2016

antonio-rodrigues commented Dec 21, 2016 • edited Loading

egandro commented Dec 21, 2016

ghost commented Dec 21, 2016

antonio-rodrigues commented Dec 21, 2016

catfireparty commented Dec 21, 2016 • edited Loading

psurrey commented Dec 21, 2016

ghost commented Dec 21, 2016 • edited by ghost Loading

egandro commented Dec 21, 2016 • edited Loading

aaronleestic commented Dec 21, 2016

antonio-rodrigues commented Dec 21, 2016 • edited Loading

ghost commented Dec 21, 2016

aaronleestic commented Dec 21, 2016

hansl commented Dec 21, 2016

aaronleestic commented Dec 21, 2016

davemo88 commented Dec 22, 2016

rex2002xp commented Dec 25, 2016

qiankaiyu commented Dec 26, 2016 • edited Loading

davyvanlaere commented Dec 31, 2016

conor-mac-aoidh commented Jan 4, 2017

dtro-devuk commented Jan 13, 2017

dtro-devuk commented Jan 13, 2017

dtro-devuk commented Jan 13, 2017

codeepic commented Feb 12, 2017

steelx commented Mar 20, 2017

angular-automatic-lock-bot bot commented Sep 6, 2019

jackrobertscott commented Dec 21, 2016 •

edited

Loading

rengokantai commented Dec 21, 2016 •

edited

Loading

ghost commented Dec 21, 2016 •

edited by ghost

Loading

antonio-rodrigues commented Dec 21, 2016 •

edited

Loading

catfireparty commented Dec 21, 2016 •

edited

Loading

ghost commented Dec 21, 2016 •

edited by ghost

Loading

egandro commented Dec 21, 2016 •

edited

Loading

antonio-rodrigues commented Dec 21, 2016 •

edited

Loading

qiankaiyu commented Dec 26, 2016 •

edited

Loading