fix(common): update size error to mention 'fill' mode (angular#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 angular#47797

Author: kara

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.`);
   }
 }
 

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', () => {