feat(common): explain why width/height is required (#47082)

khempenius · Pawel Kozlowski · commit 451b85ca176e · 2022-08-16T17:36:54.000Z
Update error message text to explain why width & height are required attributes. PR Close #47082
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
@@ -161,8 +161,7 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy {
       assertNoConflictingSrcset(this);
       assertNotBase64Image(this);
       assertNotBlobURL(this);
-      assertRequiredNumberInput(this, this.width, 'width');
-      assertRequiredNumberInput(this, this.height, 'height');
+      assertNonEmptyWidthAndHeight(this);
       assertValidLoadingInput(this);
       assertNoImageDistortion(this, this.imgElement, this.renderer);
       if (this.priority) {
@@ -507,13 +506,17 @@ function assertNoImageDistortion(
 }
 
 // Verifies that a specified input is set.
-function assertRequiredNumberInput(dir: NgOptimizedImage, inputValue: unknown, inputName: string) {
-  if (typeof inputValue === 'undefined') {
+function assertNonEmptyWidthAndHeight(dir: NgOptimizedImage) {
+  let missingAttributes = [];
+  if (dir.width === undefined) missingAttributes.push('width');
+  if (dir.height === undefined) missingAttributes.push('height');
+  if (missingAttributes.length > 0) {
     throw new RuntimeError(
         RuntimeErrorCode.REQUIRED_INPUT_MISSING,
-        `${imgDirectiveDetails(dir.rawSrc)} has detected that the required \`${inputName}\` ` +
-            `attribute is missing. Please specify the \`${inputName}\` attribute ` +
-            `on the mentioned element.`);
+        `${imgDirectiveDetails(dir.rawSrc)} has detected that these required attributes` +
+            ` are missing:\`${missingAttributes.join(',')}\`. Including "width" and "height" ` +
+            `attributes will prevent image-related layout shifts. Please include "width" and ` +
+            `"height" attributes on the image tag.`);
   }
 }
 
diff --git a/packages/common/test/directives/ng_optimized_image_spec.ts b/packages/common/test/directives/ng_optimized_image_spec.ts
@@ -162,9 +162,9 @@ describe('Image directive', () => {
               `NG0${
                   RuntimeErrorCode
                       .REQUIRED_INPUT_MISSING}: The NgOptimizedImage directive (activated on an <img> ` +
-              'element with the `rawSrc="img.png"`) has detected that the required ' +
-              '`width` attribute is missing. Please specify the `width` attribute ' +
-              'on the mentioned element.');
+              'element with the `rawSrc="img.png"`) has detected that these required attributes are missing:' +
+              '`width`. Including "width" and "height" attributes will prevent image-related layout shifts. ' +
+              'Please include "width" and "height" attributes on the image tag.');
     });
 
     it('should throw if `width` is 0', () => {
@@ -211,9 +211,9 @@ describe('Image directive', () => {
               `NG0${
                   RuntimeErrorCode
                       .REQUIRED_INPUT_MISSING}: The NgOptimizedImage directive (activated on an <img> ` +
-              'element with the `rawSrc="img.png"`) has detected that the required ' +
-              '`height` attribute is missing. Please specify the `height` attribute ' +
-              'on the mentioned element.');
+              'element with the `rawSrc="img.png"`) has detected that these required attributes are missing:' +
+              '`height`. Including "width" and "height" attributes will prevent image-related layout shifts. ' +
+              'Please include "width" and "height" attributes on the image tag.');
     });
 
     it('should throw if `height` is 0', () => {
