angular / angular

Deliver web apps with confidence 🚀
https://angular.dev
MIT License
96.33k stars 25.55k forks source link

docs: @defer requires the parent component also be standalone #55381

Open andy-bond opened 7 months ago

andy-bond commented 7 months ago

Describe the problem that you experienced

When attempting to use @defer I found myself confused after reading the documentation: https://angular.dev/guide/defer#which-dependencies-are-defer-loadable

I had made my "target" component standalone: true and the only reference to it was inside that @defer block in the "parent" component.

I was confused as to why I wasn't seeing a bundle being generated for the component I deferred. I was given a hint by someone on my team that the parent also has to be standalone for it to @defer correctly!

I don't think the documentation is very clear that not only does the "target" component need to be standalone, but also the parent must be standalone.

Enter the URL of the topic with the problem

Describe what you were looking for in the documentation

Clear reasons why a chunk I expected to be @defered wasn't being split off.

Describe the actions that led you to experience the problem

Describe what you want to experience that would fix the problem

I would definitely like more clear documentation on what the requirements are to @defer a component.

Additionally, I think it would be helpful to potentially have a console warning (in dev mode) to indicate why something in an @defer block is not being split. This would be nice, but not a requirement :)

Add a screenshot if that helps illustrate the problem

Stackblitz example: https://stackblitz.com/edit/stackblitz-starters-kzxukv?file=package.json

If this problem caused an exception or error, please paste it here

No response

If the problem is browser-specific, please specify the device, OS, browser, and version

No response

Provide any additional information here in as much as detail as you can

No response

mposeir commented 3 months ago

The documentation found here https://angular.dev/guide/defer#behavior-with-ngmodule is also very confusing as the sub-standalone-component will not be split into separate bundle if the parent is declared in a @NgModule.

rubencfu commented 1 month ago

Bumping this... I had a standalone component with deferrable views that stoped working when I switched to NgModule.

The reason I switched to NgModule is because I have child routes pointing to the same component (example -> game-jam/:url and game-jam/:url/submissions) and with standalone component, route reusing has some issues and normal routing is refreshing the whole component creating a flicker (This only happens if you are using same component for child routes and with modules does not happen)

It would be nice for NgModule parent to hold deferrable views!