Skip to content

Routing not working with AoT #2735

Description

@Meligy

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

macOS Sierra

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

Tried final beta-17 and current master

angular-cli: local (v1.0.0-beta.17, branch: master)
node: 6.7.0
os: darwin x64

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

Create a new project that has routes looking like this:

app-routing:

import{SimpleRouteComponent}from'./simple-route/simple-route.component';import{BundledModule}from'./bundled/bundled.module';exportfunctionloadBundledModule(){returnBundledModule;}exportconstroutes: Routes=[{path: '',pathMatch: 'full',component: SimpleRouteComponent},{path: 'bundled',loadChildren: loadBundledModule},{path: 'lazy',loadChildren: './lazy/lazy.module#LazyModule'}];

bundled-routing:

exportconstroutes: Routes=[{path: '',component: BundledComponent}];

lazy-routing:

exportconstroutes: Routes=[{path: '',component: LazyComponent}];

Full repository sample:
https://github.com/meligy/routing-angular-cli

The log given by the failure.

Normally this include a stack trace and some more information.

First, I run ng build --aot, and it shows successful output.

Then, I run ng serve --aot, and it also shows successful output.

Loading /

But then I go to http://localhost:4200/, I see the page loading fine (the page content shows simple-route works!), but in the browser console I see this error:

chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/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

Synchronous Loading (Same bundle) /bundled

If I click on a router link that goes to http://localhost:4200/bundled, I get extra errors in the browser console, and the URL stays at http://localhost:4200/. Extra errors shown:

