From e716a69225e805b83580a6c24ad761a18dd64912 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.
---
 .../ng_optimized_image/ng_optimized_image.ts  |  3 ++-
 .../directives/ng_optimized_image_spec.ts     | 19 +++++++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

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 c6dc3e62daf28..e24198d669ade 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
@@ -417,7 +417,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 1e7cff14fee06..52185ef5c6695 100644
--- a/packages/common/test/directives/ng_optimized_image_spec.ts
+++ b/packages/common/test/directives/ng_optimized_image_spec.ts
@@ -1401,6 +1401,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});
 
@@ -1538,6 +1552,7 @@ class TestComponent {
 function setupTestingModule(config?: {
   imageConfig?: ImageConfig,
   imageLoader?: ImageLoader,
+  noLoader?: boolean,
   extraProviders?: Provider[],
   component?: Type<unknown>
 }) {
@@ -1548,8 +1563,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});