Upgrade tooling to use Webpack 5

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.1",
     "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.4",
     "verdaccio": "4.12.0",
     "verdaccio-auth-memory": "^10.0.0",
-    "webpack": "4.44.2",
+    "webpack": "5.30.0",
     "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.1",
     "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.30.0",
     "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"', () => {