[Bug] cli needs to be reloaded when a lazy loaded module is added in routes (FIXED) #9825

michaeljota · 2018-02-28T21:57:17Z

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 serve to 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.

The text was updated successfully, but these errors were encountered:

seaBubble · 2018-03-01T23:02:04Z

I have the same issue

FirassKoubaa · 2018-03-02T08:58:50Z

+1

emanuelet · 2018-03-03T09:25:38Z

+1

ironstine · 2018-03-04T00:08:48Z

+1

Confirming that restarting 'ng serve' fixes the issue.

michaeljota · 2018-03-04T16:31:48Z

Update: This also happen when the lazy module throws an error in the first build.

ggarbereder · 2018-03-05T08:51:24Z

+1

matiasfessia · 2018-03-05T13:09:34Z

+1 same problem here!

FARHANE · 2018-03-05T13:32:40Z

+1

NEO97online · 2018-03-07T22:46:52Z

+1 same issue, restarting fixes it for me too

AianaM · 2018-03-08T05:16:42Z

+1

lowbit · 2018-03-08T10:00:33Z

+1

lishichao1002 · 2018-03-08T11:49:06Z

+1

GrmpyPmpkin · 2018-03-08T12:12:27Z

+1

denyo · 2018-03-08T13:40:33Z

Possible duplicate of #9488.

lazarohcm · 2018-03-08T15:23:59Z

+1

gsbraga · 2018-03-08T15:28:00Z

+1

andreihincu · 2018-03-08T23:20:26Z

+1

stanleyeosakul · 2018-03-09T01:59:09Z

+1; I fixed my issue with ng serve --aot

alexsantosfilho · 2018-03-09T18:09:22Z

+1

krunal-thakur · 2018-03-10T03:07:50Z

+1

smkart · 2018-03-10T12:38:04Z

Same issue here below is the error message I am getting

dkarski · 2018-03-11T06:58:02Z

I recomended change
{ path: 'user-panel', loadChildren: './user-panel/user-panel.module#UserPanelModule', },

to

{ path: 'user-panel', loadChildren: () => UserPanelModule, },

michaeljota · 2018-03-11T11:56:11Z

@dkarski does that work with AoT?

NEO97online · 2018-03-12T05:06:42Z

The above solution from @dkarski fixed this for me.

However, @michaeljota it doesnt work with AoT. You can't use function expressions in decorators as of now.

karol-depka · 2018-03-12T13:19:42Z

Czesc, @dkarski :).

Is this loadChildren: () => UserPanelModule gonna do proper lazy loading?
If so, whey is the loadChildren: './user-panel/user-panel.module#UserPanelModule' so widespread (any advantages?)

michaeljota · 2018-03-12T13:23:40Z

@karol-depka, that's not a solution, it's just a work around. The only real solution is to reload the CLI.

You only can use the string version for AoT. So if you aren't using AoT for anything, sure, you can do this. But, still, it is recommended to use the string version.

NEO97online · 2018-03-12T14:50:16Z

For some reason, the string version stopped working for me even after reloading the CLI. This happened after I updated to @angular/cli@1.7.3 from v1.6.5...

After downgrading to v1.6.5, the strings are working fine again (still needs reloading)

michaeljota · 2018-03-12T14:58:31Z

@hermbit Try to load the string from root.
loadChildren: 'app/feature/feature.module#FeatureModule'

Sometimes this works, something the other works. IDKW.

rkajbaf · 2018-06-29T15:25:27Z

Angular CLI: 6.0.8
Node: 8.11.3
OS: win32 x64
Angular: 6.0.7

Restarting ng serve --aot works for a while until a module is recompiled and some of my modules stop loading. I can't tell exactly what causes which module to stop working but any sort of build triggers this. I have to stop and start the build to get it working again.

Running as ng server --aot --prod works, but is slow.

Running as ng server --aot --prod --optimization=none works, and is quicker.

Running as ng server --aot --configuration=dev and adding this dev to your angular.json works best.

inside projects.<YOUR PROJECT>.architect.build.configurations

        "dev": {
          "optimization": false,
          "outputHashing": "all",
          "sourceMap": true,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": false,
          "vendorChunk": true,
          "buildOptimizer": false
        }

inside projects.<YOUR PROJECT>.architect.serve.configurations

        "dev": {
          "browserTarget": "mbnm:build:dev"
        }

I believe that this issue has to do with the way chunks are named. After a partial build, it's losing track of them.

Supamiu · 2018-07-06T07:40:12Z

It seems like this is a regression introduced somewhere in 1.7.0 (works with 1.7.0-rc.0), I didn't have the issue with cli@1.7.0-rc.0 and now I have it with cli@1.7.0.

speti43 · 2018-07-06T10:57:47Z

@sluglit Thanks, your solution is the true solution, works fine! Thanks!

naichenardi · 2018-07-19T14:16:54Z

@sluglit that works for me. Thanks