2016-10-17 13:20:59.886 error_handler.js:48 EXCEPTION: Uncaught (in promise): TypeError: r.create is not a function
ErrorHandler.handleError @ error_handler.js:48
next @ application_ref.js:298
schedulerFn @ async.js:89
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:81
NgZone.triggerError @ ng_zone.js:280
onHandleError @ ng_zone.js:259
Zone.runGuarded @ zone.js:113
_loop_1 @ zone.js:379
drainMicroTaskQueue @ zone.js:386
ZoneTask.invoke @ zone.js:308
2016-10-17 13:20:59.886 error_handler.js:53 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:53
next @ application_ref.js:298
schedulerFn @ async.js:89
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:81
NgZone.triggerError @ ng_zone.js:280
onHandleError @ ng_zone.js:259
Zone.runGuarded @ zone.js:113
_loop_1 @ zone.js:379
drainMicroTaskQueue @ zone.js:386
ZoneTask.invoke @ zone.js:308
2016-10-17 13:20:59.886 error_handler.js:54 Error: Uncaught (in promise): TypeError: r.create is not a function
at resolvePromise (zone.js:429)
at zone.js:406
at Object.onInvoke (ng_zone.js:238)
at Zone.run (zone.js:96)
at zone.js:462
at ZoneDelegate.invokeTask (zone.js:236)
at Object.onInvokeTask (ng_zone.js:229)
at ZoneDelegate.invokeTask (zone.js:235)
at Zone.runTask (zone.js:136)
at drainMicroTaskQueue (zone.js:368)
ErrorHandler.handleError @ error_handler.js:54
next @ application_ref.js:298
schedulerFn @ async.js:89
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:81
NgZone.triggerError @ ng_zone.js:280
onHandleError @ ng_zone.js:259
Zone.runGuarded @ zone.js:113
_loop_1 @ zone.js:379
drainMicroTaskQueue @ zone.js:386
ZoneTask.invoke @ zone.js:308
2016-10-17 13:20:59.887 zone.js:355 Unhandled Promise rejection: r.create is not a function ; Zone: angular ; Task: Promise.then ; Value: TypeError: r.create is not a function
at MapSubscriber.project (router_config_loader.js:46)
at MapSubscriber._next (map.js:77)
at MapSubscriber.Subscriber.next (Subscriber.js:89)
at MergeMapSubscriber.notifyNext (mergeMap.js:133)
at InnerSubscriber._next (InnerSubscriber.js:23)
at InnerSubscriber.Subscriber.next (Subscriber.js:89)
at Object.subscribeToResult (subscribeToResult.js:16)
at MergeMapSubscriber._innerSub (mergeMap.js:120)
at MergeMapSubscriber._tryNext (mergeMap.js:117)
at MergeMapSubscriber._next (mergeMap.js:100) TypeError: r.create is not a function
at MapSubscriber.project (http://localhost:4200/main.bundle.js:9952:25)
at MapSubscriber._next (http://localhost:4200/main.bundle.js:14417:35)
at MapSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:3004:18)
at MergeMapSubscriber.notifyNext (http://localhost:4200/main.bundle.js:10204:30)
at InnerSubscriber._next (http://localhost:4200/main.bundle.js:43255:21)
at InnerSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:3004:18)
at Object.subscribeToResult (http://localhost:4200/main.bundle.js:21714:25)
at MergeMapSubscriber._innerSub (http://localhost:4200/main.bundle.js:10191:38)
at MergeMapSubscriber._tryNext (http://localhost:4200/main.bundle.js:10188:14)
at MergeMapSubscriber._next (http://localhost:4200/main.bundle.js:10171:18)
consoleError @ zone.js:355
_loop_1 @ zone.js:382
drainMicroTaskQueue @ zone.js:386
ZoneTask.invoke @ zone.js:308
2016-10-17 13:20:59.888 zone.js:357 Error: Uncaught (in promise): TypeError: r.create is not a function
at resolvePromise (zone.js:429)
at zone.js:406
at Object.onInvoke (ng_zone.js:238)
at Zone.run (zone.js:96)
at zone.js:462
at ZoneDelegate.invokeTask (zone.js:236)
at Object.onInvokeTask (ng_zone.js:229)
at ZoneDelegate.invokeTask (zone.js:235)
at Zone.runTask (zone.js:136)
at drainMicroTaskQueue (zone.js:368)

Lazy Loading /lazy

If I then refresh, and click on the router link that goes to http://localhost:4200/lazy, again, the URL stays at http://localhost:4200/, and I get another error:

2016-10-17 13:22:45.339 error_handler.js:48 EXCEPTION: Uncaught (in promise): Error: Cannot find module './lazy/lazy.module.ngfactory'.
ErrorHandler.handleError @ error_handler.js:48
next @ application_ref.js:298
schedulerFn @ async.js:89
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:81
NgZone.triggerError @ ng_zone.js:280
onHandleError @ ng_zone.js:259
Zone.runGuarded @ zone.js:113
_loop_1 @ zone.js:379
drainMicroTaskQueue @ zone.js:386
ZoneTask.invoke @ zone.js:308
2016-10-17 13:22:45.340 error_handler.js:53 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:53
next @ application_ref.js:298
schedulerFn @ async.js:89
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:81
NgZone.triggerError @ ng_zone.js:280
onHandleError @ ng_zone.js:259
Zone.runGuarded @ zone.js:113
_loop_1 @ zone.js:379
drainMicroTaskQueue @ zone.js:386
ZoneTask.invoke @ zone.js:308
2016-10-17 13:22:45.340 error_handler.js:54 Error: Uncaught (in promise): Error: Cannot find module './lazy/lazy.module.ngfactory'.
at resolvePromise (zone.js:429)
at zone.js:406
at Object.onInvoke (ng_zone.js:238)
at Zone.run (zone.js:96)
at zone.js:462
at ZoneDelegate.invokeTask (zone.js:236)
at Object.onInvokeTask (ng_zone.js:229)
at ZoneDelegate.invokeTask (zone.js:235)
at Zone.runTask (zone.js:136)
at drainMicroTaskQueue (zone.js:368)
ErrorHandler.handleError @ error_handler.js:54
next @ application_ref.js:298
schedulerFn @ async.js:89
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:81
NgZone.triggerError @ ng_zone.js:280
onHandleError @ ng_zone.js:259
Zone.runGuarded @ zone.js:113
_loop_1 @ zone.js:379
drainMicroTaskQueue @ zone.js:386
ZoneTask.invoke @ zone.js:308
2016-10-17 13:22:45.340 zone.js:355 Unhandled Promise rejection: Cannot find module './lazy/lazy.module.ngfactory'. ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot find module './lazy/lazy.module.ngfactory'.
at webpackEmptyContext (src async:2)
at SystemJsNgModuleLoader.loadFactory (system_js_ng_module_factory_loader.js:61)
at RouterConfigLoader.loadModuleFactory (router_config_loader.js:53)
at RouterConfigLoader.load (router_config_loader.js:45)
at MergeMapSubscriber.project (apply_redirects.js:246)
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 ScalarObservable.Observable.subscribe (Observable.js:56) Error: Cannot find module './lazy/lazy.module.ngfactory'.
at webpackEmptyContext (http://localhost:4200/main.bundle.js:31955:8)
at SystemJsNgModuleLoader.loadFactory (http://localhost:4200/main.bundle.js:25415:40)
at RouterConfigLoader.loadModuleFactory (http://localhost:4200/main.bundle.js:9959:128)
at RouterConfigLoader.load (http://localhost:4200/main.bundle.js:9951:81)
at MergeMapSubscriber.project (http://localhost:4200/main.bundle.js:38688:111)
at MergeMapSubscriber._tryNext (http://localhost:4200/main.bundle.js:10181:27)
at MergeMapSubscriber._next (http://localhost:4200/main.bundle.js:10171:18)
at MergeMapSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:3004:18)
at ScalarObservable._subscribe (http://localhost:4200/main.bundle.js:30856:24)
at ScalarObservable.Observable.subscribe (http://localhost:4200/main.bundle.js:1018:27)
consoleError @ zone.js:355
_loop_1 @ zone.js:382
drainMicroTaskQueue @ zone.js:386
ZoneTask.invoke @ zone.js:308
2016-10-17 13:22:45.341 zone.js:357 Error: Uncaught (in promise): Error: Cannot find module './lazy/lazy.module.ngfactory'.
at resolvePromise (zone.js:429)
at zone.js:406
at Object.onInvoke (ng_zone.js:238)
at Zone.run (zone.js:96)
at zone.js:462
at ZoneDelegate.invokeTask (zone.js:236)
at Object.onInvokeTask (ng_zone.js:229)
at ZoneDelegate.invokeTask (zone.js:235)
at Zone.runTask (zone.js:136)
at drainMicroTaskQueue (zone.js:368)

Mention any other details that might be useful.

I tried commenting different pieces of the routing but always get some sort of error. Also tried upgrading all Angular packages including @angular/router, @angular/compiler, @angular/platform-server and zone.js and ts-helpers to latest with no luck getting a clean browser console output.


Thanks! We'll be in touch soon.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P1Impacts a large percentage of users; if a workaround exists it is partial or overly painfulneeds: investigationRequires some digging to determine if action is neededtype: bug/fix

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions