feat(@angular-devkit/build-angular): upgrade to Webpack 5 throughout the build system

With this change Webpack 5 is now used by the Angular tooling to build applications. Webpack 4 usage and support has been removed.
No project level configuration changes are required to take advantage of the upgraded Webpack version when using the official Angular builders.
Custom builders based on this package that use the experimental programmatic APIs may need to be updated to become compatible with Webpack 5.

BREAKING CHANGE: Webpack 5 lazy loaded file name changes
Webpack 5 generates similar but differently named files for lazy loaded JavaScript files in development configurations (when the `namedChunks` option is enabled).
For the majority of users this change should have no effect on the application and/or build process. Production builds should also not be affected as the `namedChunks` option is disabled by default in production configurations.
However, if a project's post-build process makes assumptions as to the file names then adjustments may need to be made to account for the new naming paradigm.
Such post-build processes could include custom file transformations after the build, integration into service-side frameworks, or deployment procedures.
Example development file name change: `lazy-lazy-module.js` --> `src_app_lazy_lazy_module_ts.js`

BREAKING CHANGE: Webpack 5 web worker support
Webpack 5 now includes web worker support. However, the structure of the URL within the `Worker` constructor must be in a specific format that differs from the current requirement.
Web worker usage should be updated as shown below (where `./app.worker` should be replaced with the actual worker name):
Before: `new Worker('./app.worker', ...)`
After:  `new Worker(new URL('./app.worker', import.meta.url), ...)`

Author: clydin

package.json

@@ -136,7 +136,7 @@
     "common-tags": "^1.8.0",
     "conventional-changelog": "^3.0.0",
     "conventional-commits-parser": "^3.0.0",
-    "copy-webpack-plugin": "6.3.2",
+    "copy-webpack-plugin": "8.1.1",
     "core-js": "3.10.0",
     "critters": "0.0.10",
     "css-loader": "5.0.2",
@@ -199,7 +199,7 @@
     "rimraf": "3.0.2",
     "rxjs": "6.6.7",
     "sass": "1.32.8",
-    "sass-loader": "10.1.1",
+    "sass-loader": "11.0.1",
     "sauce-connect-proxy": "https://saucelabs.com/downloads/sc-4.6.4-linux.tar.gz",
     "semver": "7.3.5",
     "source-map": "0.7.3",
@@ -226,13 +226,12 @@
     "typescript": "4.2.3",
     "verdaccio": "4.12.0",
     "verdaccio-auth-memory": "^10.0.0",
-    "webpack": "4.44.2",
+    "webpack": "5.21.2",
     "webpack-dev-middleware": "4.1.0",
     "webpack-dev-server": "3.11.2",
     "webpack-merge": "5.7.3",
     "webpack-sources": "2.2.0",
     "webpack-subresource-integrity": "1.5.2",
-    "worker-plugin": "5.0.0",
     "zone.js": "^0.11.3"
   }
 }

packages/angular_devkit/build_angular/BUILD.bazel

@@ -197,7 +197,6 @@ ts_library(
         "@npm//webpack-merge",
         "@npm//webpack-sources",
         "@npm//webpack-subresource-integrity",
-        "@npm//worker-plugin",
     ],
 )
 

packages/angular_devkit/build_angular/package.json

@@ -27,7 +27,7 @@
     "cacache": "15.0.6",
     "caniuse-lite": "^1.0.30001032",
     "circular-dependency-plugin": "5.2.2",
-    "copy-webpack-plugin": "6.3.2",
+    "copy-webpack-plugin": "8.1.1",
     "core-js": "3.10.0",
     "critters": "0.0.10",
     "css-loader": "5.0.2",
@@ -58,7 +58,7 @@
     "rimraf": "3.0.2",
     "rxjs": "6.6.7",
     "sass": "1.32.8",
-    "sass-loader": "10.1.1",
+    "sass-loader": "11.0.1",
     "semver": "7.3.5",
     "source-map": "0.7.3",
     "source-map-loader": "1.1.3",
@@ -70,13 +70,12 @@
     "terser-webpack-plugin": "4.2.3",
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
-    "webpack": "4.44.2",
+    "webpack": "5.21.2",
     "webpack-dev-middleware": "4.1.0",
     "webpack-dev-server": "3.11.2",
     "webpack-merge": "5.7.3",
     "webpack-sources": "2.2.0",
