Closed
Description
Versions
Angular CLI: 1.7.1
Node: 8.9.4
OS: win32 x64
Angular: 5.2.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cli: 1.7.1
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0
Repro steps
- Run
ng serveto start the application bundle - Create a new lazy module
- Modify the routes in the main module to do lazy load of the new module
Observed behavior
The lazy module cannot be loaded.
Stack
null: ERROR
null: Error: Uncaught (in promise): TypeError: __webpack_require__.e is not a function
message: "Uncaught (in promise): TypeError: __webpack_require__.e is not a function
TypeError: __webpack_require__.e is not a function
at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (http://localhost:4200/main.bundle.js:13:1), <anonymous>:11:29)
at SystemJsNgModuleLoader.loadAndCompile (webpack-internal:///./node_modules/@angular/core/esm5/core.js:6774:82)
at SystemJsNgModuleLoader.load (webpack-internal:///./node_modules/@angular/core/esm5/core.js:6758:60)
at RouterConfigLoader.loadModuleFactory (webpack-internal:///./node_modules/@angular/router/esm5/router.js:4626:122)
at RouterConfigLoader.load (webpack-internal:///./node_modules/@angular/router/esm5/router.js:4606:52)
at MergeMapSubscriber.eval [as project] (webpack-internal:///./node_modules/@angular/router/esm5/router.js:2098:115)
at MergeMapSubscriber._tryNext (webpack-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:133:27)
at MergeMapSubscriber._next (webpack-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:123:18)
at MergeMapSubscriber.Subscriber.next (webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:97:18)
at ScalarObservable._subscribe (webpack-internal:///./node_modules/rxjs/_esm5/observable/ScalarObservable.js:53:24)"
promise: ZoneAwarePromise {__zone_symbol__state: 0, __zone_symbol__value: TypeError: __webpack_require__.e is not a function…}
rejection: TypeError: __webpack_require__.e is not a function
stack: "Error: Uncaught (in promise): TypeError: __webpack_require__.e is not a function
TypeError: __webpack_require__.e is not a function
at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (http://localhost:4200/main.bundle.js:13:1), <anonymous>:11:29)
at SystemJsNgModuleLoader.loadAndCompile (webpack-internal:///./node_modules/@angular/core/esm5/core.js:6774:82)
at SystemJsNgModuleLoader.load (webpack-internal:///./node_modules/@angular/core/esm5/core.js:6758:60)
at RouterConfigLoader.loadModuleFactory (webpack-internal:///./node_modules/@angular/router/esm5/router.js:4626:122)
at RouterConfigLoader.load (webpack-internal:///./node_modules/@angular/router/esm5/router.js:4606:52)
at MergeMapSubscriber.eval [as project] (webpack-internal:///./node_modules/@angular/router/esm5/router.js:2098:115)
at MergeMapSubscriber._tryNext (webpack-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:133:27)
at MergeMapSubscriber._next (webpack-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:123:18)
at MergeMapSubscriber.Subscriber.next (webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:97:18)
at ScalarObservable._subscribe (webpack-internal:///./node_modules/rxjs/_esm5/observable/ScalarObservable.js:53:24)
at resolvePromise (webpack-internal:///./node_modules/zone.js/dist/zone.js:809:31)
at resolvePromise (webpack-internal:///./node_modules/zone.js/dist/zone.js:775:17)
at eval (webpack-internal:///./node_modules/zone.js/dist/zone.js:858:17)
at ZoneDelegate.invokeTask (webpack-internal:///./node_modules/zone.js/dist/zone.js:421:31)
at Object.onInvokeTask (webpack-internal:///./node_modules/@angular/core/esm5/core.js:4956:33)
at ZoneDelegate.invokeTask (webpack-internal:///./node_modules/zone.js/dist/zone.js:420:36)
at Zone.runTask (webpack-internal:///./node_modules/zone.js/dist/zone.js:188:47)
at drainMicroTaskQueue (webpack-internal:///./node_modules/zone.js/dist/zone.js:595:35)
at <anonymous>"
task: ZoneTask {_zone: Zone, runCount: 0, _zoneDelegates: null, …}
zone: Zone {_properties: Object, _parent: Zone, _name: "angular", …}
__proto__: Object {constructor: , name: "Error", message: "", …}
Desired behavior
The module should load without errors.
Mention any other details that might be useful (optional)
The real problem here, is that the cli does not catch up the module after the path is changed.
Current workarounds:
- Just reloading the cli makes the lazy loaded module to work again.
I haven't try every recommended workaround, but some of them are clearly not a option if you really want those modules to be lazy loaded. This is especially true for solutions like:
import { LazyModule } from 'lazy-module';Anything that makes the module to be bundle with the app, is not an acceptable workaround.
If you are having issues with a lazy loaded module, that is NOT about changing the route o creating another lazy loaded module into the path when the CLI is serving, then you should look a proper issue, or create a new one.