fix(@angular-devkit/build-angular): correctly generate ServiceWorker …

…config on Windows

Since #20518, the generation of the ServiceWorker configuration has been
broken on Windows. The reason is the use of `path.posix.*` methods on
non-POSIX paths, resulting in broken paths. I.e. we ended up with
something like the following:

```js
path.posix.relative('C:\\foo', 'C:\\foo\\bar/baz');
// Expected result: `bar/baz`
// Actual result:   `../C:\\foo\\bar/baz`
```

This caused the config generator to fail to find any files and thus fail
to populate the config with cacheable assets.

This commit fixes this by using platform-specific `path.*` methods for
path manipulation and manually normalizing the path separators before
returning the results.

Fixes #20894

packages/angular_devkit/build_angular/src/utils/service-worker.ts

@@ -46,7 +46,7 @@ class CliFilesystem implements Filesystem {
     for await (const entry of await fs.opendir(dir)) {
       if (entry.isFile()) {
         // Uses posix paths since the service worker expects URLs
-        items.push('/' + path.posix.relative(this.base, path.posix.join(dir, entry.name)));
+        items.push('/' + path.relative(this.base, path.join(dir, entry.name)).replace(/\\/g, '/'));
       } else if (entry.isDirectory()) {
         subdirectories.push(path.join(dir, entry.name));
       }

tests/legacy-cli/e2e/tests/commands/add/add-pwa.ts

@@ -9,10 +9,39 @@ export default async function () {
   await expectFileToExist(join(process.cwd(), 'src/manifest.webmanifest'));
 
   // Angular PWA doesn't install as a dependency
-  const { dependencies, devDependencies } = JSON.parse(await readFile(join(process.cwd(), 'package.json')));
-  const hasPWADep = Object.keys({ ...dependencies, ...devDependencies })
-    .some(d => d === '@angular/pwa');
+  const { dependencies, devDependencies } = JSON.parse(
+    await readFile(join(process.cwd(), 'package.json')),
+  );
+  const hasPWADep = Object.keys({ ...dependencies, ...devDependencies }).some(
+    (d) => d === '@angular/pwa',
+  );
   if (hasPWADep) {
     throw new Error(`Expected 'package.json' not to contain a dependency on '@angular/pwa'.`);
   }
+
+  // It should generate a SW configuration file (`ngsw.json`).
+  const workspaceJson = JSON.parse(await readFile('angular.json'));
+  const outputPath = workspaceJson.projects['test-project'].architect.build.options.outputPath;
+  const ngswPath = join(process.cwd(), outputPath, 'ngsw.json');
+
+  await ng('build');
+  await expectFileToExist(ngswPath);
+
+  // It should correctly generate assetGroups and include at least one URL in each group.
+  const ngswJson = JSON.parse(await readFile(ngswPath));
+  const assetGroups = ngswJson.assetGroups.map(({ name, urls }) => ({
+    name,
+    urlCount: urls.length,
+  }));
+  const emptyAssetGroups = assetGroups.filter(({ urlCount }) => urlCount === 0);
+
+  if (assetGroups.length === 0) {
+    throw new Error("Expected 'ngsw.json' to contain at least one asset-group.");
+  }
+  if (emptyAssetGroups.length > 0) {
+    throw new Error(
+      'Expected all asset-groups to contain at least one URL, but the following groups are empty: ' +
+        emptyAssetGroups.map(({ name }) => name).join(', '),
+    );
+  }
 }