fix(@angular/build): default preloadInitial to false when serviceWorker is enabled

When a service worker is enabled, application assets are prefetched and served from
Cache Storage. Emitting `<link rel="modulepreload">` hints for initial shared chunks
causes Chromium to discard them with a "cross-world service worker resource mismatch"
warning on repeat visits, as well as triggering redundant network fetches.

This change sets the default of `preloadInitial` to `false` when the `serviceWorker`
option is enabled, while still allowing developers to explicitly override it if desired.

Fixes #34022

Author: alan-agius4

packages/angular/build/src/builders/application/options.ts

@@ -384,6 +384,8 @@ export async function normalizeOptions(
         ? INDEX_HTML_CSR
         : indexBaseName;
 
+    const preloadInitialDefault = !options.serviceWorker;
+
     indexHtmlOptions = {
       input: indexInput,
       output: indexOutput,
@@ -395,8 +397,11 @@ export async function normalizeOptions(
         // [name, esm]
       ] as [string, boolean][],
       transformer: extensions?.indexHtmlTransformer,
-      // Preload initial defaults to true
-      preloadInitial: typeof options.index !== 'object' || (options.index.preloadInitial ?? true),
+      // Preload initial defaults to false when using a service worker, true otherwise
+      preloadInitial:
+        typeof options.index === 'object'
+          ? (options.index?.preloadInitial ?? preloadInitialDefault)
+          : preloadInitialDefault,
     };
   }
 

packages/angular/build/src/builders/application/schema.json

@@ -520,7 +520,6 @@
             },
             "preloadInitial": {
               "type": "boolean",
-              "default": true,
               "description": "Generates 'preload', 'modulepreload', and 'preconnect' link elements for initial application files and resources."
             }
           },

packages/angular/build/src/builders/application/tests/options/service-worker_spec.ts

@@ -89,6 +89,42 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       expect(JSON.parse(config)).toEqual(jasmine.objectContaining({ index: '/index.csr.html' }));
     });
 
+    it('should not generate initial modulepreload hints by default when service worker is enabled', async () => {
+      // Setup an initial chunk usage for JS
+      await harness.writeFile('src/a.ts', 'console.log("TEST");');
+      await harness.writeFile('src/b.ts', 'import "./a";');
+      await harness.writeFile('src/main.ts', 'import "./a";\n(() => import("./b"))();');
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        serviceWorker: true,
+      });
+
+      const { result } = await harness.executeOnce();
+      expect(result?.success).toBeTrue();
+      harness.expectFile('dist/browser/index.html').content.not.toContain('modulepreload');
+    });
+
+    it('should generate initial modulepreload hints when preloadInitial is explicitly true and service worker is enabled', async () => {
+      // Setup an initial chunk usage for JS
+      await harness.writeFile('src/a.ts', 'console.log("TEST");');
+      await harness.writeFile('src/b.ts', 'import "./a";');
+      await harness.writeFile('src/main.ts', 'import "./a";\n(() => import("./b"))();');
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        serviceWorker: true,
+        index: {
+          input: 'src/index.html',
+          preloadInitial: true,
+        },
+      });
+
+      const { result } = await harness.executeOnce();
+      expect(result?.success).toBeTrue();
+      harness.expectFile('dist/browser/index.html').content.toContain('modulepreload');
+    });
+
     it('should write JS-imported CSS chunk to browser dist when SSR is enabled', async () => {
       await harness.modifyFile('src/tsconfig.app.json', (content) => {
         const tsConfig = JSON.parse(content);