Web Worker support

packages/angular/cli/lib/config/schema.json

@@ -882,6 +882,10 @@
               "type": "boolean",
               "default": false,
               "x-deprecated": true
+            },
+            "webWorkerTsConfig": {
+              "type": "string",
+              "description": "TypeScript configuration for Web Worker modules."
             }
           },
           "additionalProperties": false,

packages/angular_devkit/build_angular/package.json

@@ -51,7 +51,8 @@
     "webpack-dev-server": "3.2.1",
     "webpack-merge": "4.2.1",
     "webpack-sources": "1.3.0",
-    "webpack-subresource-integrity": "1.1.0-rc.6"
+    "webpack-subresource-integrity": "1.1.0-rc.6",
+    "worker-plugin": "3.1.0"
   },
   "devDependencies": {
     "@angular/animations": "^8.0.0-beta.10",

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

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

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

@@ -108,3 +108,24 @@ export function getAotConfig(wco: WebpackConfigOptions, extract = false) {
     plugins: [_createAotPlugin(wco, { tsConfigPath }, true, extract)]
   };
 }
+
+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.webWorkerTsConfig) {
+    throw new Error('The `webWorkerTsConfig` must be a string.');
+  }
+
+  const workerTsConfigPath = resolve(wco.root, buildOptions.webWorkerTsConfig);
+
+  return {
+    plugins: [new WorkerPlugin({
+      globalObject: false,
+      plugins: [getTypescriptWorkerPlugin(wco, workerTsConfigPath)],
+    })],
+  };
+}

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

@@ -42,6 +42,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';
@@ -161,6 +162,10 @@ export function buildWebpackConfig(
     webpackConfigs.push(typescriptConfigPartial);
   }
 
+  if (wco.buildOptions.webWorkerTsConfig) {
+    webpackConfigs.push(getWorkerConfig(wco));
+  }
+
   const webpackConfig = webpackMerge(webpackConfigs);
 
   if (options.profile || process.env['NG_BUILD_PROFILING']) {

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

@@ -320,6 +320,10 @@
       "description": "**EXPERIMENTAL** Transform import statements for lazy routes to import factories when using View Engine. Should only be used when switching back and forth between View Engine and Ivy. See https://angular.io/guide/ivy for usage information.",
       "type": "boolean",
       "default": false
+    },
+    "webWorkerTsConfig": {
+      "type": "string",
+      "description": "TypeScript configuration for Web Worker modules."
     }
   },
   "additionalProperties": false,

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

