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

Navigation Menu

Sign in

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

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

+21-12
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

+17-16
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