fix(@ngtools/webpack): properly merge webpack 5 resolver options

Webpack 5 requires the use of its `cleverMerge` utility to update resolver options.

Author: clydin

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/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],
+    };
+  }
+}