fix(@angular-devkit/build-angular): handle service-worker serving with localize in dev-server

Previously, we tried to read the files from the wrong location as during localize we alter the output directory to a different temporary location.

https://github.com/angular/angular-cli/blob/7e64b1537d54fadb650559214fbb12707324cd75/packages/angular_devkit/build_angular/src/utils/i18n-options.ts#L251-L252

Closes #23844

Author: alan-agius4

packages/angular_devkit/build_angular/src/builders/dev-server/index.ts

@@ -242,7 +242,6 @@ export function serveWebpackBrowser(
           baseHref: browserOptions.baseHref,
           root: context.workspaceRoot,
           projectRoot,
-          outputPath: path.join(context.workspaceRoot, browserOptions.outputPath),
           ngswConfigPath: browserOptions.ngswConfigPath,
         }),
       );

packages/angular_devkit/build_angular/src/builders/dev-server/tests/behavior/serve_service-worker_spec.ts

@@ -106,6 +106,86 @@ describeBuilder(serveWebpackBrowser, DEV_SERVER_BUILDER_INFO, (harness) => {
       );
     });
 
+    it('works with localize', async () => {
+      harness.useProject('test', {
+        root: '.',
+        sourceRoot: 'src',
+        cli: {
+          cache: {
+            enabled: false,
+          },
+        },
+        i18n: {
+          sourceLocale: {
+            'code': 'fr',
+          },
+        },
+      });
+
+      setupBrowserTarget(harness, {
+        serviceWorker: true,
+        assets: ['src/favicon.ico', 'src/assets'],
+        styles: ['src/styles.css'],
+        localize: ['fr'],
+      });
+
+      await harness.writeFiles({
+        'ngsw-config.json': JSON.stringify(manifest),
+        'src/assets/folder-asset.txt': 'folder-asset.txt',
+        'src/styles.css': `body { background: url(./spectrum.png); }`,
+      });
+
+      harness.useTarget('serve', {
+        ...BASE_OPTIONS,
+      });
+
+      const { result, response } = await executeOnceAndFetch(harness, '/ngsw.json');
+
+      expect(result?.success).toBeTrue();
+
+      expect(await response?.json()).toEqual(
+        jasmine.objectContaining({
+          configVersion: 1,
+          index: '/index.html',
+          navigationUrls: [
+            { positive: true, regex: '^\\/.*$' },
+            { positive: false, regex: '^\\/(?:.+\\/)?[^/]*\\.[^/]*$' },
+            { positive: false, regex: '^\\/(?:.+\\/)?[^/]*__[^/]*$' },
+            { positive: false, regex: '^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$' },
+          ],
+          assetGroups: [
+            {
+              name: 'app',
+              installMode: 'prefetch',
+              updateMode: 'prefetch',
+              urls: ['/favicon.ico', '/index.html'],
+              cacheQueryOptions: {
+                ignoreVary: true,
+              },
+              patterns: [],
+            },
+            {
+              name: 'assets',
+              installMode: 'lazy',
+              updateMode: 'prefetch',
+              urls: ['/assets/folder-asset.txt', '/spectrum.png'],
+              cacheQueryOptions: {
+                ignoreVary: true,
+              },
+              patterns: [],
+            },
+          ],
+          dataGroups: [],
+          hashTable: {
+            '/favicon.ico': '84161b857f5c547e3699ddfbffc6d8d737542e01',
+            '/assets/folder-asset.txt': '617f202968a6a81050aa617c2e28e1dca11ce8d4',
+            '/index.html': '9d232e3e13b4605d197037224a2a6303dd337480',
+            '/spectrum.png': '8d048ece46c0f3af4b598a95fd8e4709b631c3c0',
+          },
+        }),
+      );
+    });
+
     it('works in watch mode', async () => {
       setupBrowserTarget(harness, {
         serviceWorker: true,

packages/angular_devkit/build_angular/src/webpack/plugins/service-worker-plugin.ts

@@ -12,7 +12,6 @@ import { augmentAppWithServiceWorker } from '../../utils/service-worker';
 export interface ServiceWorkerPluginOptions {
   projectRoot: string;
   root: string;
-  outputPath: string;
   baseHref?: string;
   ngswConfigPath?: string;
 }
@@ -21,8 +20,15 @@ export class ServiceWorkerPlugin {
   constructor(private readonly options: ServiceWorkerPluginOptions) {}
 
   apply(compiler: Compiler) {
-    compiler.hooks.done.tapPromise('angular-service-worker', async (_compilation) => {
-      const { projectRoot, root, baseHref = '', ngswConfigPath, outputPath } = this.options;
+    compiler.hooks.done.tapPromise('angular-service-worker', async ({ compilation }) => {
+      const { projectRoot, root, baseHref = '', ngswConfigPath } = this.options;
+      // We use the outputPath from the compilation instead of build-options since during
+      // localization the output path is modified to a tmp directory.
+      const outputPath = compilation.outputOptions.path;
+
+      if (!outputPath) {
+        throw new Error('Compilation output path cannot be empty.');
+      }
 
       await augmentAppWithServiceWorker(
         projectRoot,