Woutwo · 2018-08-02T08:04:40Z

@sluglit you indeed have to make sure that AppRoutingModule is the last in line, that fixed my problems.

#9825 (comment)

RafaelFronteira · 2018-08-07T12:18:40Z

Hey @dkarski, can you explain this solution?
This worked for me, but I really did not understand how it works.

"{ path: 'user-panel', loadChildren: () => UserPanelModule, },"

I'm sorry if that's a silly question ...

Antoniossss · 2018-08-07T12:21:09Z

its because you just stoped lazy loading and it is loaded with rest of app wt., 7.08.2018, 14:19 użytkownik Rafael Fronteira <notifications@github.com> napisał:

…

Hey @dkarski <https://github.com/dkarski>, can you explain this solution? This worked for me, but I really did not understand how it works. "{ path: 'user-panel', loadChildren: () => UserPanelModule, }," I'm sorry if that's a silly question ... — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#9825 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHgz-_lDKjnwjHcQuUBdA0BIdNjAy6smks5uOYXGgaJpZM4SXaZz> .

RafaelFronteira · 2018-08-07T12:36:43Z

@Antoniossss thanks man, but have you found a solution without losing lazy loading?

speti43 · 2018-08-07T13:17:33Z

@RafaelFronteira That worked for me what @sluglit suggested:

Move the order of the imports. (Move the *RoutingModule to the bottom of the list of imports)
Remove the lazy-loaded modules from the NgModule.imports property list

The second one solved the problem for me.

And leave the lazy loading as it was:
loadChildren: 'app/dashboard/dashboard.module#DashboardModule'

And don't use AOT in dev build, it's just a workaround, but not a solution.

RafaelFronteira · 2018-08-07T14:18:55Z

@speti43 It worked for me too. Thanks a lot!

asmith2306 · 2018-08-12T14:42:54Z

@speti43

Remove the lazy-loaded modules from the NgModule.imports property list

This worked for me. loadChildren loads the module dynamically. No need to import the module in your app.module.

Cheers

phutaneVinayak · 2018-09-06T13:45:10Z

@speti43
thanks for tips work for me.

no need for ng-cli downgrade and AOT

wctiger · 2018-09-07T15:28:29Z

The workaround by @sluglit @speti43 also worked for me running CLI v6.1.0
Few things may worth mentioning.. I tried continue using a relative path in loadChildren after remove module imports in AppModule/AppRoutingModule as well as moved routing module down.
{ path: 'home', loadChildren: './modules/home/home.module#HomeModule' } -- this format worked

Also, if you're on Angular 6 and needs to use a absolute path you may want to try
{ path: 'home', loadChildren: 'src/app/modules/home/home.module#HomeModule' }
instead of only specify app at the beginning, which gave a compilation error in my case

dercilima · 2018-09-21T01:00:35Z

It worked for me:
angular/angular#23412 (comment)

angular/angular-cli#9825

shabinpshams · 2018-10-29T10:53:12Z

I recomended change
{ path: 'user-panel', loadChildren: './user-panel/user-panel.module#UserPanelModule', },

to

{ path: 'user-panel', loadChildren: () => UserPanelModule, },

It works for me. Thanks. Cheers!!!

speti43 · 2018-10-29T12:02:18Z

I recomended change
{ path: 'user-panel', loadChildren: './user-panel/user-panel.module#UserPanelModule', },
to
{ path: 'user-panel', loadChildren: () => UserPanelModule, },

It works for me. Thanks. Cheers!!!

Don't do that, prod build will fail, this is just a dirty workaround.
Correct solution is above.

alan-agius4 · 2018-12-07T11:41:37Z

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular CLI version. As this should have been also addressed in #12418

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

nickofthyme · 2019-01-15T15:10:19Z

I had this same issue but was not importing the lazy module in my app.module.ts nor did any of the other of the aforementioned suggested solutions resolve the error.

I was lazy loading a module that was using a custom angular component library. This library worked fine in ng5 but as soon as we upgraded to ng6, this error started occurring.

The fix was COMPLETELY unrelated to the error message, in fact, the error was terribly misleading and useless! We had to start stripping modules from our app ONE BY ONE to finally see what was causing the error to get some clue as to what the actual root cause was.

As it turns out in our custom library we were importing a few modules from an index.js (bucket) file which for whatever reason Angular compiler still can't figure out.

// This is BAD!
import { MyModule } from '../my-modules/index';

// This is GOOD?
import { MyModule } from '../my-modules/my.module';

Sounds like my case is rare given that most people were able to resolve their issue with the solutions listed above but I wanted to comment in hopes that this could help someone else.

michaeljota · 2019-02-20T15:06:02Z

Can confirm this issue is not longer reproducible. Thanks!

basantkumarpogeyan · 2019-04-14T09:55:15Z

I recomended change
{ path: 'user-panel', loadChildren: './user-panel/user-panel.module#UserPanelModule', },

to

