angular: Defer syntax doesn't create lazy chunks when component imported from a barrel
Which @angular/* package(s) are the source of the bug?
compiler
Is this a regression?
No
Description
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
https://github.com/mdafanasev/angular-defer-barrel-file-issue
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)
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.