Unable to lazy load modules and their dependencies when using barrel(s)

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request

Current behavior

We’re trying to lazy-load by cherry picking specific modules related to a particular route.

Example: Npm package: ui.common with LoginModule, RegisterModule and AdminModule in a flat esm5 index.js.

We want to lazy-load: /admin -> only AdminModule and its dependencies should be loaded /login -> only LoginModule and its dependencies should be loaded. /register -> only RegisterModule and its dependencies should be loaded.

The JS chunks are being generated as in the attached image below. (Refer to dist/)

What we’ve also noticed is when loading the last registered route, in this case register, it loads the required JS chunk. However when navigating to admin or login it loads the incorrect chunk with the following error Error: Cannot find ‘LoginModule’ in ‘./common/index’ (please refer to the image below).

Expected behavior

I expect that the necessary modules are lazy loaded for a specific route.

Minimal reproduction of the problem with instructions

GitHub Repo: https://github.com/Lydon/lazy-loading Navigate to admin or login, otherwise refer to the attached images.

Environment

Angular version: 5.2.X


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
- [x] All
 
For Tooling issues:
- Angular CLI 1.7.1
- Node version:  8.4.0
- Platform:  Windows

[filipesilva]

Heya, sorry for taking a while to answer. Yes this sounds like a bug in ngtools/webpack, as reported in https://github.com/angular/angular-cli/issues/9862. I think we’ve actually fixed it in master for 6.x, but will comment there.

[peterbakonyi05]

@alexeagle It happens using @ngtools/webpack with a custom Webpack configuration. So if it is CLI related, it is probably @ngtools/webpack