Runtime error "Cannot find module ...ngfactory" for lazy module with @ngtools/webpack 1.3.3 #6518

GiuseppePiscopo · 2017-05-31T09:17:11Z

Bug Report or Feature Request (mark with an `x`)

- [x] bug report -> please search issues before submitting
- [ ] feature request

#4637 has been closed due to changed version, and it is suggested to open a new issue for the currently available version.
#6443 at some point shows this error in a log, but I don't think it is really related.

Versions.

Output from: ng --version. ng is not installed in this project. @ngtools/webpack is.
output from: node --version: v6.2.2
npm --version: 3.9.5
OS: Windows 10 version 1703, as well as Mac OS Sierra
angular 4.1.3,
@ngtools/webpack 1.3.3,
webpack 2.5.1,
typescript 2.3.2,
tslib 1.7.1

Repro steps.

There's a mini sample project showing the issue.

Clone repository https://github.com/BrainCrumbz/ngtools-webpack-demo and change dir
npm i
npm run build-prod
npm run serve
browse to http://localhost:3000
open developer console
click on link to private area

The log given by the failure.

ERROR Error: Uncaught (in promise): Error: Cannot find module '../private/module.ngfactory'.
Error: Cannot find module '../private/module.ngfactory'.
at webpackEmptyContext (src async:2)
at SystemJsNgModuleLoader.loadFactory (core.es5.js:5915)
at SystemJsNgModuleLoader.load (core.es5.js:5887)
at RouterConfigLoader.loadModuleFactory (router.es5.js:3334)
at RouterConfigLoader.load (router.es5.js:3318)
at MergeMapSubscriber.project (router.es5.js:1565)
at MergeMapSubscriber._tryNext (mergeMap.js:120)
at MergeMapSubscriber._next (mergeMap.js:110)
at MergeMapSubscriber.Subscriber.next (Subscriber.js:89)
at ScalarObservable._subscribe (ScalarObservable.js:49)
at webpackEmptyContext (src async:2)
at SystemJsNgModuleLoader.loadFactory (core.es5.js:5915)
at SystemJsNgModuleLoader.load (core.es5.js:5887)
at RouterConfigLoader.loadModuleFactory (router.es5.js:3334)
at RouterConfigLoader.load (router.es5.js:3318)
at MergeMapSubscriber.project (router.es5.js:1565)
at MergeMapSubscriber._tryNext (mergeMap.js:120)
at MergeMapSubscriber._next (mergeMap.js:110)
at MergeMapSubscriber.Subscriber.next (Subscriber.js:89)
at ScalarObservable._subscribe (ScalarObservable.js:49)
at c (zone.min.js:1)
at c (zone.min.js:1)
at zone.min.js:1
at e.invokeTask (zone.min.js:1)
at Object.onInvokeTask (core.es5.js:4140)
at e.invokeTask (zone.min.js:1)
at r.runTask (zone.min.js:1)
at o (zone.min.js:1)
at HTMLAnchorElement.invoke (zone.min.js:1)

NOTE: UglifyJs has been temporarily disabled in production build, to have a clearer stacktrace. Problem shows up also with UglifyJs applied, showing this stacktrace:

ERROR Error: Uncaught (in promise): Error: Cannot find module '../private/module.ngfactory'.
Error: Cannot find module '../private/module.ngfactory'.
at e (main-bundle.js:1)
at t.loadFactory (vendor-bundle.js:162)
at t.load (vendor-bundle.js:162)
at t.loadModuleFactory (vendor-bundle.js:415)
at t.load (vendor-bundle.js:415)
at e.project (vendor-bundle.js:415)
at e._tryNext (vendor-bundle.js:436)
at e._next (vendor-bundle.js:436)
at e.next (vendor-bundle.js:1)
at e._subscribe (vendor-bundle.js:436)
at e (main-bundle.js:1)
at t.loadFactory (vendor-bundle.js:162)
at t.load (vendor-bundle.js:162)
at t.loadModuleFactory (vendor-bundle.js:415)
at t.load (vendor-bundle.js:415)
at e.project (vendor-bundle.js:415)
at e._tryNext (vendor-bundle.js:436)
at e._next (vendor-bundle.js:436)
at e.next (vendor-bundle.js:1)
at e._subscribe (vendor-bundle.js:436)
at u (vendor-bundle.js:662)
at u (vendor-bundle.js:662)
at vendor-bundle.js:662
at t.invokeTask (vendor-bundle.js:662)
at Object.onInvokeTask (vendor-bundle.js:148)
at t.invokeTask (vendor-bundle.js:662)
at r.runTask (vendor-bundle.js:662)
at o (vendor-bundle.js:662)
at HTMLAnchorElement.invoke (vendor-bundle.js:662)

Desired functionality.

When clicking on link to lazy loaded module, page should show correctly.

Mention any other details that might be useful.

Somewhat differently than other projects, in this one module files are all named module.ts (and of course placed in their own whatever directory), instead of being whatever.module.ts.
This project uses tslib, Microsoft Runtime library for TypeScript helpers, together with noEmitHelpers and importHelpers flags as suggested in this post
After a development build, the JS chunk for lazy loaded module is correctly found in output directory: dist/js/0-chunk.js, as well as its sourcemap. After a production build instead, only sourcemap is found, no JS.
As said, a demo project is available at https://github.com/BrainCrumbz/ngtools-webpack-demo.

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

