search

angular / angular-cli

CLI tool for Angular
https://cli.angular.dev
MIT License
26.77k stars 11.98k forks source link

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

Closed jackrobertscott closed 7 years ago

jackrobertscott commented 7 years ago

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 commented 7 years ago

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

vitmaraliaga commented 7 years ago

tengo el mismo problema en Windows. Ayuda please!

jackrobertscott commented 7 years ago

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 commented 7 years ago

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

rengokantai commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

Ups they did it again :(

All my projects are broken.

ghost commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

ghost commented 7 years ago

Do we have a suggested fix for existing projects?

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

antonio-rodrigues commented 7 years ago

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

jdpearce commented 7 years ago

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 commented 7 years ago

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

ghost commented 7 years ago

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 commented 7 years ago

@psurrey && @nombienombie which webpack version?

1) Can you please provide us some of your package.json content?

2) Are you guys using lazy loading for routes?

aaronleestic commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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

rex2002xp commented 7 years ago

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 commented 7 years ago

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.

davyvanlaere commented 7 years ago

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

conor-mac-aoidh commented 7 years ago

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?

dtro-devuk commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

codeepic commented 7 years ago

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 commented 7 years ago

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[bot] commented 5 years ago

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.