From fa4798095e3820087c4a3bccc9638c5e979315da Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Mon, 17 Oct 2022 17:23:39 -0700
Subject: [PATCH] fix(common): update size error to mention 'fill' mode
 (#47797)

The current error that is thrown when the "width" or
"height" attributes is missing doesn't mention that
"fill" mode is another option. This commit updates
the error with that option.

PR Close #47797
---
 .../directives/ng_optimized_image/ng_optimized_image.ts  | 3 ++-
 .../common/test/directives/ng_optimized_image_spec.ts    | 9 ++++++---
 2 files changed, 8 insertions(+), 4 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 b6ed871cd190c..b97353c0be060 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
@@ -814,7 +814,8 @@ function assertNonEmptyWidthAndHeight(dir: NgOptimizedImage) {
         `${imgDirectiveDetails(dir.ngSrc)} these required attributes ` +
             `are missing: ${missingAttributes.map(attr => `"${attr}"`).join(', ')}. ` +
             `Including "width" and "height" attributes will prevent image-related layout shifts. ` +
-            `To fix this, include "width" and "height" attributes on the image tag.`);
+            `To fix this, include "width" and "height" attributes on the image tag or turn on ` +
+            `"fill" mode with the \`fill\` attribute.`);
   }
 }
 
diff --git a/packages/common/test/directives/ng_optimized_image_spec.ts b/packages/common/test/directives/ng_optimized_image_spec.ts
index 943e0babbede7..1e7cff14fee06 100644
--- a/packages/common/test/directives/ng_optimized_image_spec.ts
+++ b/packages/common/test/directives/ng_optimized_image_spec.ts
@@ -344,7 +344,8 @@ describe('Image directive', () => {
               'element with the `ngSrc="img.png"`) has detected that these ' +
               'required attributes are missing: "width", "height". Including "width" and ' +
               '"height" attributes will prevent image-related layout shifts. ' +
-              'To fix this, include "width" and "height" attributes on the image tag.');
+              'To fix this, include "width" and "height" attributes on the image tag or turn on ' +
+              '"fill" mode with the `fill` attribute.');
     });
 
     it('should throw if `width` is not set', () => {
@@ -360,7 +361,8 @@ describe('Image directive', () => {
               'element with the `ngSrc="img.png"`) has detected that these ' +
               'required attributes are missing: "width". Including "width" and ' +
               '"height" attributes will prevent image-related layout shifts. ' +
-              'To fix this, include "width" and "height" attributes on the image tag.');
+              'To fix this, include "width" and "height" attributes on the image tag or turn on ' +
+              '"fill" mode with the `fill` attribute.');
     });
 
     it('should throw if `width` is 0', () => {
@@ -406,7 +408,8 @@ describe('Image directive', () => {
               'element with the `ngSrc="img.png"`) has detected that these required ' +
               'attributes are missing: "height". Including "width" and "height" ' +
               'attributes will prevent image-related layout shifts. ' +
-              'To fix this, include "width" and "height" attributes on the image tag.');
+              'To fix this, include "width" and "height" attributes on the image tag or turn on ' +
+              '"fill" mode with the `fill` attribute.');
     });
 
     it('should throw if `height` is 0', () => {