From 20fc6ca057e5190155474e7377bf9f22aab597dd Mon Sep 17 00:00:00 2001
From: Charles Lyding <19598772+clydin@users.noreply.github.com>
Date: Fri, 7 Jun 2024 19:52:49 -0400
Subject: [PATCH] fix(@angular/build): generate module preloads next to script
elements in index HTML
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.
(cherry picked from commit 461e78f3ee15e7097bd7f2c975dc460d844f277f)
---
.../utils/index-file/augment-index-html.ts | 27 ++++++++++++++-----
.../index-file/augment-index-html_spec.ts | 8 +++---
2 files changed, 24 insertions(+), 11 deletions(-)
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
index 4622093f4e34..5f487032e760 100644
--- 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(``);
}
- 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(``);
+ headerLinkTags.push(``);
}
if (params.hints?.length) {
@@ -182,7 +183,14 @@ export async function augmentIndexHtml(
attrs.push(generateSriAttributes(content));
}
- linkTags.push(``);
+ const tag = ``;
+ 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
index 7c986429503a..61aaa0674ed8 100644
--- 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', () => {
-
-
+
+
`);
@@ -320,10 +320,10 @@ describe('augment-index-html', () => {
-
-
+
+
`);