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

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!

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 36 (2 by maintainers)

Commits related to this issue

angular 2 update https://github.com/angular/angular-cli/issues/3662 https://github.com/angular/angular-cli#updating-angular-cli — committed to fstiehle/de.htwg.wt.nmm by FunkeMT 8 years ago
Changed some versions of Angular and Angular-CLI causing problems with routing (https://github.com/angular/angular-cli/issues/3662) — committed to Team-Directive17-Angular2/Angular2-Course-Project by deleted user 8 years ago
Pinned the version of WebPack to solve the issue with "ERROR in Cannot read property 'listLazyRoutes' of undefined" as suggested in https://github.com/angular/angular-cli/issues/3662. — committed to pglazkov/Linqua by pglazkov 8 years ago
Upgrage Angular to 2.4 and first part of the form Needed to upgrade Angular as it was a bug with current version: https://github.com/angular/angular-cli/issues/3662 — committed to antcalatayud/Angular_Form by antcalatayud 7 years ago

Most upvoted comments

tengo el mismo problema en Windows. Ayuda please!

+12

vitmaraliaga on Dec 21, 2016

Ups they did it again 😦

All my projects are broken.

+11

egandro on Dec 21, 2016

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

davyvanlaere on Dec 31, 2016

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

aaronleestic on Dec 21, 2016

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

vitmaraliaga on Dec 21, 2016

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.

jdpearce on Dec 22, 2016

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"

jackrobertscott on Dec 21, 2016

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

hansl on Dec 21, 2016

@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"
  }

ghost on Dec 21, 2016

@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?

antonio-rodrigues on Dec 21, 2016

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+

aaronleestic on Dec 21, 2016

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

psurrey on Dec 21, 2016

it may be help. https://github.com/Team-Directive17-Angular2/Angular2-Course-Project/commit/177052957fc41660023fbe7c5b8fa50b748d0892

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

qiankaiyu on Dec 26, 2016

@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” }

antonio-rodrigues on Dec 21, 2016

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 😃

ghost on Dec 21, 2016

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

hmmlopez on Dec 21, 2016