8000 fix(common): issue a warning instead of an error when `NgOptimizedIma… · angular/angular@37ab681 · GitHub
[go: up one dir, main page]
Skip to content

Commit 37ab681

Browse files
alan-agius4kirjs
alan-agius4
authored and
kirjs
committed
fix(common): issue a warning instead of an error when NgOptimizedImage exceeds the preload limit (#60883)
This should not be treated as a hard error, as it doesn’t break the application but merely degrades performance. Closes #60871 (cherry picked from commit 8f25d4a) PR Close #60883
1 parent 2a65a12 commit 37ab681

File tree

2 files changed

+38
-28
lines changed

2 files changed

+38
-28
lines changed

‎packages/common/src/directives/ng_optimized_image/preload-link-creator.ts

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,12 @@
66
* found in the LICENSE file at https://angular.dev/license
77
*/
88

9-
import {inject, Injectable, Renderer2, ɵRuntimeError as RuntimeError} from '@angular/core';
10-
9+
import {
10+
inject,
11+
Injectable,
12+
Renderer2,
13+
ɵformatRuntimeError as formatRuntimeError,
14+
} from '@angular/core';
1115
import {DOCUMENT} from '../../dom_tokens';
1216
import {RuntimeErrorCode} from '../../errors';
1317

@@ -25,6 +29,7 @@ import {DEFAULT_PRELOADED_IMAGES_LIMIT, PRELOADED_IMAGES} from './tokens';
2529
export class PreloadLinkCreator {
2630
private readonly preloadedImages = inject(PRELOADED_IMAGES);
2731
private readonly document = inject(DOCUMENT);
32+
private errorShown = false;
2833

2934
/**
3035
* @description Add a preload `<link>` to the `<head>` of the `index.html` that is served from the
@@ -43,17 +48,21 @@ export class PreloadLinkCreator {
4348
* @param sizes The value of the `sizes` attribute passed in to the `<img>` tag
4449
*/
4550
createPreloadLinkTag(renderer: Renderer2, src: string, srcset?: string, sizes?: string): void {
46-
if (ngDevMode) {
47-
if (this.preloadedImages.size >= DEFAULT_PRELOADED_IMAGES_LIMIT) {
48-
throw new RuntimeError(
51+
if (
52+
ngDevMode &&
53+
!this.errorShown &&
54+
this.preloadedImages.size >= DEFAULT_PRELOADED_IMAGES_LIMIT
55+
) {
56+
this.errorShown = true;
57+
console.warn(
58+
formatRuntimeError(
4959
RuntimeErrorCode.TOO_MANY_PRELOADED_IMAGES,
50-
ngDevMode &&
51-
`The \`NgOptimizedImage\` directive has detected that more than ` +
52-
`${DEFAULT_PRELOADED_IMAGES_LIMIT} images were marked as priority. ` +
53-
`This might negatively affect an overall performance of the page. ` +
54-
`To fix this, remove the "priority" attribute from images with less priority.`,
55-
);
56-
}
60+
`The \`NgOptimizedImage\` directive has detected that more than ` +
61+
`${DEFAULT_PRELOADED_IMAGES_LIMIT} images were marked as priority. ` +
62+
`This might negatively affect an overall performance of the page. ` +
63+
`To fix this, remove the "priority" attribute from images with less priority.`,
64+
),
65+
);
5766
}
5867

5968
if (this.preloadedImages.has(src)) {

‎packages/common/test/directives/ng_optimized_image_spec.ts

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ describe('Image directive', () => {
140140
preloadLinks[0]!.remove();
141141
});
142142

143-
it('should error when the number of preloaded images is larger than the limit', () => {
143+
it('should warn when the number of preloaded images is larger than the limit', () => {
144144
// Only run this test in a browser since the Node-based DOM mocks don't
145145
// allow to override `HTMLImageElement.prototype.setAttribute` easily.
146146
if (!isBrowser) return;
@@ -156,22 +156,23 @@ describe('Image directive', () => {
156156
});
157157

158158
const template = `
159-
<img ngSrc="preloaderror2/img.png" width="150" height="50" priority>
160-
<img ngSrc="preloaderror3/img.png" width="150" height="50" priority>
161-
<img ngSrc="preloaderro4/img.png" width="150" height="50" priority>
162-
<img ngSrc="preloaderror5/img.png" width="150" height="50" priority>
163-
<img ngSrc="preloaderror6/img.png" width="150" height="50" priority>
164-
<img ngSrc="preloaderror7/img.png" width="150" height="50" priority>
165-
<img ngSrc="preloaderror8/img.png" width="150" height="50" priority>
166-
<img ngSrc="preloaderror9/img.png" width="150" height="50" priority>
167-
<img ngSrc="preloaderror10/img.png" width="150" height="50" priority>
168-
`;
159+
<img ngSrc="preloaderror2/img.png" width="150" height="50" priority>
160+
<img ngSrc="preloaderror3/img.png" width="150" height="50" priority>
161+
<img ngSrc="preloaderro4/img.png" width="150" height="50" priority>
162+
<img ngSrc="preloaderror5/img.png" width="150" height="50" priority>
163+
<img ngSrc="preloaderror6/img.png" width="150" height="50" priority>
164+
<img ngSrc="preloaderror7/img.png" width="150" height="50" priority>
165+
<img ngSrc="preloaderror8/img.png" width="150" height="50" priority>
166+
<img ngSrc="preloaderror9/img.png" width="150" height="50" priority>
167+
<img ngSrc="preloaderror10/img.png" width="150" height="50" priority>
168+
`;
169169

170-
expect(() => {
171-
const fixture = createTestComponent(template);
172-
fixture.detectChanges();
173-
}).toThrowError(
174-
'NG02961: The `NgOptimizedImage` directive has detected that more than 5 images were marked as priority. This might negatively affect an overall performance of the page. To fix this, remove the "priority" attribute from images with less priority.',
170+
const consoleWarnSpy = spyOn(console, 'warn');
171+
const fixture = createTestComponent(template);
172+
fixture.detectChanges();
173+
expect(consoleWarnSpy.calls.count()).toBe(1);
174+
expect(consoleWarnSpy.calls.argsFor(0)[0]).toMatch(
175+
/NG02961: The `NgOptimizedImage` directive has detected that more than 5 images were marked as priority/,
175176
);
176177
});
177178
});

0 commit comments

Comments
 (0)
0