fix(common): do not add fetchpriority to preload link tag

`fetchpriority` is not needed on preload image `<link>` tags, an image inside an `<img>` tag with `fetchpriority` set to `high` is sufficient.
angular · Sep 19, 2022 · 2951b45 · 2951b45
1 parent ed97208
commit 2951b45
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git a/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts b/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts
@@ -394,7 +394,6 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy {
 
   private createPreloadLinkTag(url: string): void {
     const preload = this.document.createElement('link');
-    preload.setAttribute('fetchpriority', 'high');
     preload.setAttribute('as', 'image');
     preload.href = url;
     preload.rel = 'preload';

diff --git a/packages/common/test/directives/ng_optimized_image_spec.ts b/packages/common/test/directives/ng_optimized_image_spec.ts
@@ -8,7 +8,8 @@
 
 import {CommonModule, DOCUMENT} from '@angular/common';
 import {RuntimeErrorCode} from '@angular/common/src/errors';
-import {Component, Provider} from '@angular/core';
+import {PLATFORM_SERVER_ID} from '@angular/common/src/platform_id';
+import {Component, PLATFORM_ID, Provider} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {expect} from '@angular/platform-browser/testing/src/matchers';
 import {withHead} from '@angular/private/testing';
@@ -18,6 +19,47 @@ import {ABSOLUTE_SRCSET_DENSITY_CAP, assertValidNgSrcset, NgOptimizedImage, RECO
 import {PRECONNECT_CHECK_BLOCKLIST} from '../../src/directives/ng_optimized_image/preconnect_link_checker';
 
 describe('Image directive', () => {
+  it('should create a preconnect `<link>` element in the `<head>` for the image when priority is true',
+     () => {
+       // Only run this test in a browser since the Node-based DOM mocks don't
+       // allow to override `HTMLImageElement.prototype.setAttribute` easily.
+       if (!isBrowser) return;
+
+       setupTestingModule({
+         extraProviders: [
+           {provide: PLATFORM_ID, useValue: PLATFORM_SERVER_ID}, {
+             provide: IMAGE_LOADER,
+             useValue: (config: ImageLoaderConfig) => `https://angular.io/${config.src}`
+           }
+         ]
+       });
+
+       const template = '<img rawSrc="path/img.png" width="150" height="50" priority>';
+       TestBed.overrideComponent(TestComponent, {set: {template: template}});
+
+       const _document = TestBed.inject(DOCUMENT);
+       const _window = _document.defaultView!;
+       const setAttributeSpy =
+           spyOn(_window.HTMLLinkElement.prototype, 'setAttribute').and.callThrough();
+
+       const fixture = TestBed.createComponent(TestComponent);
+       fixture.detectChanges();
+
+       const head = _document.head;
+
+       const preconnectLink = head.querySelector(`link[href="https://angular.io/path/img.png"]`)
+
+       expect(preconnectLink).toBeTruthy();
+
+       const [name, value] = setAttributeSpy.calls.argsFor(0);
+
+       expect(name).toEqual('as');
+       expect(value).toEqual('image');
+
+       expect(preconnectLink!.getAttribute('rel')).toEqual('preload');
+       expect(preconnectLink!.getAttribute('as')).toEqual('image');
+     });
+
   it('should set `loading` and `fetchpriority` attributes before `src`', () => {
     // Only run this test in a browser since the Node-based DOM mocks don't
     // allow to override `HTMLImageElement.prototype.setAttribute` easily.