diff --git a/adev/src/content/reference/errors/NG0913.md b/adev/src/content/reference/errors/NG0913.md index 7100277a49d..00bd587a1a5 100644 --- a/adev/src/content/reference/errors/NG0913.md +++ b/adev/src/content/reference/errors/NG0913.md @@ -11,11 +11,11 @@ Use the image URL provided in the console warning to find the `` 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: diff --git a/packages/common/src/directives/ng_for_of.ts b/packages/common/src/directives/ng_for_of.ts index d90b247c8f3..6d4e124e65e 100644 --- a/packages/common/src/directives/ng_for_of.ts +++ b/packages/common/src/directives/ng_for_of.ts @@ -209,7 +209,7 @@ export class NgForOf = NgIterable> 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; diff --git a/packages/common/test/directives/ng_optimized_image_spec.ts b/packages/common/test/directives/ng_optimized_image_spec.ts index 3fa78586e5b..8dee9c393da 100644 --- a/packages/common/test/directives/ng_optimized_image_spec.ts +++ b/packages/common/test/directives/ng_optimized_image_spec.ts @@ -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('', async () => { + withHead('', 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 ' + 'of the document:' + - '\n ', + '\n ', ); }), ); @@ -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('', () => { + withHead('', () => { // 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 of the document:' + - '\n ', + '\n ', ); }), ); @@ -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( - '', + '', () => { // 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 of the document:' + - '\n ', + '\n ', ); }, ), @@ -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('', () => { + withHead('', () => { 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}); diff --git a/packages/common/test/image_loaders/image_loader_spec.ts b/packages/common/test/image_loaders/image_loader_spec.ts index 5dbe2acd9ef..7f1b2c977c2 100644 --- a/packages/common/test/image_loaders/image_loader_spec.ts +++ b/packages/common/test/image_loaders/image_loader_spec.ts @@ -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', ); });