@@ -0,0 +1,182 @@
+/**
+ * @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 { Architect } from '@angular-devkit/architect/src/index2';
+import { TestLogger } from '@angular-devkit/architect/testing';
+import { join, virtualFs } from '@angular-devkit/core';
+import { debounceTime, takeWhile, tap } from 'rxjs/operators';
+import { browserBuild, createArchitect, host, outputPath } from '../utils';
+
+
+describe('Browser Builder Web Worker support', () => {
+  const target = { project: 'app', target: 'build' };
+  let architect: Architect;
+
+  beforeEach(async () => {
+    await host.initialize().toPromise();
+    architect = (await createArchitect(host.root())).architect;
+  });
+  afterEach(async () => host.restore().toPromise());
+
+  const workerFiles: { [k: string]: string } = {
+    'src/app/dep.ts': `export const foo = 'bar';`,
+    'src/app/app.worker.ts': `
+      import { foo } from './dep';
+      console.log('hello from worker');
+      addEventListener('message', ({ data }) => {
+        console.log('worker got message:', data);
+        if (data === 'hello') {
+          postMessage(foo);
+        }
+      });
+    `,
+    'src/main.ts': `
+      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",
+          "app/dep.ts",
+        ]
+      }`,
+  };
+
+  it('bundles TS worker', async () => {
+    host.writeMultipleFiles(workerFiles);
+    const logger = new TestLogger('worker-warnings');
+    const overrides = { webWorkerTsConfig: 'src/tsconfig.worker.json' };
+    await browserBuild(architect, host, target, overrides, { logger });
+
+    // Worker bundle contains worker code.
+    const workerContent = virtualFs.fileBufferToString(
+      host.scopedSync().read(join(outputPath, '0.worker.js')));
+    expect(workerContent).toContain('hello from worker');
+    expect(workerContent).toContain('bar');
+
+    // Main bundle references worker.
+    const mainContent = virtualFs.fileBufferToString(
+      host.scopedSync().read(join(outputPath, 'main.js')));
+    expect(mainContent).toContain('0.worker.js');
+    expect(logger.includes('WARNING')).toBe(false, 'Should show no warnings.');
+  });
+
+  it('minimizes and hashes worker', async () => {
+    host.writeMultipleFiles(workerFiles);
+    const overrides = {
+      webWorkerTsConfig: 'src/tsconfig.worker.json',
+      outputHashing: 'all',
+      optimization: true,
+    };
+    await browserBuild(architect, host, target, overrides);
+
+    // Worker bundle should have hash and minified code.
+    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');
+
+    // Main bundle should reference hashed worker bundle.
+    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);
+  });
+
+  it('rebuilds TS worker', async () => {
+    host.writeMultipleFiles(workerFiles);
+    const overrides = {
+      webWorkerTsConfig: 'src/tsconfig.worker.json',
+      watch: true,
+    };
+
+    let buildCount = 0;
+    let phase = 1;
+    const workerPath = join(outputPath, '0.worker.js');
+    let workerContent = '';
+
+    const run = await architect.scheduleTarget(target, overrides);
+    await run.output.pipe(
+      // Wait for files to be written to disk.
+      debounceTime(1000),
+      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:
+            workerContent = virtualFs.fileBufferToString(host.scopedSync().read(workerPath));
+            // TODO(filipesilva): Should this change? Check with Jason Miller.
+            // The worker changes name with each rebuild. But sometimes it also changes from 0 to
+            // 1 and then back to 0. It's hard to know where the updated content is, but it should
+            // be in one of these two.
+            const anotherWorkerPath = join(outputPath, '1.worker.js');
+            const anotherWorkerContent = virtualFs.fileBufferToString(
+              host.scopedSync().read(anotherWorkerPath));
+            // Worker content should have changed.
+            expect(
+              workerContent.includes('baz') || anotherWorkerContent.includes('baz'),
+            ).toBeTruthy('Worker bundle did not contain updated content.');
+            phase = 3;
+            break;
+        }
+      }),
+      takeWhile(() => phase < 3),
+    ).toPromise();
+    await run.stop();
+  });
+});

packages/ngtools/webpack/src/angular_compiler_plugin.ts

@@ -596,7 +596,7 @@ export class AngularCompilerPlugin {
 
   // Registration hook for webpack plugin.
   // tslint:disable-next-line:no-big-function
-  apply(compiler: Compiler & { watchMode?: boolean }) {
+  apply(compiler: Compiler & { watchMode?: boolean, parentCompilation?: compilation.Compilation }) {
     // The below is require by NGCC processor
     // since we need to know which fields we need to process
     compiler.hooks.environment.tap('angular-compiler', () => {
@@ -610,8 +610,14 @@ export class AngularCompilerPlugin {
     // cleanup if not watching
     compiler.hooks.thisCompilation.tap('angular-compiler', compilation => {
       compilation.hooks.finishModules.tap('angular-compiler', () => {
+        let rootCompiler = compiler;
+        while (rootCompiler.parentCompilation) {
+          // tslint:disable-next-line:no-any
+          rootCompiler = compiler.parentCompilation as any;
+        }
+
         // only present for webpack 4.23.0+, assume true otherwise
-        const watchMode = compiler.watchMode === undefined ? true : compiler.watchMode;
+        const watchMode = rootCompiler.watchMode === undefined ? true : rootCompiler.watchMode;
         if (!watchMode) {
           this._program = null;
           this._transformers = [];
@@ -859,6 +865,24 @@ export class AngularCompilerPlugin {
       throw new Error('An @ngtools/webpack plugin already exist for this compilation.');
     }
 
+    // If there is no compiler host at this point, it means that the environment hook did not run.
+    // This happens in child compilations that inherit the parent compilation file system.
+    // Node: child compilations also do not run most webpack compiler hooks, including almost all
+    // we use here. The child compiler will always run as if it was the first build.
+    if (this._compilerHost === undefined) {
+      const inputFs = compilation.compiler.inputFileSystem as VirtualFileSystemDecorator;
+      if (!inputFs.getWebpackCompilerHost) {
+        throw new Error('AngularCompilerPlugin is running in a child compilation, but could' +
+          'not find a WebpackCompilerHost in the parent compilation.');
+      }
+
+      // Use the existing WebpackCompilerHost to ensure builds and rebuilds work.
+      this._compilerHost = createCompilerHost({
+        options: this._compilerOptions,
+        tsHost: inputFs.getWebpackCompilerHost(),
+      }) as CompilerHost & WebpackCompilerHost;
+    }
+
     // Set a private variable for this plugin instance.
     // tslint:disable-next-line:no-any
     (compilation as any)._ngToolsWebpackPluginInstance = this;

packages/ngtools/webpack/src/virtual_file_system_decorator.ts

@@ -21,6 +21,10 @@ export class VirtualFileSystemDecorator implements InputFileSystem {
     private _webpackCompilerHost: WebpackCompilerHost,
   ) { }
 
+  getWebpackCompilerHost() {
+    return this._webpackCompilerHost;
+  }
+
   getVirtualFilesPaths() {
     return this._webpackCompilerHost.getNgFactoryPaths();
   }

packages/schematics/angular/collection.json

@@ -100,6 +100,12 @@
       "factory": "./library",
       "schema": "./library/schema.json",
       "description": "Generate a library project for Angular."
+    },
+    "webWorker": {
+      "aliases": ["web-worker", "worker"],
+      "factory": "./web-worker",
+      "schema": "./web-worker/schema.json",
+      "description": "Create a Web Worker ."
     }
   }
 }

packages/schematics/angular/utility/workspace-models.ts

@@ -61,6 +61,7 @@ export interface BrowserBuilderOptions extends BrowserBuilderBaseOptions {
         maximumError?: string;
     }[];
     es5BrowserSupport?: boolean;
+    webWorkerTsConfig?: string;
 }
 
 export interface ServeBuilderOptions {

packages/schematics/angular/web-worker/files/project-tsconfig/tsconfig.json.template

@@ -0,0 +1,10 @@
+{
+  "extends": "<%= relativePathToWorkspaceRoot %>/tsconfig.json",
+  "compilerOptions": {
+    "lib": [
+      "es2018",
+      "dom",
+      "webworker"
+    ],
+  }
+}