fix(@angular/build): generate module preloads next to script elements in index HTML

clydin · clydin · commit 461e78f3ee15 · 2024-06-08T13:55:54.000-04:00
The `modulepreload` link elements for initial scripts are now generated next to the
actual script elements that require the referenced preloaded scripts. This better
represents the fetch priorities to the browser and also allows easier visual discovery
of the relevant script related elements inside the index HTML.
diff --git a/packages/angular/build/src/utils/index-file/augment-index-html.ts b/packages/angular/build/src/utils/index-file/augment-index-html.ts
@@ -133,7 +133,8 @@ export async function augmentIndexHtml(
     scriptTags.push(`<script ${attrs.join(' ')}></script>`);
   }
 
-  let linkTags: string[] = [];
+  let headerLinkTags: string[] = [];
+  let bodyLinkTags: string[] = [];
   for (const src of stylesheets) {
     const attrs = [`rel="stylesheet"`, `href="${deployUrl}${src}"`];
 
@@ -146,7 +147,7 @@ export async function augmentIndexHtml(
       attrs.push(generateSriAttributes(content));
     }
 
-    linkTags.push(`<link ${attrs.join(' ')}>`);
+    headerLinkTags.push(`<link ${attrs.join(' ')}>`);
   }
 
   if (params.hints?.length) {
@@ -182,7 +183,14 @@ export async function augmentIndexHtml(
         attrs.push(generateSriAttributes(content));
       }
 
-      linkTags.push(`<link ${attrs.join(' ')}>`);
+      const tag = `<link ${attrs.join(' ')}>`;
+      if (hint.mode === 'modulepreload') {
+        // Module preloads should be placed by the inserted script elements in the body since
+        // they are only useful in combination with the scripts.
+        bodyLinkTags.push(tag);
+      } else {
+        headerLinkTags.push(tag);
+      }
     }
   }
 
@@ -240,7 +248,7 @@ export async function augmentIndexHtml(
     .on('endTag', (tag) => {
       switch (tag.tagName) {
         case 'head':
-          for (const linkTag of linkTags) {
+          for (const linkTag of headerLinkTags) {
             rewriter.emitRaw(linkTag);
           }
           if (imageDomains) {
@@ -250,9 +258,14 @@ export async function augmentIndexHtml(
               }
             }
           }
-          linkTags = [];
+          headerLinkTags = [];
           break;
         case 'body':
+          for (const linkTag of bodyLinkTags) {
+            rewriter.emitRaw(linkTag);
+          }
+          bodyLinkTags = [];
+
           // Add script tags
           for (const scriptTag of scriptTags) {
             rewriter.emitRaw(scriptTag);
@@ -269,9 +282,9 @@ export async function augmentIndexHtml(
 
   return {
     content:
-      linkTags.length || scriptTags.length
+      headerLinkTags.length || scriptTags.length
         ? // In case no body/head tags are not present (dotnet partial templates)
-          linkTags.join('') + scriptTags.join('') + content
+          headerLinkTags.join('') + scriptTags.join('') + content
         : content,
     warnings,
     errors,
diff --git a/packages/angular/build/src/utils/index-file/augment-index-html_spec.ts b/packages/angular/build/src/utils/index-file/augment-index-html_spec.ts
@@ -296,10 +296,10 @@ describe('augment-index-html', () => {
         <html>
           <head>
             <base href="/">
-            <link rel="modulepreload" href="x.js">
-            <link rel="modulepreload" href="y/z.js">
           </head>
           <body>
+            <link rel="modulepreload" href="x.js">
+            <link rel="modulepreload" href="y/z.js">
           </body>
         </html>
       `);
@@ -320,10 +320,10 @@ describe('augment-index-html', () => {
         <html>
           <head>
             <base href="/">
-            <link rel="modulepreload" href="x.js">
-            <link rel="modulepreload" href="y/z.js">
           </head>
           <body>
+            <link rel="modulepreload" href="x.js">
+            <link rel="modulepreload" href="y/z.js">
           </body>
         </html>
       `);
