René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Routing not working with AoT","articleBody":"\u003e ## Please provide us with the following information:\n### OS?\n\n\u003e Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)\n\nmacOS Sierra\n### Versions.\n\n\u003e Please run `ng --version`. If there's nothing outputted, please run in a Terminal: `node --version` and paste the result here:\n\nTried final beta-17 and current master\n\nangular-cli: local (v1.0.0-beta.17, branch: master)\nnode: 6.7.0\nos: darwin x64\n### Repro steps.\n\n\u003e Was this an app that wasn't created using the CLI? What change did you do on your code? etc.\n\nCreate a new project that has routes looking like this:\n\napp-routing:\n\n``` typescript\nimport {SimpleRouteComponent} from './simple-route/simple-route.component';\nimport {BundledModule} from './bundled/bundled.module';\n\nexport function loadBundledModule() { return BundledModule; }\n\nexport const routes: Routes = [\n  {\n    path: '',\n    pathMatch: 'full',\n    component: SimpleRouteComponent\n  },\n  {\n    path: 'bundled',\n    loadChildren: loadBundledModule\n  },\n  {\n    path: 'lazy',\n    loadChildren: './lazy/lazy.module#LazyModule'\n  }\n];\n```\n\nbundled-routing:\n\n``` typescript\nexport const routes: Routes = [\n  {\n    path: '',\n    component: BundledComponent\n  }\n];\n```\n\nlazy-routing:\n\n``` typescript\nexport const routes: Routes = [\n  {\n    path: '',\n    component: LazyComponent\n  }\n];\n```\n\nFull repository sample:\nhttps://github.com/meligy/routing-angular-cli\n### The log given by the failure.\n\n\u003e Normally this include a stack trace and some more information.\n\nFirst, I run `ng build --aot`, and it shows successful output.\n\nThen, I run `ng serve --aot`, and it also shows successful output.\n#### Loading `/`\n\nBut 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:\n\n```\nchrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:34621 Uncaught TypeError: Cannot read property 'get' of null\n    at bind (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:34621:32)\n    at Array.forEach (native)\n    at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:34637:34\n    at checkDebug (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:34633:10)\n    at Object.\u003canonymous\u003e (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:34636:2)\n    at Object.\u003canonymous\u003e (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:34812:31)\n    at __webpack_require__ (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:20:30)\n    at Object.\u003canonymous\u003e (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:47:19)\n    at __webpack_require__ (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:20:30)\n    at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:40:18\n```\n#### Synchronous Loading (Same bundle) `/bundled`\n\nIf 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:\n\n```\n2016-10-17 13:20:59.886 error_handler.js:48 EXCEPTION: Uncaught (in promise): TypeError: r.create is not a function\nErrorHandler.handleError @ error_handler.js:48\nnext @ application_ref.js:298\nschedulerFn @ async.js:89\nSafeSubscriber.__tryOrUnsub @ Subscriber.js:223\nSafeSubscriber.next @ Subscriber.js:172\nSubscriber._next @ Subscriber.js:125\nSubscriber.next @ Subscriber.js:89\nSubject.next @ Subject.js:55\nEventEmitter.emit @ async.js:81\nNgZone.triggerError @ ng_zone.js:280\nonHandleError @ ng_zone.js:259\nZone.runGuarded @ zone.js:113\n_loop_1 @ zone.js:379\ndrainMicroTaskQueue @ zone.js:386\nZoneTask.invoke @ zone.js:308\n2016-10-17 13:20:59.886 error_handler.js:53 ORIGINAL STACKTRACE:\nErrorHandler.handleError @ error_handler.js:53\nnext @ application_ref.js:298\nschedulerFn @ async.js:89\nSafeSubscriber.__tryOrUnsub @ Subscriber.js:223\nSafeSubscriber.next @ Subscriber.js:172\nSubscriber._next @ Subscriber.js:125\nSubscriber.next @ Subscriber.js:89\nSubject.next @ Subject.js:55\nEventEmitter.emit @ async.js:81\nNgZone.triggerError @ ng_zone.js:280\nonHandleError @ ng_zone.js:259\nZone.runGuarded @ zone.js:113\n_loop_1 @ zone.js:379\ndrainMicroTaskQueue @ zone.js:386\nZoneTask.invoke @ zone.js:308\n2016-10-17 13:20:59.886 error_handler.js:54 Error: Uncaught (in promise): TypeError: r.create is not a function\n    at resolvePromise (zone.js:429)\n    at zone.js:406\n    at Object.onInvoke (ng_zone.js:238)\n    at Zone.run (zone.js:96)\n    at zone.js:462\n    at ZoneDelegate.invokeTask (zone.js:236)\n    at Object.onInvokeTask (ng_zone.js:229)\n    at ZoneDelegate.invokeTask (zone.js:235)\n    at Zone.runTask (zone.js:136)\n    at drainMicroTaskQueue (zone.js:368)\nErrorHandler.handleError @ error_handler.js:54\nnext @ application_ref.js:298\nschedulerFn @ async.js:89\nSafeSubscriber.__tryOrUnsub @ Subscriber.js:223\nSafeSubscriber.next @ Subscriber.js:172\nSubscriber._next @ Subscriber.js:125\nSubscriber.next @ Subscriber.js:89\nSubject.next @ Subject.js:55\nEventEmitter.emit @ async.js:81\nNgZone.triggerError @ ng_zone.js:280\nonHandleError @ ng_zone.js:259\nZone.runGuarded @ zone.js:113\n_loop_1 @ zone.js:379\ndrainMicroTaskQueue @ zone.js:386\nZoneTask.invoke @ zone.js:308\n2016-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\n    at MapSubscriber.project (router_config_loader.js:46)\n    at MapSubscriber._next (map.js:77)\n    at MapSubscriber.Subscriber.next (Subscriber.js:89)\n    at MergeMapSubscriber.notifyNext (mergeMap.js:133)\n    at InnerSubscriber._next (InnerSubscriber.js:23)\n    at InnerSubscriber.Subscriber.next (Subscriber.js:89)\n    at Object.subscribeToResult (subscribeToResult.js:16)\n    at MergeMapSubscriber._innerSub (mergeMap.js:120)\n    at MergeMapSubscriber._tryNext (mergeMap.js:117)\n    at MergeMapSubscriber._next (mergeMap.js:100) TypeError: r.create is not a function\n    at MapSubscriber.project (http://localhost:4200/main.bundle.js:9952:25)\n    at MapSubscriber._next (http://localhost:4200/main.bundle.js:14417:35)\n    at MapSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:3004:18)\n    at MergeMapSubscriber.notifyNext (http://localhost:4200/main.bundle.js:10204:30)\n    at InnerSubscriber._next (http://localhost:4200/main.bundle.js:43255:21)\n    at InnerSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:3004:18)\n    at Object.subscribeToResult (http://localhost:4200/main.bundle.js:21714:25)\n    at MergeMapSubscriber._innerSub (http://localhost:4200/main.bundle.js:10191:38)\n    at MergeMapSubscriber._tryNext (http://localhost:4200/main.bundle.js:10188:14)\n    at MergeMapSubscriber._next (http://localhost:4200/main.bundle.js:10171:18)\nconsoleError @ zone.js:355\n_loop_1 @ zone.js:382\ndrainMicroTaskQueue @ zone.js:386\nZoneTask.invoke @ zone.js:308\n2016-10-17 13:20:59.888 zone.js:357 Error: Uncaught (in promise): TypeError: r.create is not a function\n    at resolvePromise (zone.js:429)\n    at zone.js:406\n    at Object.onInvoke (ng_zone.js:238)\n    at Zone.run (zone.js:96)\n    at zone.js:462\n    at ZoneDelegate.invokeTask (zone.js:236)\n    at Object.onInvokeTask (ng_zone.js:229)\n    at ZoneDelegate.invokeTask (zone.js:235)\n    at Zone.runTask (zone.js:136)\n    at drainMicroTaskQueue (zone.js:368)\n```\n#### Lazy Loading `/lazy`\n\nIf 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:\n\n```\n2016-10-17 13:22:45.339 error_handler.js:48 EXCEPTION: Uncaught (in promise): Error: Cannot find module './lazy/lazy.module.ngfactory'.\nErrorHandler.handleError @ error_handler.js:48\nnext @ application_ref.js:298\nschedulerFn @ async.js:89\nSafeSubscriber.__tryOrUnsub @ Subscriber.js:223\nSafeSubscriber.next @ Subscriber.js:172\nSubscriber._next @ Subscriber.js:125\nSubscriber.next @ Subscriber.js:89\nSubject.next @ Subject.js:55\nEventEmitter.emit @ async.js:81\nNgZone.triggerError @ ng_zone.js:280\nonHandleError @ ng_zone.js:259\nZone.runGuarded @ zone.js:113\n_loop_1 @ zone.js:379\ndrainMicroTaskQueue @ zone.js:386\nZoneTask.invoke @ zone.js:308\n2016-10-17 13:22:45.340 error_handler.js:53 ORIGINAL STACKTRACE:\nErrorHandler.handleError @ error_handler.js:53\nnext @ application_ref.js:298\nschedulerFn @ async.js:89\nSafeSubscriber.__tryOrUnsub @ Subscriber.js:223\nSafeSubscriber.next @ Subscriber.js:172\nSubscriber._next @ Subscriber.js:125\nSubscriber.next @ Subscriber.js:89\nSubject.next @ Subject.js:55\nEventEmitter.emit @ async.js:81\nNgZone.triggerError @ ng_zone.js:280\nonHandleError @ ng_zone.js:259\nZone.runGuarded @ zone.js:113\n_loop_1 @ zone.js:379\ndrainMicroTaskQueue @ zone.js:386\nZoneTask.invoke @ zone.js:308\n2016-10-17 13:22:45.340 error_handler.js:54 Error: Uncaught (in promise): Error: Cannot find module './lazy/lazy.module.ngfactory'.\n    at resolvePromise (zone.js:429)\n    at zone.js:406\n    at Object.onInvoke (ng_zone.js:238)\n    at Zone.run (zone.js:96)\n    at zone.js:462\n    at ZoneDelegate.invokeTask (zone.js:236)\n    at Object.onInvokeTask (ng_zone.js:229)\n    at ZoneDelegate.invokeTask (zone.js:235)\n    at Zone.runTask (zone.js:136)\n    at drainMicroTaskQueue (zone.js:368)\nErrorHandler.handleError @ error_handler.js:54\nnext @ application_ref.js:298\nschedulerFn @ async.js:89\nSafeSubscriber.__tryOrUnsub @ Subscriber.js:223\nSafeSubscriber.next @ Subscriber.js:172\nSubscriber._next @ Subscriber.js:125\nSubscriber.next @ Subscriber.js:89\nSubject.next @ Subject.js:55\nEventEmitter.emit @ async.js:81\nNgZone.triggerError @ ng_zone.js:280\nonHandleError @ ng_zone.js:259\nZone.runGuarded @ zone.js:113\n_loop_1 @ zone.js:379\ndrainMicroTaskQueue @ zone.js:386\nZoneTask.invoke @ zone.js:308\n2016-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'.\n    at webpackEmptyContext (src async:2)\n    at SystemJsNgModuleLoader.loadFactory (system_js_ng_module_factory_loader.js:61)\n    at RouterConfigLoader.loadModuleFactory (router_config_loader.js:53)\n    at RouterConfigLoader.load (router_config_loader.js:45)\n    at MergeMapSubscriber.project (apply_redirects.js:246)\n    at MergeMapSubscriber._tryNext (mergeMap.js:110)\n    at MergeMapSubscriber._next (mergeMap.js:100)\n    at MergeMapSubscriber.Subscriber.next (Subscriber.js:89)\n    at ScalarObservable._subscribe (ScalarObservable.js:49)\n    at ScalarObservable.Observable.subscribe (Observable.js:56) Error: Cannot find module './lazy/lazy.module.ngfactory'.\n    at webpackEmptyContext (http://localhost:4200/main.bundle.js:31955:8)\n    at SystemJsNgModuleLoader.loadFactory (http://localhost:4200/main.bundle.js:25415:40)\n    at RouterConfigLoader.loadModuleFactory (http://localhost:4200/main.bundle.js:9959:128)\n    at RouterConfigLoader.load (http://localhost:4200/main.bundle.js:9951:81)\n    at MergeMapSubscriber.project (http://localhost:4200/main.bundle.js:38688:111)\n    at MergeMapSubscriber._tryNext (http://localhost:4200/main.bundle.js:10181:27)\n    at MergeMapSubscriber._next (http://localhost:4200/main.bundle.js:10171:18)\n    at MergeMapSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:3004:18)\n    at ScalarObservable._subscribe (http://localhost:4200/main.bundle.js:30856:24)\n    at ScalarObservable.Observable.subscribe (http://localhost:4200/main.bundle.js:1018:27)\nconsoleError @ zone.js:355\n_loop_1 @ zone.js:382\ndrainMicroTaskQueue @ zone.js:386\nZoneTask.invoke @ zone.js:308\n2016-10-17 13:22:45.341 zone.js:357 Error: Uncaught (in promise): Error: Cannot find module './lazy/lazy.module.ngfactory'.\n    at resolvePromise (zone.js:429)\n    at zone.js:406\n    at Object.onInvoke (ng_zone.js:238)\n    at Zone.run (zone.js:96)\n    at zone.js:462\n    at ZoneDelegate.invokeTask (zone.js:236)\n    at Object.onInvokeTask (ng_zone.js:229)\n    at ZoneDelegate.invokeTask (zone.js:235)\n    at Zone.runTask (zone.js:136)\n    at drainMicroTaskQueue (zone.js:368)\n```\n### Mention any other details that might be useful.\n\nI 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.\n\n\u003e ---\n\u003e \n\u003e Thanks! We'll be in touch soon.\n","author":{"url":"https://github.com/Meligy","@type":"Person","name":"Meligy"},"datePublished":"2016-10-17T02:27:11.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":12},"url":"https://github.com/2735/angular-cli/issues/2735"}