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

refactor(common): replace aio links to adev (#62839)

Browse Source 
The is a doc change + a minor test change (to remove test logs that mention aio)

PR Close #62839
This commit is contained in:
Matthieu Riegler
2025-07-27 15:38:32 +02:00
committed by Jessica Janiuk
parent cd256ef33c
commit f0fca612ee
4 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
adev/src/content/reference/errors/NG0913.md
+2 -2
View File
@@ -11,11 +11,11 @@ Use the image URL provided in the console warning to find the `<img>` element in
### Ways to fix oversized images
* Use a smaller source image
* Add a [`srcset`](https://web.dev/learn/design/responsive-images/#responsive-images-with-srcset) if multiple sizes are needed for different layouts.
* Switch to use Angular's built-in image directive ([`NgOptimizedImage`](https://angular.io/api/common/NgOptimizedImage)), which generates [srcsets automatically](https://angular.io/guide/image-directive#request-images-at-the-correct-size-with-automatic-srcset).
* Switch to use Angular's built-in image directive ([`NgOptimizedImage`](https://angular.dev/api/common/NgOptimizedImage)), which generates [srcsets automatically](https://angular.dev/guide/image-optimization#request-images-at-the-correct-size-with-automatic-srcset).
### Ways to fix lazy-loaded LCP element
* Change the `loading` attribute to a different value such as `"eager"`.
* Switch to use Angular's built-in image directive ([`NgOptimizedImage`](https://angular.io/api/common/NgOptimizedImage)), which allows for easily [prioritizing LCP images](https://angular.io/guide/image-directive#step-4-mark-images-as-priority).
* Switch to use Angular's built-in image directive ([`NgOptimizedImage`](https://angular.dev/api/common/NgOptimizedImage)), which allows for easily [prioritizing LCP images](https://angular.dev/guide/image-optimization#mark-images-as-priority).
### Disabling Image Performance Warnings
Both warnings can be disabled individually, site-wide, using a provider at the root of your application:
packages/common/src/directives/ng_for_of.ts
+1 -1
View File
@@ -209,7 +209,7 @@ export class NgForOf<T, U extends NgIterable<T> = NgIterable<T>> implements DoCh
if ((typeof ngDevMode === 'undefined' || ngDevMode) && fn != null && typeof fn !== 'function') {
console.warn(
`trackBy must be a function, but received ${JSON.stringify(fn)}. ` +
`See https://angular.io/api/common/NgForOf#change-propagation for more information.`,
`See https://angular.dev/api/common/NgForOf#change-propagation for more information.`,
);
}
this._trackByFn = fn;
packages/common/test/directives/ng_optimized_image_spec.ts
+22 -20
View File
@@ -60,8 +60,8 @@ describe('Image directive', () => {
provide: IMAGE_LOADER,
useValue: (config: ImageLoaderConfig) =>
config.width
? `https://angular.io/${config.src}?width=${config.width}`
: `https://angular.io/${config.src}`,
? `https://angular.dev/${config.src}?width=${config.width}`
: `https://angular.dev/${config.src}`,
},
],
});
@@ -81,7 +81,7 @@ describe('Image directive', () => {
const head = _document.head;
const rewrittenSrc = `https://angular.io/${src}`;
const rewrittenSrc = `https://angular.dev/${src}`;
const preloadLink = head.querySelector(`link[href="${rewrittenSrc}"]`);
@@ -108,14 +108,14 @@ describe('Image directive', () => {
const src = `preload2/img.png`;
const rewrittenSrc = `https://angular.io/${src}`;
const rewrittenSrc = `https://angular.dev/${src}`;
setupTestingModule({
extraProviders: [
{provide: PLATFORM_ID, useValue: PLATFORM_SERVER_ID},
{
provide: IMAGE_LOADER,
useValue: (config: ImageLoaderConfig) => `https://angular.io/${config.src}`,
useValue: (config: ImageLoaderConfig) => `https://angular.dev/${config.src}`,
},
],
});
@@ -151,7 +151,7 @@ describe('Image directive', () => {
{provide: PLATFORM_ID, useValue: PLATFORM_SERVER_ID},
{
provide: IMAGE_LOADER,
useValue: (config: ImageLoaderConfig) => `https://angular.io/${config.src}`,
useValue: (config: ImageLoaderConfig) => `https://angular.dev/${config.src}`,
},
],
});
@@ -187,7 +187,7 @@ describe('Image directive', () => {
extraProviders: [
{
provide: IMAGE_LOADER,
useValue: (config: ImageLoaderConfig) => `https://angular.io/${config.src}`,
useValue: (config: ImageLoaderConfig) => `https://angular.dev/${config.src}`,
},
],
});
@@ -943,7 +943,7 @@ describe('Image directive', () => {
it(
'should log a warning if the priority attribute is used too often',
withHead('<link rel="preconnect" href="https://angular.io/">', async () => {
withHead('<link rel="preconnect" href="https://angular.dev/">', async () => {
// This test is running both on server and in the browser.
globalThis['ngServerMode'] = !isBrowser;
@@ -953,7 +953,7 @@ describe('Image directive', () => {
const imageLoader = () => {
// We need something different from the `localhost` (as we don't want to produce
// a preconnect warning for local environments).
return 'https://angular.io/assets/images/logos/path/img.png';
return 'https://angular.dev/assets/images/logos/path/img.png';
};
setupTestingModule({imageLoader});
@@ -1460,7 +1460,7 @@ describe('Image directive', () => {
const imageLoader = () => {
// We need something different from the `localhost` (as we don't want to produce
// a preconnect warning for local environments).
return 'https://angular.io/assets/images/logos/angular/angular.svg';
return 'https://angular.dev/assets/images/logos/angular/angular.svg';
};
it(
@@ -1484,7 +1484,7 @@ describe('Image directive', () => {
'priority images ensures that these images are delivered as soon as ' +
'possible. To fix this, please add the following element into the <head> ' +
'of the document:' +
'\n <link rel="preconnect" href="https://angular.io">',
'\n <link rel="preconnect" href="https://angular.dev">',
);
}),
);
@@ -1506,7 +1506,7 @@ describe('Image directive', () => {
it(
"should log a warning if there is a preconnect, but it doesn't match the priority image",
withHead('<link rel="preconnect" href="http://angular.io">', () => {
withHead('<link rel="preconnect" href="http://angular.dev">', () => {
// The warning is only logged on the client
if (!isBrowser) return;
@@ -1524,7 +1524,7 @@ describe('Image directive', () => {
'present for this image. Preconnecting to the origin(s) that serve priority ' +
'images ensures that these images are delivered as soon as possible. ' +
'To fix this, please add the following element into the <head> of the document:' +
'\n <link rel="preconnect" href="https://angular.io">',
'\n <link rel="preconnect" href="https://angular.dev">',
);
}),
);
@@ -1532,7 +1532,7 @@ describe('Image directive', () => {
it(
'should log a warning if there is no matching preconnect link for a priority image, but there is a preload tag',
withHead(
'<link rel="preload" href="https://angular.io/assets/images/logos/angular/angular.svg" as="image">',
'<link rel="preload" href="https://angular.dev/assets/images/logos/angular/angular.svg" as="image">',
() => {
// The warning is only logged on the client
if (!isBrowser) return;
@@ -1551,7 +1551,7 @@ describe('Image directive', () => {
'present for this image. Preconnecting to the origin(s) that serve priority ' +
'images ensures that these images are delivered as soon as possible. ' +
'To fix this, please add the following element into the <head> of the document:' +
'\n <link rel="preconnect" href="https://angular.io">',
'\n <link rel="preconnect" href="https://angular.dev">',
);
},
),
@@ -1559,7 +1559,7 @@ describe('Image directive', () => {
it(
'should not log a warning if there is a matching preconnect link for a priority image (with an extra `/` at the end)',
withHead('<link rel="preconnect" href="https://angular.io/">', () => {
withHead('<link rel="preconnect" href="https://angular.dev/">', () => {
setupTestingModule({imageLoader});
const consoleWarnSpy = spyOn(console, 'warn');
@@ -1597,7 +1597,7 @@ describe('Image directive', () => {
it(
`should allow passing host names`,
withHead('', () => {
const providers = [{provide: PRECONNECT_CHECK_BLOCKLIST, useValue: 'angular.io'}];
const providers = [{provide: PRECONNECT_CHECK_BLOCKLIST, useValue: 'angular.dev'}];
setupTestingModule({imageLoader, extraProviders: providers});
const consoleWarnSpy = spyOn(console, 'warn');
@@ -1613,7 +1613,9 @@ describe('Image directive', () => {
it(
`should allow passing origins`,
withHead('', () => {
const providers = [{provide: PRECONNECT_CHECK_BLOCKLIST, useValue: 'https://angular.io'}];
const providers = [
{provide: PRECONNECT_CHECK_BLOCKLIST, useValue: 'https://angular.dev'},
];
setupTestingModule({imageLoader, extraProviders: providers});
const consoleWarnSpy = spyOn(console, 'warn');
@@ -1630,7 +1632,7 @@ describe('Image directive', () => {
`should allow passing arrays of host names`,
withHead('', () => {
const providers = [
{provide: PRECONNECT_CHECK_BLOCKLIST, useValue: ['https://angular.io']},
{provide: PRECONNECT_CHECK_BLOCKLIST, useValue: ['https://angular.dev']},
];
setupTestingModule({imageLoader, extraProviders: providers});
@@ -1648,7 +1650,7 @@ describe('Image directive', () => {
`should allow passing nested arrays of host names`,
withHead('', () => {
const providers = [
{provide: PRECONNECT_CHECK_BLOCKLIST, useValue: [['https://angular.io']]},
{provide: PRECONNECT_CHECK_BLOCKLIST, useValue: [['https://angular.dev']]},
];
setupTestingModule({imageLoader, extraProviders: providers});
packages/common/test/image_loaders/image_loader_spec.ts
+6 -6
View File
@@ -72,7 +72,7 @@ describe('Built-in image directive loaders', () => {
it('should throw if an absolute URL is provided as a loader input', () => {
const path = 'https://somesite.imgix.net';
const src = 'https://angular.io/img.png';
const src = 'https://angular.dev/img.png';
const loader = createImgixLoader(path);
expect(() => loader({src})).toThrowError(absoluteUrlError(src, path));
});
@@ -115,7 +115,7 @@ describe('Built-in image directive loaders', () => {
describe('input validation', () => {
it('should throw if an absolute URL is provided as a loader input', () => {
const path = 'https://res.cloudinary.com/mysite';
const src = 'https://angular.io/img.png';
const src = 'https://angular.dev/img.png';
const loader = createCloudinaryLoader(path);
expect(() => loader({src})).toThrowError(absoluteUrlError(src, path));
});
@@ -193,7 +193,7 @@ describe('Built-in image directive loaders', () => {
describe('input validation', () => {
it('should throw if an absolute URL is provided as a loader input', () => {
const path = 'https://ik.imageengine.io/imagetest';
const src = 'https://angular.io/img.png';
const src = 'https://angular.dev/img.png';
const loader = createImageKitLoader(path);
expect(() => loader({src})).toThrowError(absoluteUrlError(src, path));
});
@@ -242,7 +242,7 @@ describe('Built-in image directive loaders', () => {
it('should throw if an absolute URL is provided as a loader input', () => {
const path = 'https://mysite.com';
const src = 'https://angular.io/img.png';
const src = 'https://angular.dev/img.png';
const loader = createCloudflareLoader(path);
expect(() => loader({src})).toThrowError(absoluteUrlError(src, path));
});
@@ -289,10 +289,10 @@ describe('Built-in image directive loaders', () => {
it('should construct an image with an absolute URL', () => {
const path = 'https://mysite.com';
const src = 'https://angular.io/img.png';
const src = 'https://angular.dev/img.png';
const loader = createNetlifyLoader(path);
expect(loader({src})).toBe(
'https://mysite.com/.netlify/images?url=https%3A%2F%2Fangular.io%2Fimg.png',
'https://mysite.com/.netlify/images?url=https%3A%2F%2Fangular.dev%2Fimg.png',
);
});