feat(@angular-devkit/build-angular): support TS web workers

Author: filipesilva

packages/angular_devkit/build_angular/src/angular-cli-files/models/build-options.ts

@@ -54,7 +54,7 @@ export interface BuildOptions {
   namedChunks?: boolean;
   subresourceIntegrity?: boolean;
   serviceWorker?: boolean;
-  autoBundleWorkerModules?: boolean;
+  experimentalWebWorkerTsConfig?: string;
   skipAppShell?: boolean;
   statsJson: boolean;
   forkTypeChecker: boolean;

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts

@@ -22,7 +22,6 @@ const ProgressPlugin = require('webpack/lib/ProgressPlugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const StatsPlugin = require('stats-webpack-plugin');
-const WorkerPlugin = require('worker-plugin');
 
 
 // tslint:disable-next-line:no-any
@@ -128,11 +127,6 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
     });
   }
 
-  if (buildOptions.autoBundleWorkerModules) {
-    const workerPluginInstance = new WorkerPlugin({ globalObject: false });
-    extraPlugins.push(workerPluginInstance);
-  }
-
   // process asset entries
   if (buildOptions.assets) {
     const copyWebpackPluginPatterns = buildOptions.assets.map((asset: AssetPatternClass) => {

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/index.ts

@@ -13,3 +13,4 @@ export * from './test';
 export * from './typescript';
 export * from './utils';
 export * from './stats';
+export * from './worker';

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/typescript.ts

@@ -123,3 +123,24 @@ export function getNonAotTestConfig(wco: WebpackConfigOptions, host: virtualFs.H
     plugins: [_createAotPlugin(wco, { tsConfigPath, skipCodeGeneration: true }, host, false)]
   };
 }
+
+export function getTypescriptWorkerPlugin(wco: WebpackConfigOptions, workerTsConfigPath: string) {
+  const { buildOptions } = wco;
+
+  const pluginOptions: AngularCompilerPluginOptions = {
+    skipCodeGeneration: true,
+    tsConfigPath: workerTsConfigPath,
+    mainPath: undefined,
+    platform: PLATFORM.Browser,
+    sourceMap: buildOptions.sourceMap.scripts,
+    forkTypeChecker: buildOptions.forkTypeChecker,
+    contextElementDependencyConstructor: require('webpack/lib/dependencies/ContextElementDependency'),
+    logger: wco.logger,
+    // Run no transformers.
+    platformTransformers: [],
+    // Don't attempt lazy route discovery.
+    discoverLazyRoutes: false,
+  };
+
+  return new AngularCompilerPlugin(pluginOptions);
+}

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/worker.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import { resolve } from 'path';
+import { Configuration } from 'webpack';
+import { WebpackConfigOptions } from '../build-options';
+import { getTypescriptWorkerPlugin } from './typescript';
+
+const WorkerPlugin = require('worker-plugin');
+
+
+export function getWorkerConfig(wco: WebpackConfigOptions): Configuration {
+  const { buildOptions } = wco;
+  if (!buildOptions.experimentalWebWorkerTsConfig) {
+    throw new Error('The `experimentalWebWorkerTsConfig` must be a string.');
+  }
+
+  const workerTsConfigPath = resolve(wco.root, buildOptions.experimentalWebWorkerTsConfig);
+
+  return {
+    plugins: [new WorkerPlugin({
+      globalObject: false,
+      plugins: [getTypescriptWorkerPlugin(wco, workerTsConfigPath)],
+    })],
+  };
+}

packages/angular_devkit/build_angular/src/browser/index.ts

@@ -25,6 +25,7 @@ import {
   getNonAotConfig,
   getStatsConfig,
   getStylesConfig,
+  getWorkerConfig,
 } from '../angular-cli-files/models/webpack-configs';
 import { readTsconfig } from '../angular-cli-files/utilities/read-tsconfig';
 import { requireProjectModule } from '../angular-cli-files/utilities/require-project-module';
@@ -154,6 +155,10 @@ export class BrowserBuilder implements Builder<BrowserBuilderSchema> {
       webpackConfigs.push(typescriptConfigPartial);
     }
 
+    if (wco.buildOptions.experimentalWebWorkerTsConfig) {
+      webpackConfigs.push(getWorkerConfig(wco));
+    }
+
     const webpackConfig = webpackMerge(webpackConfigs);
 
     if (options.profile) {

packages/angular_devkit/build_angular/src/browser/schema.json

@@ -257,10 +257,9 @@
       "description": "Generates a service worker config for production builds.",
       "default": false
     },
-    "autoBundleWorkerModules": {
-      "type": "boolean",
-      "description": "Automatically bundle new Worker('..', { type:'module' })",
-      "default": true
+    "experimentalWebWorkerTsConfig": {
+      "type": "string",
+      "description": "TypeScript configuration for Web Worker modules."
     },    
     "ngswConfigPath": {
       "type": "string",

packages/angular_devkit/build_angular/test/browser/bundle-worker_spec_large.ts

@@ -6,23 +6,22 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { runTargetSpec } from '@angular-devkit/architect/testing';
+import { DefaultTimeout, TestLogger, runTargetSpec } from '@angular-devkit/architect/testing';
 import { join, virtualFs } from '@angular-devkit/core';
-import { tap } from 'rxjs/operators';
+import { debounceTime, takeWhile, tap } from 'rxjs/operators';
 import { browserTargetSpec, host, outputPath } from '../utils';
 
 
-describe('Browser Builder bundle worker', () => {
+describe('Browser Builder Web Worker support', () => {
   beforeEach(done => host.initialize().toPromise().then(done, done.fail));
-  // afterEach(done => host.restore().toPromise().then(done, done.fail));
+  afterEach(done => host.restore().toPromise().then(done, done.fail));
 
-  const workerFiles = {
-    'src/dep.js': `export const foo = 'bar';`,
-    'src/worker.js': `
+  const workerFiles: { [k: string]: string } = {
+    'src/app/dep.ts': `export const foo = 'bar';`,
+    'src/app/app.worker.ts': `
+      import 'typescript/lib/lib.webworker';
       import { foo } from './dep';
-
       console.log('hello from worker');
-
       addEventListener('message', ({ data }) => {
         console.log('worker got message:', data);
         if (data === 'hello') {
@@ -31,61 +30,154 @@ describe('Browser Builder bundle worker', () => {
       });
     `,
     'src/main.ts': `
-      const worker = new Worker('./worker', { type: 'module' });
+      import { enableProdMode } from '@angular/core';
+      import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+      import { AppModule } from './app/app.module';
+      import { environment } from './environments/environment';
+      if (environment.production) { enableProdMode(); }
+      platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));
+
+      const worker = new Worker('./app/app.worker', { type: 'module' });
       worker.onmessage = ({ data }) => {
         console.log('page got message:', data);
       };
       worker.postMessage('hello');
     `,
+    // Make a new tsconfig for the *.worker.ts files.
+    // The final place for this tsconfig must take into consideration editor tooling, unit
+    // tests, and integration with other build targets.
+    './src/tsconfig.worker.json': `
+      {
+        "extends": "../tsconfig.json",
+        "compilerOptions": {
+          "outDir": "../out-tsc/worker",
+          "lib": [
+            "es2018",
+            "webworker"
+          ],
+          "types": []
+        },
+        "include": [
+          "**/*.worker.ts",
+        ]
+      }`,
+    // Alter the app tsconfig to not include *.worker.ts files.
+    './src/tsconfig.app.json': `
+      {
+        "extends": "../tsconfig.json",
+        "compilerOptions": {
+          "outDir": "../out-tsc/worker",
+          "types": []
+        },
+        "exclude": [
+          "test.ts",
+          "**/*.spec.ts",
+          "**/*.worker.ts",
+        ]
+      }`,
   };
 
-  describe('js workers', () => {
-    it('bundles worker', (done) => {
-      host.writeMultipleFiles(workerFiles);
-      const overrides = { autoBundleWorkerModules: true };
-      runTargetSpec(host, browserTargetSpec, overrides).pipe(
-        tap((buildEvent) => expect(buildEvent.success).toBe(true)),
-        tap(() => {
-          const workerContent = virtualFs.fileBufferToString(
-            host.scopedSync().read(join(outputPath, '0.worker.js')),
-          );
-          // worker bundle contains worker code.
-          expect(workerContent).toContain('hello from worker');
-          expect(workerContent).toContain('bar');
+  it('bundles TS worker', (done) => {
+    const logger = new TestLogger('worker-warnings');
+    host.writeMultipleFiles(workerFiles);
+    const overrides = { experimentalWebWorkerTsConfig: 'src/tsconfig.worker.json' };
+    runTargetSpec(host, browserTargetSpec, overrides, DefaultTimeout, logger).pipe(
+      tap((buildEvent) => expect(buildEvent.success).toBe(true)),
+      tap(() => {
+        const workerContent = virtualFs.fileBufferToString(
+          host.scopedSync().read(join(outputPath, '0.worker.js')),
+        );
+        // worker bundle contains worker code.
+        expect(workerContent).toContain('hello from worker');
+        expect(workerContent).toContain('bar');
+
+        const mainContent = virtualFs.fileBufferToString(
+          host.scopedSync().read(join(outputPath, 'main.js')),
+        );
+        // main bundle references worker.
+        expect(mainContent).toContain('0.worker.js');
+      }),
+      // Doesn't show any warnings.
+      tap(() => expect(logger.includes('WARNING')).toBe(false, 'Should show no warnings.')),
+    ).toPromise().then(done, done.fail);
+  });
+
+  it('minimizes and hashes worker', (done) => {
+    host.writeMultipleFiles(workerFiles);
+    const overrides = {
+      experimentalWebWorkerTsConfig: 'src/tsconfig.worker.json',
+      outputHashing: 'all',
+      optimization: true,
+    };
+    runTargetSpec(host, browserTargetSpec, overrides).pipe(
+      tap((buildEvent) => expect(buildEvent.success).toBe(true)),
+      tap(() => {
+        const workerBundle = host.fileMatchExists(outputPath,
+          /0\.[0-9a-f]{20}\.worker\.js/) as string;
+        expect(workerBundle).toBeTruthy('workerBundle should exist');
+        const workerContent = virtualFs.fileBufferToString(
+          host.scopedSync().read(join(outputPath, workerBundle)),
+        );
+        expect(workerContent).toContain('hello from worker');
+        expect(workerContent).toContain('bar');
+        expect(workerContent).toContain('"hello"===t&&postMessage(o.foo)');
+
+        const mainBundle = host.fileMatchExists(outputPath, /main\.[0-9a-f]{20}\.js/) as string;
+        expect(mainBundle).toBeTruthy('mainBundle should exist');
+        const mainContent = virtualFs.fileBufferToString(
+          host.scopedSync().read(join(outputPath, mainBundle)),
+        );
+        expect(mainContent).toContain(workerBundle);
+      }),
+    ).toPromise().then(done, done.fail);
+  });
 
-          const mainContent = virtualFs.fileBufferToString(
-            host.scopedSync().read(join(outputPath, 'main.js')),
-          );
-          // main bundle references worker.
-          expect(mainContent).toContain('0.worker.js');
-        }),
-      ).toPromise().then(done, done.fail);
-    });
+  it('rebuilds TS worker', (done) => {
+    host.writeMultipleFiles(workerFiles);
+    const overrides = {
+      experimentalWebWorkerTsConfig: 'src/tsconfig.worker.json',
+      watch: true,
+    };
 
-    it('minimizes and hashes worker', (done) => {
-      host.writeMultipleFiles(workerFiles);
-      const overrides = { autoBundleWorkerModules: true, outputHashing: 'all', optimization: true };
-      runTargetSpec(host, browserTargetSpec, overrides).pipe(
-        tap((buildEvent) => expect(buildEvent.success).toBe(true)),
-        tap(() => {
-          const workerBundle = host.fileMatchExists(outputPath,
-            /0\.[0-9a-f]{20}\.worker\.js/) as string;
-          expect(workerBundle).toBeTruthy('workerBundle should exist');
-          const workerContent = virtualFs.fileBufferToString(
-            host.scopedSync().read(join(outputPath, workerBundle)),
-          );
-          expect(workerContent).toContain('hello from worker');
-          expect(workerContent).toContain('bar');
-          expect(workerContent).toContain('"hello"===e&&postMessage("bar")');
+    let buildCount = 0;
+    let phase = 1;
+    const workerPath = join(outputPath, '0.worker.js');
+    let workerContent = '';
 
-          const mainBundle = host.fileMatchExists(outputPath, /main\.[0-9a-f]{20}\.js/) as string;
-          expect(mainBundle).toBeTruthy('mainBundle should exist');
-          const mainContent = virtualFs.fileBufferToString(
-            host.scopedSync().read(join(outputPath, mainBundle)),
-          );
-          expect(mainContent).toContain(workerBundle);
-        }),
-      ).toPromise().then(done, done.fail);
-    });
+    runTargetSpec(host, browserTargetSpec, overrides, DefaultTimeout * 3).pipe(
+      // Note(filipesilva): Wait for files to be written to disk... and something else?
+      // 1s should be enough for files to be written to disk.
+      // However, with a 1s to 3s delay, I sometimes (roughly 1 in 3 tests) saw TS compilation
+      // succeeding and emitting updated content, but the TS loader never called for
+      // 'src/worker/dep.ts'.
+      // But increasing this delay to 5s lead to no failed test in over 40 runs.
+      // I think there might be a race condition related to child compilers somewhere in webpack.
+      debounceTime(5000),
+      tap((buildEvent) => expect(buildEvent.success).toBe(true, 'build should succeed')),
+      tap(() => {
+        buildCount++;
+        switch (phase) {
+          case 1:
+            // Original worker content should be there.
+            workerContent = virtualFs.fileBufferToString(host.scopedSync().read(workerPath));
+            expect(workerContent).toContain('bar');
+            // Change content of worker dependency.
+            host.writeMultipleFiles({ 'src/app/dep.ts': `export const foo = 'baz';` });
+            phase = 2;
+            break;
+
+          case 2:
+            // Worker content should have changed.
+            workerContent = virtualFs.fileBufferToString(host.scopedSync().read(workerPath));
+            expect(workerContent).toContain('baz');
+            phase = 3;
+            break;
+        }
+      }),
+      takeWhile(() => phase < 3),
+    ).toPromise().then(
+      () => done(),
+      () => done.fail(`stuck at phase ${phase} [builds: ${buildCount}]`),
+    );
   });
 });