fix(common): remove placeholder image listeners once view is removed

Prior to this commit, attempting to resolve a `ChangeDetectorRef` after views or app have been destroyed would result in an error. In this commit, we clean up listeners once the view is destroyed, before the placeholder loads or fails to load.

(cherry picked from commit feb86e3)

Author: arturovt

packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts

@@ -285,6 +285,7 @@ export class NgOptimizedImage implements OnInit, OnChanges {
   private renderer = inject(Renderer2);
   private imgElement: HTMLImageElement = inject(ElementRef).nativeElement;
   private injector = inject(Injector);
+  private destroyRef = inject(DestroyRef);
 
   // An LCP image observer should be injected only in development mode.
   // Do not assign it to `null` to avoid having a redundant property in the production bundle.
@@ -410,10 +411,7 @@ export class NgOptimizedImage implements OnInit, OnChanges {
     if (ngDevMode) {
       this.lcpObserver = this.injector.get(LCPImageObserver);
 
-      // Using `DestroyRef` to avoid having an empty `ngOnDestroy` method since this
-      // is only run in development mode.
-      const destroyRef = inject(DestroyRef);
-      destroyRef.onDestroy(() => {
+      this.destroyRef.onDestroy(() => {
         if (!this.priority && this._renderedSrc !== null) {
           this.lcpObserver!.unregisterImage(this._renderedSrc);
         }
@@ -440,7 +438,7 @@ export class NgOptimizedImage implements OnInit, OnChanges {
         // This leaves the Angular zone to avoid triggering unnecessary change detection cycles when
         // `load` tasks are invoked on images.
         ngZone.runOutsideAngular(() =>
-          assertNonZeroRenderedHeight(this, this.imgElement, this.renderer),
+          assertNonZeroRenderedHeight(this, this.imgElement, this.renderer, this.destroyRef),
         );
       } else {
         assertNonEmptyWidthAndHeight(this);
@@ -453,7 +451,7 @@ export class NgOptimizedImage implements OnInit, OnChanges {
         // Only check for distorted images when not in fill mode, where
         // images may be intentionally stretched, cropped or letterboxed.
         ngZone.runOutsideAngular(() =>
-          assertNoImageDistortion(this, this.imgElement, this.renderer),
+          assertNoImageDistortion(this, this.imgElement, this.renderer, this.destroyRef),
         );
       }
       assertValidLoadingInput(this);
@@ -749,6 +747,14 @@ export class NgOptimizedImage implements OnInit, OnChanges {
     const removeLoadListenerFn = this.renderer.listen(img, 'load', callback);
     const removeErrorListenerFn = this.renderer.listen(img, 'error', callback);
 
+    // Clean up listeners once the view is destroyed, before the image
+    // loads or fails to load, to avoid element from being captured
+    // in memory and redundant change detection.
+    this.destroyRef.onDestroy(() => {
+      removeLoadListenerFn();
+      removeErrorListenerFn();
+    });
+
     callOnLoadIfImageIsLoaded(img, callback);
   }
 
@@ -1057,6 +1063,7 @@ function assertNoImageDistortion(
   dir: NgOptimizedImage,
   img: HTMLImageElement,
   renderer: Renderer2,
+  destroyRef: DestroyRef,
 ) {
   const callback = () => {
     removeLoadListenerFn();
@@ -1164,6 +1171,14 @@ function assertNoImageDistortion(
     removeErrorListenerFn();
   });
 
+  // Clean up listeners once the view is destroyed, before the image
+  // loads or fails to load, to avoid element from being captured
+  // in memory and redundant change detection.
+  destroyRef.onDestroy(() => {
+    removeLoadListenerFn();
+    removeErrorListenerFn();
+  });
+
   callOnLoadIfImageIsLoaded(img, callback);
 }
 
@@ -1209,6 +1224,7 @@ function assertNonZeroRenderedHeight(
   dir: NgOptimizedImage,
   img: HTMLImageElement,
   renderer: Renderer2,
+  destroyRef: DestroyRef,
 ) {
   const callback = () => {
     removeLoadListenerFn();
@@ -1236,6 +1252,14 @@ function assertNonZeroRenderedHeight(
     removeErrorListenerFn();
   });
 
+  // Clean up listeners once the view is destroyed, before the image
+  // loads or fails to load, to avoid element from being captured
+  // in memory and redundant change detection.
+  destroyRef.onDestroy(() => {
+    removeLoadListenerFn();
+    removeErrorListenerFn();
+  });
+
   callOnLoadIfImageIsLoaded(img, callback);
 }
 

packages/common/test/directives/ng_optimized_image_spec.ts

@@ -1291,6 +1291,27 @@ describe('Image directive', () => {
       );
     });
 
+    it('should remove placeholder event listeners once view is removed', () => {
+      const addEventListenerSpy = spyOn(HTMLImageElement.prototype, 'addEventListener');
+      const removeEventListenerSpy = spyOn(HTMLImageElement.prototype, 'removeEventListener');
+      setupTestingModule();
+      const template =
+        '<img ngSrc="path/img.png" width="400" height="300" placeholder="https://mysite.com/assets/my-image.png" />';
+      const fixture = createTestComponent(template);
+      fixture.detectChanges();
+      // The `load` event listener is being set up twice: once in
+      // `assertNoImageDistortion` and once in `removePlaceholderOnLoad`.
+      expect(
+        addEventListenerSpy.calls.all().filter((info) => info.args[0] === 'load').length,
+      ).toEqual(2);
+
+      fixture.destroy();
+
+      expect(
+        removeEventListenerSpy.calls.all().filter((info) => info.args[0] === 'load').length,
+      ).toEqual(2);
+    });
+
     it('should replace the placeholder with the actual image on load', () => {
       setupTestingModule();
       const template = '<img ngSrc="path/img.png" width="400" height="300" placeholder="true" />';