fix(@angular-devkit/build-angular): correctly generate ServiceWorker config on Windows

gkalpak · clydin · commit d1953bf1aab3 · 2021-05-24T09:28:55.000-04:00
Since angular#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 angular#20894
diff --git a/packages/angular_devkit/build_angular/src/utils/service-worker.ts b/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));
       }
diff --git a/tests/legacy-cli/e2e/tests/commands/add/add-pwa.ts b/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(', '),
+    );
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@ class CliFilesystem implements Filesystem {`
`46`	`46`	`for await (const entry of await fs.opendir(dir)) {`
`47`	`47`	`if (entry.isFile()) {`
`48`	`48`	`// Uses posix paths since the service worker expects URLs`
`49`		`- items.push('/' + path.posix.relative(this.base, path.posix.join(dir, entry.name)));`
	`49`	`+ items.push('/' + path.relative(this.base, path.join(dir, entry.name)).replace(/\\/g, '/'));`
`50`	`50`	`} else if (entry.isDirectory()) {`
`51`	`51`	`subdirectories.push(path.join(dir, entry.name));`
`52`	`52`	`}`