fix(common): remove load on image once it fails to load (#52990)

arturovt · AndrewKushnir · commit 7f1c55755d94 · 2023-11-20T08:58:07.000-08:00
This commit adds an `error` listener to image elements and removes both `load` and `error` listeners once the image loads or fails to load. The `load` listener would never have been removed if the image failed to load. PR Close #52990
diff --git a/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts b/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts
@@ -746,8 +746,9 @@ function assertGreaterThanZero(dir: NgOptimizedImage, inputValue: unknown, input
  */
 function assertNoImageDistortion(
     dir: NgOptimizedImage, img: HTMLImageElement, renderer: Renderer2) {
-  const removeListenerFn = renderer.listen(img, 'load', () => {
-    removeListenerFn();
+  const removeLoadListenerFn = renderer.listen(img, 'load', () => {
+    removeLoadListenerFn();
+    removeErrorListenerFn();
     const computedStyle = window.getComputedStyle(img);
     let renderedWidth = parseFloat(computedStyle.getPropertyValue('width'));
     let renderedHeight = parseFloat(computedStyle.getPropertyValue('height'));
@@ -828,6 +829,15 @@ function assertNoImageDistortion(
       }
     }
   });
+
+  // We only listen to the `error` event to remove the `load` event listener because it will not be
+  // fired if the image fails to load. This is done to prevent memory leaks in development mode
+  // because image elements aren't garbage-collected properly. It happens because zone.js stores the
+  // event listener directly on the element and closures capture `dir`.
+  const removeErrorListenerFn = renderer.listen(img, 'error', () => {
+    removeLoadListenerFn();
+    removeErrorListenerFn();
+  });
 }
 
 /**
@@ -870,8 +880,9 @@ function assertEmptyWidthAndHeight(dir: NgOptimizedImage) {
  */
 function assertNonZeroRenderedHeight(
     dir: NgOptimizedImage, img: HTMLImageElement, renderer: Renderer2) {
-  const removeListenerFn = renderer.listen(img, 'load', () => {
-    removeListenerFn();
+  const removeLoadListenerFn = renderer.listen(img, 'load', () => {
+    removeLoadListenerFn();
+    removeErrorListenerFn();
     const renderedHeight = img.clientHeight;
     if (dir.fill && renderedHeight === 0) {
       console.warn(formatRuntimeError(
@@ -883,6 +894,12 @@ function assertNonZeroRenderedHeight(
               `property defined and the height of the element is not zero.`));
     }
   });
+
+  // See comments in the `assertNoImageDistortion`.
+  const removeErrorListenerFn = renderer.listen(img, 'error', () => {
+    removeLoadListenerFn();
+    removeErrorListenerFn();
+  });
 }
 
 /**
