angular: Defer syntax doesn't create lazy chunks when component imported from a barrel

Which @angular/* package(s) are the source of the bug?


Is this a regression?



When using the new defer syntax with component imported from a barrel file (like a index.ts with re-exports) the expected lazy-loaded chunks are not created. Instead, the component is included in the main bundle, which contradicts the intended lazy loading behavior.

Steps to Reproduce

  • Create two components
  • Create index.ts file which re-exports them both
  • Import both components to the parent using index.ts file
  • Add both components to the imports section of parent component
  • Use both components in the template
  • Wrap one of them to defer block

Expected behavior

After the build process, the dist directory should contain a lazy-loaded chunk that includes the component wrapper to the defer block.

Actual Behavior

No lazy-loaded chunks are created. Both components is bundled in the main chunk.

Please provide a link to a minimal reproduction of the bug

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.0.0-rc.3
Node: 18.18.2
Package Manager: npm 9.7.2
OS: linux x64

Angular: 17.0.0-rc.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
@angular-devkit/architect       0.1700.0-rc.3
@angular-devkit/build-angular   17.0.0-rc.3
@angular-devkit/core            17.0.0-rc.3
@angular-devkit/schematics      17.0.0-rc.3
@angular/cli                    17.0.0-rc.3
@schematics/angular             17.0.0-rc.3
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else?

No response

About this issue

  • Original URL
  • State: open
  • Created 8 months ago
  • Reactions: 7
  • Comments: 18 (5 by maintainers)

Most upvoted comments

A huge issue is that with larger projects that use defer and lazy loading, its next to impossible to see why certain chunks are created and why other are merged. It would be good to get some tooling to help figure this out.

Ok, did some more testing, it works when the target component is standalone, didn’t know this was a requirement. 🤔 Funnily enough, simply wrapping my large component in a standalone component that is then used in defer fixes the problem completely (even if the large module inside the standalone component is imported using barrel).

No we didn’t.