skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(common): make the warning for lazy-loaded lcp image an error (#51748)

Browse Source 
upgrade the warning for lazy-loaded lcp images when using NgOptimizedImage to an error

BREAKING CHANGE:

Previously when NgOptimizedImage directive detected that an LCP image is lazy-loaded, a console warning was produced. Now the directive throws an error to make it more discoverable in a console. If you receive this error, refer to this guide for additional information: https://angular.io/guide/image-directive#step-4-mark-images-as-priority

PR Close #51748
This commit is contained in:
Alex Castle
2023-09-12 15:45:14 -07:00
committed by Pawel Kozlowski
parent 545db6d22d
commit fe2fd7e1a8
3 changed files with 14 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/common/src/directives/ng_optimized_image/lcp_image_observer.ts
+8 -8
View File
@@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/
import {inject, Injectable, OnDestroy, ɵformatRuntimeError as formatRuntimeError} from '@angular/core';
import {inject, Injectable, OnDestroy, ɵformatRuntimeError as formatRuntimeError, ɵRuntimeError as RuntimeError} from '@angular/core';
import {DOCUMENT} from '../../dom_tokens';
import {RuntimeErrorCode} from '../../errors';
@@ -74,7 +74,7 @@ export class LCPImageObserver implements OnDestroy {
if (!img) return;
if (!img.priority && !img.alreadyWarnedPriority) {
img.alreadyWarnedPriority = true;
logMissingPriorityWarning(imgSrc);
throwMissingPriorityError(imgSrc);
}
if (img.modified && !img.alreadyWarnedModified) {
img.alreadyWarnedModified = true;
@@ -118,14 +118,14 @@ export class LCPImageObserver implements OnDestroy {
}
}
function logMissingPriorityWarning(ngSrc: string) {
function throwMissingPriorityError(ngSrc: string) {
const directiveDetails = imgDirectiveDetails(ngSrc);
console.warn(formatRuntimeError(
throw new RuntimeError(
RuntimeErrorCode.LCP_IMG_MISSING_PRIORITY,
`${directiveDetails} this image is the Largest Contentful Paint (LCP) ` +
`element but was not marked "priority". This image should be marked ` +
`"priority" in order to prioritize its loading. ` +
`To fix this, add the "priority" attribute.`));
`${directiveDetails} this image is the Largest Contentful Paint (LCP) element ` +
`but was not marked "priority". This can have a strong negative impact ` +
`on the LCP score of the entire application. This error can be fixed by ` +
`adding the 'priority' attribute to all images which are possibly the LCP element.`);
}
function logModifiedWarning(ngSrc: string) {