feat(@angular-devkit/build-angular): add service worker support to experimental esbuild builder

clydin · alan-agius4 · commit b06ae55140c0 · 2022-06-14T19:47:12.000+02:00
Service worker augmentation of an application is now supported when using the experimental
`browser-esbuild` application builder. Both the `serviceWorker` and `ngswConfigPath` options
are now available for use.
The implementation leverages the `augmentAppWithServiceWorker` internal function that is used
by the Webpack-based builder. This function currently reads the application files from the
filesystem after all the application files are written. With the `browser-esbuild`builder, all
application files are available in-memory. This can allow a future version of the service worker
code to avoid additional file access and further improve build time performance when using a
service worker. Future work will investigate the creation of an `augmentAppWithServiceWorker`
variant that supports accessing these in-memory files.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -221,7 +221,7 @@ jobs:
           name: Execute CLI E2E Tests Subset with esbuild builder
           command: |
             mkdir /mnt/ramdisk/e2e-esbuild
-            node ./tests/legacy-cli/run_e2e --nb-shards=${CIRCLE_NODE_TOTAL} --shard=${CIRCLE_NODE_INDEX} <<# parameters.snapshots >>--ng-snapshots<</ parameters.snapshots >> --esbuild --tmpdir=/mnt/ramdisk/e2e-esbuild --glob="{tests/basic/**,tests/build/prod-build.ts}" --ignore="tests/basic/{environment,rebuild,serve,scripts-array}.ts"
+            node ./tests/legacy-cli/run_e2e --nb-shards=${CIRCLE_NODE_TOTAL} --shard=${CIRCLE_NODE_INDEX} <<# parameters.snapshots >>--ng-snapshots<</ parameters.snapshots >> --esbuild --tmpdir=/mnt/ramdisk/e2e-esbuild --glob="{tests/basic/**,tests/build/prod-build.ts,tests/commands/add/add-pwa.ts}" --ignore="tests/basic/{environment,rebuild,serve,scripts-array}.ts"
       - fail_fast
 
   test-browsers:
diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/experimental-warnings.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/experimental-warnings.ts
@@ -24,10 +24,6 @@ const UNSUPPORTED_OPTIONS: Array<keyof BrowserBuilderOptions> = [
   // 'i18nDuplicateTranslation',
   // 'i18nMissingTranslation',
 
-  // * Serviceworker support
-  'ngswConfigPath',
-  'serviceWorker',
-
   // * Stylesheet preprocessor support
   'inlineStyleLanguage',
   // The following option has no effect until preprocessors are supported
diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts
@@ -17,6 +17,7 @@ import { assertIsError } from '../../utils/error';
 import { FileInfo } from '../../utils/index-file/augment-index-html';
 import { IndexHtmlGenerator } from '../../utils/index-file/index-html-generator';
 import { generateEntryPoints } from '../../utils/package-chunk-sort';
+import { augmentAppWithServiceWorker } from '../../utils/service-worker';
 import { getIndexInputFile, getIndexOutputFile } from '../../utils/webpack-browser-config';
 import { resolveGlobalStyles } from '../../webpack/configs';
 import { Schema as BrowserBuilderOptions, SourceMapClass } from '../browser/schema';
@@ -61,6 +62,7 @@ export async function execute(
   }
 
   const {
+    projectRoot,
     workspaceRoot,
     mainEntryPoint,
     polyfillsEntryPoint,
@@ -249,6 +251,24 @@ export async function execute(
     outputFiles.map((file) => fs.writeFile(path.join(outputPath, file.path), file.contents)),
   );
 
+  // Augment the application with service worker support
+  // TODO: This should eventually operate on the in-memory files prior to writing the output files
+  if (options.serviceWorker) {
+    try {
+      await augmentAppWithServiceWorker(
+        projectRoot,
+        workspaceRoot,
+        outputPath,
+        options.baseHref || '/',
+        options.ngswConfigPath,
+      );
+    } catch (error) {
+      context.logger.error(error instanceof Error ? error.message : `${error}`);
+
+      return { success: false };
+    }
+  }
+
   context.logger.info(`Complete. [${(Date.now() - startTime) / 1000} seconds]`);
 
   return { success: true };