sumitarora · 2017-05-31T13:55:00Z

Duplicate of #4431 Issue with ContextReplacementPlugin being tracked there.

GiuseppePiscopo · 2017-05-31T14:05:37Z

@sumitarora I tried in the past removing that plugin, it does not make any effect.

GiuseppePiscopo · 2017-05-31T14:06:16Z

Please consider reopening this issue, it might hide other problems

hheexx · 2017-05-31T14:09:38Z

May not be duplicate as in this bug chunks are created.
With ContextReplacementPlugin chunks are not created.

sumitarora · 2017-05-31T14:13:54Z

@hheexx I checked after commenting the ContextReplacementPlugin chunks were created perfectly fine and I was able to run the application fine.

@GiuseppePiscopo Can you check comment the plugin in prod config and on running build I get this output?

                  Asset      Size  Chunks                    Chunk Names
          js/0-chunk.js   11.6 kB       0  [emitted]
      js/main-bundle.js    185 kB       1  [emitted]         main
    js/vendor-bundle.js   1.77 MB       2  [emitted]  [big]  vendor
    css/main-bundle.css   1.38 kB       1  [emitted]         main
      js/0-chunk.js.map   12.8 kB       0  [emitted]
  js/main-bundle.js.map    253 kB       1  [emitted]         main
css/main-bundle.css.map  96 bytes       1  [emitted]         main
js/vendor-bundle.js.map   2.17 MB       2  [emitted]         vendor
             index.html   1.32 kB          [emitted]
     images/favicon.ico     32 kB          [emitted]

GiuseppePiscopo · 2017-05-31T14:33:50Z

@sumitarora you are right. Not sure what has changed, as in previous iterations of that sample project I did try commenting out that plugin, having read about that issue already, and it did not help.

I can confirm that the lazy module chunk gets built:

          js/0-chunk.js   11.5 kB       0  [emitted]
      js/main-bundle.js    187 kB       1  [emitted]         main
    js/vendor-bundle.js   1.77 MB       2  [emitted]  [big]  vendor
    css/main-bundle.css   1.45 kB       1  [emitted]         main
      js/0-chunk.js.map   12.7 kB       0  [emitted]
  js/main-bundle.js.map    255 kB       1  [emitted]         main
css/main-bundle.css.map  96 bytes       1  [emitted]         main
js/vendor-bundle.js.map   2.17 MB       2  [emitted]         vendor
             index.html   1.35 kB          [emitted]
     images\favicon.ico     32 kB          [emitted]

~~I will subscribe to that issue so.~~ I'm already subscribed to that issue so I'll keep on following that

See: * angular/angular-cli#6518 * angular/angular-cli#4431

angular-automatic-lock-bot · 2019-09-07T05:40:47Z

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

sumitarora added needs: investigation Requires some digging to determine if action is needed type: bug/fix labels May 31, 2017

sumitarora closed this as completed May 31, 2017

sumitarora reopened this May 31, 2017

GiuseppePiscopo closed this as completed May 31, 2017

GiuseppePiscopo mentioned this issue May 31, 2017

Using @ngtools/webpack with ContextReplacementPlugin plugin does not create lazy routes chunks #4431

Closed

BrainCrumbz mentioned this issue Jun 1, 2017

Lazy loading not working BrainCrumbz/ngtools-webpack-demo#1

Closed

GiuseppePiscopo added a commit to BrainCrumbz/ngtools-webpack-demo that referenced this issue Jun 1, 2017

fix(tools): add workaround to error Cannot find module.ngfactory

68e06e9

See: * angular/angular-cli#6518 * angular/angular-cli#4431

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Runtime error "Cannot find module ...ngfactory" for lazy module with @ngtools/webpack 1.3.3 #6518

Runtime error "Cannot find module ...ngfactory" for lazy module with @ngtools/webpack 1.3.3 #6518

GiuseppePiscopo commented May 31, 2017 •

edited

Loading

sumitarora commented May 31, 2017 •

edited

Loading

GiuseppePiscopo commented May 31, 2017

GiuseppePiscopo commented May 31, 2017

hheexx commented May 31, 2017

sumitarora commented May 31, 2017 •

edited

Loading

GiuseppePiscopo commented May 31, 2017

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

Runtime error "Cannot find module ...ngfactory" for lazy module with @ngtools/webpack 1.3.3 #6518

Runtime error "Cannot find module ...ngfactory" for lazy module with @ngtools/webpack 1.3.3 #6518

Comments

GiuseppePiscopo commented May 31, 2017 • edited Loading

Bug Report or Feature Request (mark with an x)

Versions.

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

sumitarora commented May 31, 2017 • edited Loading

GiuseppePiscopo commented May 31, 2017

GiuseppePiscopo commented May 31, 2017

hheexx commented May 31, 2017

sumitarora commented May 31, 2017 • edited Loading

GiuseppePiscopo commented May 31, 2017

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

GiuseppePiscopo commented May 31, 2017 •

edited

Loading

Bug Report or Feature Request (mark with an `x`)

sumitarora commented May 31, 2017 •

edited

Loading

sumitarora commented May 31, 2017 •

edited

Loading