{ path: 'user-panel', loadChildren: () => UserPanelModule, },

thanks @

speti43 · 2019-04-14T14:12:56Z

@basantkumarpogeyan bad idea, that will fail in prod build. That's just a workaround, not the solution.

angular-automatic-lock-bot · 2019-09-09T11:41:32Z

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

clydin added the comp: cli/serve label Mar 1, 2018

michaeljota mentioned this issue Mar 7, 2018

Lazy loading module #9880

Closed

tnicola mentioned this issue Jul 19, 2018

not able to use for multiple components tnicola/ngx-joyride#3

Closed

dkarski added a commit to applantic/lisboa-ui that referenced this issue Oct 17, 2018

resolved bug with webpack

15fe03a

angular/angular-cli#9825

var-bin added a commit to var-bin/ng-events that referenced this issue Nov 14, 2018

Fix lazyLoad feature angular/angular-cli#9825

38a77e1

alan-agius4 closed this as completed Dec 7, 2018

michaeljota changed the title ~~[Bug] cli needs to be reloaded when a lazy loaded module is added in routes~~ [Bug] cli needs to be reloaded when a lazy loaded module is added in routes (FIXED) Feb 20, 2019

danieldanielecki mentioned this issue Apr 3, 2019

Improve semantics of error message for incorrectly imported lazy loaded FeatureModule in AppModule #14065

Closed

greg-arroyo mentioned this issue Jul 22, 2019

TypeError: __webpack_require__.e is not a function SoCreate/angular-playground#142

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019

[Bug] cli needs to be reloaded when a lazy loaded module is added in routes (FIXED) #9825

[Bug] cli needs to be reloaded when a lazy loaded module is added in routes (FIXED) #9825

Comments

michaeljota commented Feb 28, 2018 • edited Loading

Versions

Repro steps

Observed behavior

Desired behavior

Mention any other details that might be useful (optional)

Current workarounds:

seaBubble commented Mar 1, 2018

FirassKoubaa commented Mar 2, 2018

emanuelet commented Mar 3, 2018

ironstine commented Mar 4, 2018

michaeljota commented Mar 4, 2018

ggarbereder commented Mar 5, 2018

matiasfessia commented Mar 5, 2018

FARHANE commented Mar 5, 2018

NEO97online commented Mar 7, 2018

AianaM commented Mar 8, 2018

lowbit commented Mar 8, 2018

lishichao1002 commented Mar 8, 2018

GrmpyPmpkin commented Mar 8, 2018

denyo commented Mar 8, 2018 • edited Loading

lazarohcm commented Mar 8, 2018

gsbraga commented Mar 8, 2018

andreihincu commented Mar 8, 2018

stanleyeosakul commented Mar 9, 2018 • edited Loading

alexsantosfilho commented Mar 9, 2018

krunal-thakur commented Mar 10, 2018

smkart commented Mar 10, 2018

dkarski commented Mar 11, 2018

michaeljota commented Mar 11, 2018

NEO97online commented Mar 12, 2018 • edited Loading

karol-depka commented Mar 12, 2018

michaeljota commented Mar 12, 2018

NEO97online commented Mar 12, 2018 • edited Loading

michaeljota commented Mar 12, 2018

rkajbaf commented Jun 29, 2018 • edited Loading

Supamiu commented Jul 6, 2018 • edited Loading

speti43 commented Jul 6, 2018

naichenardi commented Jul 19, 2018

Woutwo commented Aug 2, 2018

RafaelFronteira commented Aug 7, 2018

Antoniossss commented Aug 7, 2018 via email

RafaelFronteira commented Aug 7, 2018

speti43 commented Aug 7, 2018 • edited Loading

RafaelFronteira commented Aug 7, 2018

asmith2306 commented Aug 12, 2018

phutaneVinayak commented Sep 6, 2018

wctiger commented Sep 7, 2018 • edited Loading

dercilima commented Sep 21, 2018 • edited Loading

shabinpshams commented Oct 29, 2018

speti43 commented Oct 29, 2018

alan-agius4 commented Dec 7, 2018

nickofthyme commented Jan 15, 2019

michaeljota commented Feb 20, 2019

basantkumarpogeyan commented Apr 14, 2019

speti43 commented Apr 14, 2019

angular-automatic-lock-bot bot commented Sep 9, 2019

michaeljota commented Feb 28, 2018 •

edited

Loading

denyo commented Mar 8, 2018 •

edited

Loading

stanleyeosakul commented Mar 9, 2018 •

edited

Loading

NEO97online commented Mar 12, 2018 •

edited

Loading

NEO97online commented Mar 12, 2018 •

edited

Loading

rkajbaf commented Jun 29, 2018 •

edited

Loading

Supamiu commented Jul 6, 2018 •

edited

Loading

speti43 commented Aug 7, 2018 •

edited

Loading

wctiger commented Sep 7, 2018 •

edited

Loading

dercilima commented Sep 21, 2018 •

edited

Loading