From cfff0afe3bf2af61106fc7cf377a2be957cd616a Mon Sep 17 00:00:00 2001
From: Alex Castle <atcastle@gmail.com>
Date: Tue, 18 Oct 2022 10:39:26 -0700
Subject: [PATCH] fix(common): don't generate srcset if noopImageLoader is used

Do not generate a srcset if the loader being used is the default noopImageLoader. This loader does not take width into account, so it does not make sense to use it with srcsets.
---
 .../image_loaders/image_loader.ts             |  2 +-
 .../ng_optimized_image/ng_optimized_image.ts  |  5 +++--
 .../directives/ng_optimized_image_spec.ts     | 19 +++++++++++++++++--
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/common/src/directives/ng_optimized_image/image_loaders/image_loader.ts b/packages/common/src/directives/ng_optimized_image/image_loaders/image_loader.ts
index 382d2f020f43b..5c7c38a92275b 100644
--- a/packages/common/src/directives/ng_optimized_image/image_loaders/image_loader.ts
+++ b/packages/common/src/directives/ng_optimized_image/image_loaders/image_loader.ts
@@ -46,7 +46,7 @@ export type ImageLoader = (config: ImageLoaderConfig) => string;
  * @see `ImageLoader`
  * @see `NgOptimizedImage`
  */
-const noopImageLoader = (config: ImageLoaderConfig) => config.src;
+export const noopImageLoader = (config: ImageLoaderConfig) => config.src;
 
 /**
  * Injection token that configures the image loader function.
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
index d645a97e9fd7e..9736ffea319ac 100644
--- a/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts
+++ b/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts
@@ -12,7 +12,7 @@ import {RuntimeErrorCode} from '../../errors';
 import {isPlatformServer} from '../../platform_id';
 
 import {imgDirectiveDetails} from './error_helper';
-import {IMAGE_LOADER} from './image_loaders/image_loader';
+import {IMAGE_LOADER, noopImageLoader} from './image_loaders/image_loader';
 import {LCPImageObserver} from './lcp_image_observer';
 import {PreconnectLinkChecker} from './preconnect_link_checker';
 import {PreloadLinkCreator} from './preload-link-creator';
@@ -430,7 +430,8 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy {
 
     if (this.ngSrcset) {
       rewrittenSrcset = this.getRewrittenSrcset();
-    } else if (!this._disableOptimizedSrcset && !this.srcset) {
+    } else if (
+        !this._disableOptimizedSrcset && !this.srcset && this.imageLoader !== noopImageLoader) {
       rewrittenSrcset = this.getAutomaticSrcset();
     }
 
diff --git a/packages/common/test/directives/ng_optimized_image_spec.ts b/packages/common/test/directives/ng_optimized_image_spec.ts
index 8870960cee715..5d21ff0feb916 100644
--- a/packages/common/test/directives/ng_optimized_image_spec.ts
+++ b/packages/common/test/directives/ng_optimized_image_spec.ts
@@ -1363,6 +1363,20 @@ describe('Image directive', () => {
         return `${IMG_BASE_URL}/${config.src}${width}`;
       };
 
+      it('should not generate a srcset if the default noop loader is used', () => {
+        setupTestingModule({noLoader: true});
+
+        const template = `
+          <img ngSrc="img" width="100" height="50" sizes="100vw">
+        `;
+        const fixture = createTestComponent(template);
+        fixture.detectChanges();
+
+        const nativeElement = fixture.nativeElement as HTMLElement;
+        const img = nativeElement.querySelector('img')!;
+        expect(img.getAttribute('srcset')).toBeNull();
+      });
+
       it('should add a responsive srcset to the img element if sizes attribute exists', () => {
         setupTestingModule({imageLoader});
 
@@ -1500,6 +1514,7 @@ class TestComponent {
 function setupTestingModule(config?: {
   imageConfig?: ImageConfig,
   imageLoader?: ImageLoader,
+  noLoader?: boolean,
   extraProviders?: Provider[],
   component?: Type<unknown>
 }) {
@@ -1510,8 +1525,8 @@ function setupTestingModule(config?: {
   const loader = config?.imageLoader || defaultLoader;
   const extraProviders = config?.extraProviders || [];
   const providers: Provider[] = [
-    {provide: DOCUMENT, useValue: window.document}, {provide: IMAGE_LOADER, useValue: loader},
-    ...extraProviders
+    {provide: DOCUMENT, useValue: window.document},
+    ...(config?.noLoader ? [] : [{provide: IMAGE_LOADER, useValue: loader}]), ...extraProviders
   ];
   if (config?.imageConfig) {
     providers.push({provide: IMAGE_CONFIG, useValue: config.imageConfig});