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

Author: filipesilva

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

@@ -60,6 +60,7 @@ export interface BuildOptions {
   forkTypeChecker: boolean;
   profile?: boolean;
   es5BrowserSupport?: boolean;
+  workerTsConfig?: string;
 
   main: string;
   index: string;

Diff for: 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: AssetPatternObject) => {

Diff for: 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';

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

@@ -123,3 +123,20 @@ 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,
+  };
+
+  return new AngularCompilerPlugin(pluginOptions);
+}

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

@@ -0,0 +1,28 @@
+/**
+ * @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;
+  const workerTsConfigPath = buildOptions.workerTsConfig
+    ? resolve(wco.root, buildOptions.workerTsConfig)
+    : undefined;
+
+  return {
+    plugins: [new WorkerPlugin({
+      globalObject: false,
+      plugins: workerTsConfigPath ? [getTypescriptWorkerPlugin(wco, workerTsConfigPath)] : [],
+    })],
+  };
+}

Diff for: 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';
@@ -152,6 +153,10 @@ export class BrowserBuilder implements Builder<BrowserBuilderSchema> {
       webpackConfigs.push(typescriptConfigPartial);
     }
 
+    if (wco.buildOptions.autoBundleWorkerModules) {
+      webpackConfigs.push(getWorkerConfig(wco));
+    }
+
     const webpackConfig = webpackMerge(webpackConfigs);
 
     if (options.profile) {

Diff for: packages/angular_devkit/build_angular/src/browser/schema.d.ts

@@ -199,6 +199,11 @@ export interface BrowserBuilderSchema {
    */
   autoBundleWorkerModules: boolean;
 
+  /**
+   * TypeScript configuration for worker modules.
+   */
+  workerTsConfig?: string;
+
   /**
    * Path to ngsw-config.json.
    */

Diff for: packages/angular_devkit/build_angular/src/browser/schema.json

@@ -260,6 +260,10 @@
       "description": "Automatically bundle new Worker('..', { type:'module' })",
       "default": true
     },    
+    "workerTsConfig": {
+      "type": "string",
+      "description": "TypeScript configuration for worker modules."
+    },    
     "ngswConfigPath": {
       "type": "string",
       "description": "Path to ngsw-config.json."

Diff for: packages/angular_devkit/build_angular/test/browser/bundle-worker_spec_large.ts

@@ -6,19 +6,19 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { runTargetSpec } from '@angular-devkit/architect/testing';
+import { TestLogger, runTargetSpec } from '@angular-devkit/architect/testing';
 import { join, virtualFs } from '@angular-devkit/core';
 import { tap } from 'rxjs/operators';
 import { browserTargetSpec, host, outputPath } from '../utils';
 
 
 describe('Browser Builder bundle worker', () => {
   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/worker/dep.js': `export const foo = 'bar';`,
+    'src/worker/worker.js': `
       import { foo } from './dep';
 
       console.log('hello from worker');
@@ -31,61 +31,143 @@ 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('./worker/worker.js', { type: 'module' });
       worker.onmessage = ({ data }) => {
         console.log('page got message:', data);
       };
       worker.postMessage('hello');
     `,
   };
 
-  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');
-
-          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('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")');
-
-          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);
-    });
+  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');
+
+        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('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")');
+
+        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);
+  });
+
+  it('bundles TS worker', (done) => {
+    // Use the same worker file content but in a .ts file name.
+    const tsWorkerFiles = Object.keys(workerFiles)
+      .reduce((acc, k) => {
+        // Replace the .js files with .ts, and also references within the files.
+        acc[k.replace(/\.js$/, '.ts')] = workerFiles[k].replace(/\.js'/g, `.ts'`);
+
+        return acc;
+      }, {} as { [k: string]: string });
+    host.writeMultipleFiles(tsWorkerFiles);
+
+    host.writeMultipleFiles({
+      // Make a new tsconfig for the worker folder that includes the webworker lib.
+      // The final place for this tsconfig must take into consideration editor tooling, unit
+      // tests, and integration with other build targets.
+      './src/worker/tsconfig.json': `
+        {
+          "extends": "../../tsconfig.json",
+          "compilerOptions": {
+            "outDir": "../../out-tsc/worker",
+            "lib": [
+              "es2018",
+              "webworker"
+            ],
+            "types": []
+          }
+        }`,
+      // Alter the app tsconfig to not include worker files.
+      './src/tsconfig.app.json': `
+        {
+          "extends": "../tsconfig.json",
+          "compilerOptions": {
+            "outDir": "../out-tsc/worker",
+            "types": []
+          },
+          "exclude": [
+            "test.ts",
+            "**/*.spec.ts",
+            "worker/**/*.ts"
+          ]
+        }`,
+      });
+
+    const overrides = {
+      autoBundleWorkerModules: true,
+      workerTsConfig: 'src/worker/tsconfig.json',
+    };
+
+    const logger = new TestLogger('worker-warnings');
+
+    runTargetSpec(host, browserTargetSpec, overrides, 45000, 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);
   });
 });