-    "webpack-subresource-integrity": "1.5.2",
-    "worker-plugin": "5.0.0"
+    "webpack-subresource-integrity": "1.5.2"
   },
   "peerDependencies": {
     "@angular/compiler-cli": "^12.0.0-next",

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

@@ -67,6 +67,7 @@ import {
   BundleStats,
   ChunkType,
   JsonChunkStats,
+  JsonCompilationStats,
   generateBundleStats,
   statsErrorsToString,
   statsHasErrors,
@@ -250,11 +251,11 @@ export function buildWebpackBrowser(
             spinner.enabled = options.progress !== false;
 
             const {
-              webpackStats: webpackRawStats,
               success,
               emittedFiles = [],
               outputPath: webpackOutputPath,
             } = buildEvent;
+            const webpackRawStats = buildEvent.webpackStats as JsonCompilationStats;
             if (!webpackRawStats) {
               throw new Error('Webpack stats build result is required.');
             }
@@ -608,10 +609,10 @@ export function buildWebpackBrowser(
                 for (const { severity, message } of budgetFailures) {
                   switch (severity) {
                     case ThresholdSeverity.Warning:
-                      webpackStats.warnings.push(message);
+                      webpackStats.warnings?.push({message});
                       break;
                     case ThresholdSeverity.Error:
-                      webpackStats.errors.push(message);
+                      webpackStats.errors?.push({message});
                       break;
                     default:
                       assertNever(severity);

packages/angular_devkit/build_angular/src/browser/specs/deploy-url_spec.ts

@@ -25,6 +25,13 @@ describe('Browser Builder deploy url', () => {
     const overrides = { deployUrl: 'deployUrl/' };
     const overrides2 = { deployUrl: 'http://example.com/some/path/' };
 
+    // Add lazy loaded chunk to provide a usage of the deploy URL
+    // Webpack 5+ will not include the deploy URL in the code unless needed
+    host.appendToFile('src/main.ts', '\nimport("./lazy");');
+    host.writeMultipleFiles({
+      'src/lazy.ts': 'export const foo = "bar";',
+    });
+
     const run = await architect.scheduleTarget(targetSpec, overrides);
     const output = await run.result as BrowserBuilderOutput;
     expect(output.success).toBe(true);

packages/angular_devkit/build_angular/src/browser/specs/differential_loading_spec.ts

@@ -10,6 +10,8 @@ import { Architect } from '@angular-devkit/architect';
 import { PathFragment } from '@angular-devkit/core';
 import { browserBuild, createArchitect, host } from '../../test-utils';
 
+const TEST_TIMEOUT = 8 * 60 * 1000;
+
 // tslint:disable-next-line: no-big-function
 describe('Browser Builder with differential loading', () => {
   const target = { project: 'app', target: 'build' };
@@ -59,7 +61,7 @@ describe('Browser Builder with differential loading', () => {
     ] as PathFragment[];
 
     expect(Object.keys(files)).toEqual(jasmine.arrayWithExactContents(expectedOutputs));
-  });
+  }, TEST_TIMEOUT);
 
   it('emits all the neccessary files for target of ESNext', async () => {
     host.replaceInFile(
@@ -99,7 +101,7 @@ describe('Browser Builder with differential loading', () => {
     ] as PathFragment[];
 
     expect(Object.keys(files)).toEqual(jasmine.arrayWithExactContents(expectedOutputs));
-  });
+  }, TEST_TIMEOUT);
 
   it('deactivates differential loading for watch mode', async () => {
     const { files } = await browserBuild(architect, host, target, { watch: true });
@@ -125,7 +127,7 @@ describe('Browser Builder with differential loading', () => {
     ] as PathFragment[];
 
     expect(Object.keys(files)).toEqual(jasmine.arrayWithExactContents(expectedOutputs));
-  });
+  }, TEST_TIMEOUT);
 
   it('emits the right ES formats', async () => {
     const { files } = await browserBuild(architect, host, target, {
@@ -134,21 +136,21 @@ describe('Browser Builder with differential loading', () => {
     });
     expect(await files['main-es5.js']).not.toContain('const ');
     expect(await files['main-es2017.js']).toContain('const ');
-  });
+  }, TEST_TIMEOUT);
 
   it('wraps ES5 scripts in an IIFE', async () => {
     const { files } = await browserBuild(architect, host, target, { optimization: false });
     expect(await files['main-es5.js']).toMatch(/^\(function \(\) \{/);
     expect(await files['main-es2017.js']).not.toMatch(/^\(function \(\) \{/);
-  });
+  }, TEST_TIMEOUT);
 
   it('uses the right zone.js variant', async () => {
     const { files } = await browserBuild(architect, host, target, { optimization: false });
     expect(await files['polyfills-es5.js']).toContain('zone.js/plugins/zone-legacy');
     expect(await files['polyfills-es5.js']).toContain('registerElementPatch');
     expect(await files['polyfills-es2017.js']).not.toContain('zone.js/plugins/zone-legacy');
     expect(await files['polyfills-es2017.js']).not.toContain('registerElementPatch');
-  });
+  }, TEST_TIMEOUT);
 
   it('adds `type="module"` when differential loading is needed', async () => {
     host.writeMultipleFiles({
@@ -165,5 +167,5 @@ describe('Browser Builder with differential loading', () => {
       '<script src="vendor-es2017.js" type="module"></script>' +
       '<script src="main-es2017.js" type="module"></script>',
     );
-  });
+  }, TEST_TIMEOUT);
 });

packages/angular_devkit/build_angular/src/browser/specs/errors_spec.ts

@@ -90,6 +90,6 @@ describe('Browser Builder errors', () => {
     // Wait for the builder to complete
     await run.stop();
 
-    expect(logs.join()).toContain(`export 'missingExport' was not found in 'rxjs'`);
+    expect(logs.join()).toContain(`export 'missingExport' (imported as 'missingExport') was not found in 'rxjs'`);
   });
 });

packages/angular_devkit/build_angular/src/browser/specs/lazy-module_spec.ts

@@ -58,7 +58,7 @@ describe('Browser Builder lazy modules', () => {
       host.writeMultipleFiles(lazyModuleFnImport);
 
       const { files } = await browserBuild(architect, host, target);
-      expect('lazy-lazy-module.js' in files).toBe(true);
+      expect('src_app_lazy_lazy_module_ts.js' in files).toBe(true);
     });
 
     it('supports lazy bundle for lazy routes with AOT', async () => {
@@ -67,7 +67,7 @@ describe('Browser Builder lazy modules', () => {
       addLazyLoadedModulesInTsConfig(host, lazyModuleFiles);
 
       const { files } = await browserBuild(architect, host, target, { aot: true });
-      const data = await files['lazy-lazy-module.js'];
+      const data = await files['src_app_lazy_lazy_module_ts.js'];
       expect(data).not.toBeUndefined('Lazy module output bundle does not exist');
       expect(data).toContain('LazyModule.ɵmod');
     });
@@ -128,7 +128,7 @@ describe('Browser Builder lazy modules', () => {
     });
 
     const { files } = await browserBuild(architect, host, target);
-    expect(files['lazy-module.js']).not.toBeUndefined();
+    expect(files['src_lazy-module_ts.js']).not.toBeUndefined();
   });
 
   it(`supports lazy bundle for dynamic import() calls`, async () => {
@@ -139,19 +139,11 @@ describe('Browser Builder lazy modules', () => {
         import(/*webpackChunkName: '[request]'*/'./lazy-' + lazyFileName);
       `,
     });
-
-    const { files } = await browserBuild(architect, host, target);
-    expect(files['lazy-module.js']).not.toBeUndefined();
-  });
-
-  it(`supports lazy bundle for System.import() calls`, async () => {
-    const lazyfiles = {
-      'src/lazy-module.ts': 'export const value = 42;',
-      'src/main.ts': `declare var System: any; System.import('./lazy-module');`,
-    };
-
-    host.writeMultipleFiles(lazyfiles);
-    addLazyLoadedModulesInTsConfig(host, lazyfiles);
+    host.replaceInFile(
+      'src/tsconfig.app.json',
+      '"main.ts"',
+      `"main.ts","lazy-module.ts"`,
+    );
 
     const { files } = await browserBuild(architect, host, target);
     expect(files['lazy-module.js']).not.toBeUndefined();
@@ -165,10 +157,9 @@ describe('Browser Builder lazy modules', () => {
     });
 
     const { files } = await browserBuild(architect, host, target);
-    expect(files['one.js']).not.toBeUndefined();
-    expect(files['two.js']).not.toBeUndefined();
-    // TODO: the chunk with common modules used to be called `common`, see why that changed.
-    expect(files['default~one~two.js']).not.toBeUndefined();
+    expect(files['src_one_ts.js']).not.toBeUndefined();
+    expect(files['src_two_ts.js']).not.toBeUndefined();
+    expect(files['default-node_modules_angular_common___ivy_ngcc___fesm2015_http_js.js']).toBeDefined();
   });
 
   it(`supports disabling the common bundle`, async () => {
@@ -179,8 +170,8 @@ describe('Browser Builder lazy modules', () => {
     });
 
     const { files } = await browserBuild(architect, host, target, { commonChunk: false });
-    expect(files['one.js']).not.toBeUndefined();
-    expect(files['two.js']).not.toBeUndefined();
-    expect(files['common.js']).toBeUndefined();
+    expect(files['src_one_ts.js']).not.toBeUndefined();
+    expect(files['src_two_ts.js']).not.toBeUndefined();
+    expect(files['default-node_modules_angular_common___ivy_ngcc___fesm2015_http_js.js']).toBeUndefined();
   });
 });

packages/angular_devkit/build_angular/src/browser/specs/rebuild_spec.ts

@@ -81,7 +81,7 @@ describe('Browser Builder rebuilds', () => {
         debounceTime(rebuildDebounceTime),
         tap(result => {
           expect(result.success).toBe(true, 'build should succeed');
-          const hasLazyChunk = host.scopedSync().exists(normalize('dist/lazy-lazy-module.js'));
+          const hasLazyChunk = host.scopedSync().exists(normalize('dist/src_app_lazy_lazy_module_ts.js'));
           switch (phase) {
             case 1:
               // No lazy chunk should exist.

packages/angular_devkit/build_angular/src/browser/specs/resolve-json-module_spec.ts

@@ -46,13 +46,13 @@ describe('Browser Builder resolve json module', () => {
 
         switch (buildCount) {
           case 1:
-            expect(content).toContain('\\"foo\\":\\"1\\"');
+            expect(content).toContain('"foo":"1"');
             host.writeMultipleFiles({
               'src/my-json-file.json': `{"foo": "2"}`,
             });
             break;
           case 2:
-            expect(content).toContain('\\"foo\\":\\"2\\"');
+            expect(content).toContain('"foo":"2"');
             break;
         }
 

packages/angular_devkit/build_angular/src/browser/specs/web-worker_spec.ts

@@ -45,7 +45,7 @@ describe('Browser Builder Web Worker support', () => {
       if (environment.production) { enableProdMode(); }
       platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));
 
-      const worker = new Worker('./app/app.worker', { type: 'module' });
+      const worker = new Worker(new URL('./app/app.worker', import.meta.url), { type: 'module' });
       worker.onmessage = ({ data }) => {
         console.log('page got message:', data);
       };
@@ -96,14 +96,14 @@ describe('Browser Builder Web Worker support', () => {
 
     // Worker bundle contains worker code.
     const workerContent = virtualFs.fileBufferToString(
-      host.scopedSync().read(join(outputPath, '0.worker.js')));
+      host.scopedSync().read(join(outputPath, 'src_app_app_worker_ts.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(mainContent).toContain('src_app_app_worker_ts');
     expect(logs.join().includes('Warning')).toBe(false, 'Should show no warnings.');
   });
 
@@ -117,7 +117,7 @@ describe('Browser Builder Web Worker support', () => {
     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;
+    const workerBundle = host.fileMatchExists(outputPath, /src_app_app_worker_ts\.[0-9a-f]{20}\.js/) as string;
     expect(workerBundle).toBeTruthy('workerBundle should exist');
     const workerContent = virtualFs.fileBufferToString(
       host.scopedSync().read(join(outputPath, workerBundle)));
@@ -130,7 +130,7 @@ describe('Browser Builder Web Worker support', () => {
     expect(mainBundle).toBeTruthy('mainBundle should exist');
     const mainContent = virtualFs.fileBufferToString(
       host.scopedSync().read(join(outputPath, mainBundle)));
-    expect(mainContent).toContain(workerBundle);
+    expect(mainContent).toContain('src_app_app_worker_ts');
   });
 
   it('rebuilds TS worker', async () => {
@@ -141,7 +141,7 @@ describe('Browser Builder Web Worker support', () => {
     };
 
     let phase = 1;
-    const workerPath = join(outputPath, '0.worker.js');
+    const workerPath = join(outputPath, 'src_app_app_worker_ts.js');
     let workerContent = '';
 
     // The current linux-based CI environments may not fully settled in regards to filesystem

packages/angular_devkit/build_angular/src/browser/tests/options/named-chunks_spec.ts

@@ -9,8 +9,8 @@ import { buildWebpackBrowser } from '../../index';
 import { BASE_OPTIONS, BROWSER_BUILDER_INFO, describeBuilder } from '../setup';
 
 const MAIN_OUTPUT = 'dist/main.js';
-const NAMED_LAZY_OUTPUT = 'dist/lazy-module.js';
-const UNNAMED_LAZY_OUTPUT = 'dist/0.js';
+const NAMED_LAZY_OUTPUT = 'dist/src_lazy-module_ts.js';
+const UNNAMED_LAZY_OUTPUT = 'dist/339.js';
 
 describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
   describe('Option: "namedChunks"', () => {