fix(platform-browser): styles not replaced during HMR when using animations renderer (#59393)

crisbeto · thePunderWoman · commit 0e23f20c4117 · 2025-01-07T15:55:38.000Z
When we replace a component during HMR, we clear it from the cache of the renderer factory, however when using animations, there's an animation-specific renderer factory that wraps the base DOM one and was preventing the cache from being cleared. These changes rework the logic that clear the cache to go through a method so we can forward the call to the delegated factory. PR Close #59393
diff --git a/goldens/size-tracking/integration-payloads.json b/goldens/size-tracking/integration-payloads.json
@@ -47,7 +47,7 @@
   },
   "defer": {
     "uncompressed": {
-      "main": 12094,
+      "main": 12709,
       "polyfills": 33807,
       "defer.component": 345
     }
diff --git a/packages/animations/browser/src/render/animation_renderer.ts b/packages/animations/browser/src/render/animation_renderer.ts
@@ -132,4 +132,12 @@ export class AnimationRendererFactory implements RendererFactory2 {
   whenRenderingDone(): Promise<any> {
     return this.engine.whenRenderingDone();
   }
+
+  /**
+   * Used during HMR to clear any cached data about a component.
+   * @param componentId ID of the component that is being replaced.
+   */
+  protected componentReplaced(componentId: string) {
+    (this.delegate as {componentReplaced?: (id: string) => void}).componentReplaced?.(componentId);
+  }
 }
diff --git a/packages/core/src/render3/hmr.ts b/packages/core/src/render3/hmr.ts
@@ -124,8 +124,9 @@ function recreateMatchingLViews(def: ComponentDef<unknown>, rootLView: LView): v
  */
 function clearRendererCache(factory: RendererFactory, def: ComponentDef<unknown>) {
   // Cast to read a private field.
-  // NOTE: This must be kept synchronized with the renderer factory implementation in platform-browser.
-  (factory as {rendererByCompId?: Map<string, unknown>}).rendererByCompId?.delete(def.id);
+  // NOTE: This must be kept synchronized with the renderer factory implementation in
+  // platform-browser and platform-browser/animations.
+  (factory as {componentReplaced?: (id: string) => void}).componentReplaced?.(def.id);
 }
 
 /**
diff --git a/packages/platform-browser/src/dom/dom_renderer.ts b/packages/platform-browser/src/dom/dom_renderer.ts
@@ -195,6 +195,14 @@ export class DomRendererFactory2 implements RendererFactory2, OnDestroy {
   ngOnDestroy() {
     this.rendererByCompId.clear();
   }
+
+  /**
+   * Used during HMR to clear any cached data about a component.
+   * @param componentId ID of the component that is being replaced.
+   */
+  protected componentReplaced(componentId: string) {
+    this.rendererByCompId.delete(componentId);
+  }
 }
 
 class DefaultDomRenderer2 implements Renderer2 {

Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,7 @@`
`47`	`47`	`},`
`48`	`48`	`"defer": {`
`49`	`49`	`"uncompressed": {`
`50`		`- "main": 12094,`
	`50`	`+ "main": 12709,`
`51`	`51`	`"polyfills": 33807,`
`52`	`52`	`"defer.component": 345`
`53`	`53`	`}`
Original file line number	Diff line number	Diff line change
`@@ -132,4 +132,12 @@ export class AnimationRendererFactory implements RendererFactory2 {`
`132`	`132`	`whenRenderingDone(): Promise<any> {`
`133`	`133`	`return this.engine.whenRenderingDone();`
`134`	`134`	`}`
	`135`	`+`
	`136`	`+ /**`
	`137`	`+ * Used during HMR to clear any cached data about a component.`
	`138`	`+ * @param componentId ID of the component that is being replaced.`
	`139`	`+ */`
	`140`	`+ protected componentReplaced(componentId: string) {`
	`141`	`+ (this.delegate as {componentReplaced?: (id: string) => void}).componentReplaced?.(componentId);`
	`142`	`+ }`
`135`	`143`	`}`
Original file line number	Diff line number	Diff line change
`@@ -195,6 +195,14 @@ export class DomRendererFactory2 implements RendererFactory2, OnDestroy {`
`195`	`195`	`ngOnDestroy() {`
`196`	`196`	`this.rendererByCompId.clear();`
`197`	`197`	`}`
	`198`	`+`
	`199`	`+ /**`
	`200`	`+ * Used during HMR to clear any cached data about a component.`
	`201`	`+ * @param componentId ID of the component that is being replaced.`
	`202`	`+ */`
	`203`	`+ protected componentReplaced(componentId: string) {`
	`204`	`+ this.rendererByCompId.delete(componentId);`
	`205`	`+ }`
`198`	`206`	`}`
`199`	`207`
`200`	`208`	`class DefaultDomRenderer2 implements Renderer2 {`