fix(@angular-devkit/build-angular): ensure preload hints for external…

… stylesheets are marked as styles When a preload hint is added for a stylesheet that is referenced via an `@import` that has an URL that does not contain a file extension, an `as` attribute is now correctly added to the hint to ensure that the stylesheet is loaded properly. This case can happen when a font service URL is imported within a initial stylesheet.
angular · Jun 26, 2023 · f42f101 · f42f101
1 parent f82bbca
commit f42f101
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 4 deletions.
diff --git a/..._devkit/build_angular/src/builders/application/tests/behavior/index-preload-hints_spec.ts b/..._devkit/build_angular/src/builders/application/tests/behavior/index-preload-hints_spec.ts
@@ -30,7 +30,7 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       harness
         .expectFile('dist/index.html')
         .content.toContain(
-          '<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap">',
+          '<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500;700&display=swap" as="style">',
         );
     });
   });

diff --git a/packages/angular_devkit/build_angular/src/tools/esbuild/index-html-generator.ts b/packages/angular_devkit/build_angular/src/tools/esbuild/index-html-generator.ts
@@ -45,7 +45,9 @@ export function generateIndexHtml(
       if (value.type === 'script') {
         hints.push({ url: key, mode: 'modulepreload' as const });
       } else if (value.type === 'style') {
-        hints.push({ url: key, mode: 'preload' as const });
+        // Provide an "as" value of "style" to ensure external URLs which may not have a
+        // file extension are treated as stylesheets.
+        hints.push({ url: key, mode: 'preload' as const, as: 'style' });
       }
     }
   }

diff --git a/packages/angular_devkit/build_angular/src/utils/index-file/augment-index-html.ts b/packages/angular_devkit/build_angular/src/utils/index-file/augment-index-html.ts
@@ -39,7 +39,7 @@ export interface AugmentIndexHtmlOptions {
   entrypoints: Entrypoint[];
   /** Used to set the document default locale */
   lang?: string;
-  hints?: { url: string; mode: string }[];
+  hints?: { url: string; mode: string; as?: string }[];
 }
 
 export interface FileInfo {
@@ -152,6 +152,11 @@ export async function augmentIndexHtml(
           case '.css':
             attrs.push('as="style"');
             break;
+          default:
+            if (hint.as) {
+              attrs.push(`as="${hint.as}"`);
+            }
+            break;
         }
       }
 

diff --git a/packages/angular_devkit/build_angular/src/utils/index-file/augment-index-html_spec.ts b/packages/angular_devkit/build_angular/src/utils/index-file/augment-index-html_spec.ts
@@ -375,6 +375,29 @@ describe('augment-index-html', () => {
       `);
   });
 
+  it(`should add prefetch/preload hints with as=style when specified with a URL and an 'as' option`, async () => {
+    const { content, warnings } = await augmentIndexHtml({
+      ...indexGeneratorOptions,
+      hints: [
+        { mode: 'prefetch', url: 'https://example.com/x?a=1', as: 'style' },
+        { mode: 'preload', url: 'http://example.com/y?b=2', as: 'style' },
+      ],
+    });
+
+    expect(warnings).toHaveSize(0);
+    expect(content).toEqual(oneLineHtml`
+        <html>
+          <head>
+            <base href="/">
+            <link rel="prefetch" href="https://example.com/x?a=1" as="style">
+            <link rel="preload" href="http://example.com/y?b=2" as="style">
+          </head>
+          <body>
+          </body>
+        </html>
+      `);
+  });
+
   it('should add `.mjs` script tags', async () => {
     const { content } = await augmentIndexHtml({
       ...indexGeneratorOptions,

diff --git a/packages/angular_devkit/build_angular/src/utils/index-file/index-html-generator.ts b/packages/angular_devkit/build_angular/src/utils/index-file/index-html-generator.ts
@@ -28,7 +28,7 @@ export interface IndexHtmlGeneratorProcessOptions {
   baseHref: string | undefined;
   outputPath: string;
   files: FileInfo[];
-  hints?: { url: string; mode: HintMode }[];
+  hints?: { url: string; mode: HintMode; as?: string }[];
 }
 
 export interface IndexHtmlGeneratorOptions {