fix(@angular-devkit/build-angular): support differential loading for web workers

Fixes #16275

Author: clydin

packages/angular_devkit/build_angular/src/angular-cli-files/utilities/stats.ts

@@ -39,6 +39,7 @@ export function generateBundleStats(
   const g = (x: string) => (colors ? bold(green(x)) : x);
   const y = (x: string) => (colors ? bold(yellow(x)) : x);
 
+  const id = info.id ? y(info.id.toString()) : '';
   const size = typeof info.size === 'number' ? ` ${formatSize(info.size)}` : '';
   const files = info.files.map(f => path.basename(f)).join(', ');
   const names = info.names ? ` (${info.names.join(', ')})` : '';
@@ -47,7 +48,7 @@ export function generateBundleStats(
     .map(f => (f && (info as any)[f] ? g(` [${f}]`) : ''))
     .join('');
 
-  return `chunk {${y(info.id.toString())}} ${g(files)}${names}${size} ${initial}${flags}`;
+  return `chunk {${id}} ${g(files)}${names}${size} ${initial}${flags}`;
 }
 
 export function generateBuildStats(hash: string, time: number, colors: boolean): string {

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

@@ -331,11 +331,23 @@ export function buildWebpackBrowser(
 
               let mainChunkId;
               const actions: ProcessBundleOptions[] = [];
+              let workerReplacements: [string, string][] | undefined;
               const seen = new Set<string>();
               for (const file of emittedFiles) {
                 // Assets are not processed nor injected into the index
                 if (file.asset) {
-                  continue;
+                  // WorkerPlugin adds worker files to assets
+                  if (file.file.endsWith('.worker.js')) {
+                    if (!workerReplacements) {
+                      workerReplacements = [];
+                    }
+                    workerReplacements.push([
+                      file.file,
+                      file.file.replace(/\-es20\d{2}/, '-es5'),
+                    ]);
+                  } else {
+                    continue;
+                  }
                 }
 
                 // Scripts and non-javascript files are not processed
@@ -431,7 +443,7 @@ export function buildWebpackBrowser(
                 if (action.integrityAlgorithm && action.runtime) {
                   processRuntimeAction = action;
                 } else {
-                  processActions.push(action);
+                  processActions.push({ replacements: workerReplacements, ...action });
                 }
               }
 

packages/angular_devkit/build_angular/src/utils/process-bundle.ts

@@ -5,7 +5,15 @@
  * 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 { NodePath, ParseResult, parseSync, transformAsync, traverse, types } from '@babel/core';
+import {
+  NodePath,
+  ParseResult,
+  PluginObj,
+  parseSync,
+  transformAsync,
+  traverse,
+  types,
+} from '@babel/core';
 import { createHash } from 'crypto';
 import * as fs from 'fs';
 import * as path from 'path';
@@ -34,6 +42,7 @@ export interface ProcessBundleOptions {
   cacheKeys?: (string | null)[];
   integrityAlgorithm?: 'sha256' | 'sha384' | 'sha512';
   runtimeData?: ProcessBundleResult[];
+  replacements?: [string, string][];
 }
 
 export interface ProcessBundleResult {
@@ -120,6 +129,7 @@ export async function process(options: ProcessBundleOptions): Promise<ProcessBun
       // modules aren't needed since the bundles use webpack's custom module loading
       // 'transform-typeof-symbol' generates slower code
       presets: [['@babel/preset-env', { modules: false, exclude: ['transform-typeof-symbol'] }]],
+      plugins: options.replacements ? [createReplacePlugin(options.replacements)] : [],
       minified: options.optimize,
       // `false` ensures it is disabled and prevents large file warnings
       compact: options.optimize || false,
@@ -467,6 +477,20 @@ async function processRuntime(
   return result;
 }
 
+function createReplacePlugin(replacements: [string, string][]): PluginObj {
+  return {
+    visitor: {
+      StringLiteral(path: NodePath<types.StringLiteral>) {
+        for (const replacement of replacements) {
+          if (path.node.value === replacement[0]) {
+            path.replaceWith(types.stringLiteral(replacement[1]));
+          }
+        }
+      },
+    },
+  };
+}
+
 export interface InlineOptions {
   filename: string;
   code: string;

tests/legacy-cli/e2e/tests/build/worker.ts

@@ -8,10 +8,9 @@
 import { join } from 'path';
 import { expectFileToExist, expectFileToMatch, replaceInFile, writeFile } from '../../utils/fs';
 import { ng } from '../../utils/process';
-
+import { expectToFail } from '../../utils/utils';
 
 export default async function () {
-
   const workerPath = join('src', 'app', 'app.worker.ts');
   const snippetPath = join('src', 'app', 'app.component.ts');
   const projectTsConfig = 'tsconfig.json';
@@ -23,6 +22,22 @@ export default async function () {
   await expectFileToExist(workerTsConfig);
   await expectFileToMatch(snippetPath, `new Worker('./app.worker', { type: 'module' })`);
 
+  await ng('build');
+  await expectFileToExist('dist/test-project/0-es5.worker.js');
+  await expectFileToMatch('dist/test-project/main-es5.js', '0-es5.worker.js');
+  await expectToFail(() => expectFileToMatch('dist/test-project/main-es5.js', '0-es2015.worker.js'));
+  await expectFileToExist('dist/test-project/0-es2015.worker.js');
+  await expectFileToMatch('dist/test-project/main-es2015.js', '0-es2015.worker.js');
+  await expectToFail(() => expectFileToMatch('dist/test-project/main-es2015.js', '0-es5.worker.js'));
+
+  await ng('build', '--prod', '--output-hashing=none');
+  await expectFileToExist('dist/test-project/0-es5.worker.js');
+  await expectFileToMatch('dist/test-project/main-es5.js', '0-es5.worker.js');
+  await expectToFail(() => expectFileToMatch('dist/test-project/main-es5.js', '0-es2015.worker.js'));
+  await expectFileToExist('dist/test-project/0-es2015.worker.js');
+  await expectFileToMatch('dist/test-project/main-es2015.js', '0-es2015.worker.js');
+  await expectToFail(() => expectFileToMatch('dist/test-project/main-es2015.js', '0-es5.worker.js'));
+
   // console.warn has to be used because chrome only captures warnings and errors by default
   // https://github.com/angular/protractor/issues/2207
   await replaceInFile('src/app/app.component.ts', 'console.log', 'console.warn');