Additional Webpack 5 fixes

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

@@ -54,6 +54,7 @@ import {
   getIndexInputFile,
   getIndexOutputFile,
 } from '../utils/webpack-browser-config';
+import { isWebpackFiveOrHigher } from '../utils/webpack-version';
 import {
   getAotConfig,
   getBrowserConfig,
@@ -176,6 +177,15 @@ async function initialize(
   // Assets are processed directly by the builder except when watching
   const adjustedOptions = options.watch ? options : { ...options, assets: [] };
 
+  // TODO_WEBPACK_5: Investigate build/serve issues with the `license-webpack-plugin` package
+  if (adjustedOptions.extractLicenses && isWebpackFiveOrHigher()) {
+    adjustedOptions.extractLicenses = false;
+    context.logger.warn(
+      'Warning: License extraction is currently disabled when using Webpack 5. ' +
+        'This is temporary and will be corrected in a future update.',
+    );
+  }
+
   const {
     config,
     projectRoot,

packages/angular_devkit/build_angular/src/webpack/configs/browser.ts

@@ -7,7 +7,7 @@
  */
 import * as webpack from 'webpack';
 import { WebpackConfigOptions } from '../../utils/build-options';
-import { isWebpackFiveOrHigher, withWebpackFourOrFive } from '../../utils/webpack-version';
+import { withWebpackFourOrFive } from '../../utils/webpack-version';
 import { CommonJsUsageWarnPlugin } from '../plugins';
 import { getSourceMapDevTool } from '../utils/helpers';
 
@@ -38,13 +38,7 @@ export function getBrowserConfig(wco: WebpackConfigOptions): webpack.Configurati
     }));
   }
 
-  // TODO_WEBPACK_5: Investigate build/serve issues with the `license-webpack-plugin` package
-  if (extractLicenses && isWebpackFiveOrHigher()) {
-    wco.logger.warn(
-      'Warning: License extraction is currently disabled when using Webpack 5. ' +
-        'This is temporary and will be corrected in a future update.',
-    );
-  } else if (extractLicenses) {
+  if (extractLicenses) {
     const LicenseWebpackPlugin = require('license-webpack-plugin').LicenseWebpackPlugin;
     extraPlugins.push(new LicenseWebpackPlugin({
       stats: {

packages/ngtools/webpack/src/angular_compiler_plugin.ts

@@ -81,7 +81,7 @@ import {
 } from './webpack';
 import { addError, addWarning } from './webpack-diagnostics';
 import { createWebpackInputHost } from './webpack-input-host';
-import { isWebpackFiveOrHigher } from './webpack-version';
+import { isWebpackFiveOrHigher, mergeResolverMainFields } from './webpack-version';
 
 export class AngularCompilerPlugin {
   private _options: AngularCompilerPluginOptions;
@@ -931,10 +931,7 @@ export class AngularCompilerPlugin {
             const originalMainFields: string[] = resolveOptions.mainFields;
             const ivyMainFields = originalMainFields.map(f => `${f}_ivy_ngcc`);
 
-            return {
-              ...resolveOptions,
-              mainFields: [...ivyMainFields, ...originalMainFields],
-            };
+            return mergeResolverMainFields(resolveOptions, originalMainFields, ivyMainFields);
           });
       }
 

packages/ngtools/webpack/src/virtual_file_system_decorator.ts

@@ -295,5 +295,6 @@ export class VirtualWatchFileSystemDecorator extends NodeWatchFileSystem {
     };
   }
 
-  watch = isWebpackFiveOrHigher() ? this.createWebpack5Watch : this.createWebpack4Watch();
+  // tslint:disable-next-line: no-any
+  watch = isWebpackFiveOrHigher() ? this.createWebpack5Watch() : this.createWebpack4Watch() as any;
 }

packages/ngtools/webpack/src/webpack-version.ts

@@ -21,3 +21,24 @@ export function isWebpackFiveOrHigher(): boolean {
 
   return cachedIsWebpackFiveOrHigher;
 }
+
+export function mergeResolverMainFields(
+  options: object,
+  originalMainFields: string[],
+  extraMainFields: string[],
+): object {
+  const cleverMerge = (webpack as {
+    util?: { cleverMerge?: (first: object, second: object) => object };
+  }).util?.cleverMerge;
+  if (cleverMerge) {
+    // Webpack 5
+    // https://github.com/webpack/webpack/issues/11635#issuecomment-707016779
+    return cleverMerge(options, { mainFields: [...extraMainFields, '...'] });
+  } else {
+    // Webpack 4
+    return {
+      ...options,
+      mainFields: [...extraMainFields, ...originalMainFields],
+    };
+  }
+}

tests/legacy-cli/e2e/tests/basic/rebuild.ts

@@ -49,7 +49,8 @@ export default function() {
     // Count the bundles.
     .then((results) => {
       const stdout = results[0].stdout;
-      if (!/(lazy-module|0)\.js/g.test(stdout)) {
+      // First regexp is for Webpack 4; Second is for Webpack 5
+      if (!/(lazy-module|0)\.js/g.test(stdout) && !/lazy_module_ts\.js/g.test(stdout)) {
         throw new Error('Expected webpack to create a new chunk, but did not.');
       }
     })

tests/legacy-cli/e2e/tests/misc/webpack-5.ts

@@ -6,7 +6,7 @@ export default async function() {
   // Setup project for yarn usage
   await rimraf('node_modules');
   await updateJsonFile('package.json', (json) => {
-    json.resolutions = { webpack: '5.0.0-rc.3' };
+    json.resolutions = { webpack: '5.1.0' };
   });
   await silentYarn();
   await silentYarn('webdriver-update');