Skip to content

fix(core): destroy renderer when replacing styles during HMR#59514

Closed
crisbeto wants to merge 1 commit intoangular:mainfrom
crisbeto:hmr-renderer-destroy
Closed

fix(core): destroy renderer when replacing styles during HMR#59514
crisbeto wants to merge 1 commit intoangular:mainfrom
crisbeto:hmr-renderer-destroy

Conversation

@crisbeto
Copy link
Copy Markdown
Member

Currently when we swap out the component during HMR, we remove the renderer from the cache, but we never destroy it which means that its styles are still in the DOM. This can cause the old styles to leak into the component after they're replaced. These changes add a destroy call to ensure that they're removed.

Currently when we swap out the component during HMR, we remove the renderer from the cache, but we never destroy it which means that its styles are still in the DOM. This can cause the old styles to leak into the component after they're replaced. These changes add a `destroy` call to ensure that they're removed.
@crisbeto crisbeto added action: review The PR is still awaiting reviews from at least one requested reviewer target: patch This PR is targeted for the next patch release labels Jan 14, 2025
@angular-robot angular-robot bot added the area: core Issues related to the framework runtime label Jan 14, 2025
@ngbot ngbot bot added this to the Backlog milestone Jan 14, 2025
@crisbeto crisbeto requested a review from clydin January 14, 2025 09:15
@crisbeto crisbeto marked this pull request as ready for review January 14, 2025 09:15
* @param lView View to be recreated.
*/
function recreateLView(def: ComponentDef<unknown>, lView: LView<unknown>): void {
function recreateLView(
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change isn't strictly necessary for the fix, but I found it a bit hard to keep up with which def we're dealing with.

@crisbeto crisbeto added action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release and removed action: review The PR is still awaiting reviews from at least one requested reviewer target: patch This PR is targeted for the next patch release labels Jan 14, 2025
@kirjs
Copy link
Copy Markdown
Contributor

kirjs commented Jan 14, 2025

This PR was merged into the repository by commit 2ca2587.

The changes were merged into the following branches: main, 19.0.x, 19.1.x

kirjs pushed a commit that referenced this pull request Jan 14, 2025
Currently when we swap out the component during HMR, we remove the renderer from the cache, but we never destroy it which means that its styles are still in the DOM. This can cause the old styles to leak into the component after they're replaced. These changes add a `destroy` call to ensure that they're removed.

PR Close #59514
kirjs pushed a commit that referenced this pull request Jan 14, 2025
Currently when we swap out the component during HMR, we remove the renderer from the cache, but we never destroy it which means that its styles are still in the DOM. This can cause the old styles to leak into the component after they're replaced. These changes add a `destroy` call to ensure that they're removed.

PR Close #59514
@kirjs kirjs closed this in 2ca2587 Jan 14, 2025
crisbeto added a commit to crisbeto/angular that referenced this pull request Jan 16, 2025
Rolls back the changes from angular#59514 because they ended up being breaking in 1P. We can revisit the internal fix in a different way.

Fixes angular#59558.
pkozlowski-opensource pushed a commit that referenced this pull request Jan 16, 2025
Rolls back the changes from #59514 because they ended up being breaking in 1P. We can revisit the internal fix in a different way.

Fixes #59558.

PR Close #59557
pkozlowski-opensource pushed a commit that referenced this pull request Jan 16, 2025
Rolls back the changes from #59514 because they ended up being breaking in 1P. We can revisit the internal fix in a different way.

Fixes #59558.

PR Close #59557
crisbeto added a commit to crisbeto/angular that referenced this pull request Jan 16, 2025
These changes aim to resolve the issue that prompted angular#59514. The animations module is a bit tricky for HMR, because it schedules the destruction of its renderer after the currently-running animations are done. If there are no running animations, the renderer gets destroyed next time around. This is a problem, because it means that the styles can stay around for a long time.

These changes resolve the issue by:
1. Moving the cleanup of the renderer to after the destruction of the old view. This ensures that the usual clean up flow has been kicked off.
2. Flushing the animations when a component is replaced to ensure that the renderer is cleaned up in a timely manner.
AndrewKushnir pushed a commit that referenced this pull request Jan 16, 2025
#59574)

These changes aim to resolve the issue that prompted #59514. The animations module is a bit tricky for HMR, because it schedules the destruction of its renderer after the currently-running animations are done. If there are no running animations, the renderer gets destroyed next time around. This is a problem, because it means that the styles can stay around for a long time.

These changes resolve the issue by:
1. Moving the cleanup of the renderer to after the destruction of the old view. This ensures that the usual clean up flow has been kicked off.
2. Flushing the animations when a component is replaced to ensure that the renderer is cleaned up in a timely manner.

PR Close #59574
AndrewKushnir pushed a commit that referenced this pull request Jan 16, 2025
#59574)

These changes aim to resolve the issue that prompted #59514. The animations module is a bit tricky for HMR, because it schedules the destruction of its renderer after the currently-running animations are done. If there are no running animations, the renderer gets destroyed next time around. This is a problem, because it means that the styles can stay around for a long time.

These changes resolve the issue by:
1. Moving the cleanup of the renderer to after the destruction of the old view. This ensures that the usual clean up flow has been kicked off.
2. Flushing the animations when a component is replaced to ensure that the renderer is cleaned up in a timely manner.

PR Close #59574
PrajaktaB27 pushed a commit to PrajaktaB27/angular that referenced this pull request Feb 7, 2025
…#59514)

Currently when we swap out the component during HMR, we remove the renderer from the cache, but we never destroy it which means that its styles are still in the DOM. This can cause the old styles to leak into the component after they're replaced. These changes add a `destroy` call to ensure that they're removed.

PR Close angular#59514
PrajaktaB27 pushed a commit to PrajaktaB27/angular that referenced this pull request Feb 7, 2025
Rolls back the changes from angular#59514 because they ended up being breaking in 1P. We can revisit the internal fix in a different way.

Fixes angular#59558.

PR Close angular#59557
PrajaktaB27 pushed a commit to PrajaktaB27/angular that referenced this pull request Feb 7, 2025
angular#59574)

These changes aim to resolve the issue that prompted angular#59514. The animations module is a bit tricky for HMR, because it schedules the destruction of its renderer after the currently-running animations are done. If there are no running animations, the renderer gets destroyed next time around. This is a problem, because it means that the styles can stay around for a long time.

These changes resolve the issue by:
1. Moving the cleanup of the renderer to after the destruction of the old view. This ensures that the usual clean up flow has been kicked off.
2. Flushing the animations when a component is replaced to ensure that the renderer is cleaned up in a timely manner.

PR Close angular#59574
@angular-automatic-lock-bot
Copy link
Copy Markdown

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Feb 14, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker area: core Issues related to the framework runtime target: patch This PR is targeted for the next patch release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants