refactor(@angular-devkit/build-angular): integrate Ivy Webpack compiler plugin

This change integrates the Ivy Webpack compiler plugin into the browser builder.
When Ivy is enabled, which is the default behavior for applications, this plugin will now be used.
If needed, the previous plugin can still be used by enabling the `NG_BUILD_IVY_LEGACY` environment variable.

Author: clydin

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

@@ -327,6 +327,14 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
 
   if (buildOptions.namedChunks && !isWebpackFiveOrHigher()) {
     extraPlugins.push(new NamedLazyChunksPlugin());
+
+    // Provide full names for lazy routes that use the deprecated string format
+    extraPlugins.push(
+      new ContextReplacementPlugin(
+        /\@angular[\\\/]core[\\\/]/,
+        (data: { chunkName?: string }) => (data.chunkName = '[request]'),
+      ),
+    );
   }
 
   if (!differentialLoadingMode) {

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

@@ -13,9 +13,73 @@ import {
   AngularCompilerPlugin,
   AngularCompilerPluginOptions,
   NgToolsLoader,
-  PLATFORM
+  PLATFORM,
+  ivy,
 } from '@ngtools/webpack';
 import { WebpackConfigOptions, BuildOptions } from '../../utils/build-options';
+import { CompilerOptions } from '@angular/compiler-cli';
+import { RuleSetLoader } from 'webpack';
+
+function canUseIvyPlugin(wco: WebpackConfigOptions): boolean {
+  // Can only be used with Ivy
+  if (!wco.tsConfig.options.enableIvy) {
+    return false;
+  }
+
+  // Allow fallback to legacy build system via environment variable ('NG_BUILD_IVY_LEGACY=1')
+  const flag = process.env['NG_BUILD_IVY_LEGACY'];
+  if (flag !== undefined && flag !== '0' && flag.toLowerCase() !== 'false') {
+    wco.logger.warn(
+      '"NG_BUILD_IVY_LEGACY" environment variable detected. Using legacy Ivy build system.',
+    );
+
+    return false;
+  }
+
+  // Lazy modules option uses the deprecated string format for lazy routes
+  if (wco.buildOptions.lazyModules && wco.buildOptions.lazyModules.length > 0) {
+    return false;
+  }
+
+  // This pass relies on internals of the original plugin
+  if (wco.buildOptions.experimentalRollupPass) {
+    return false;
+  }
+
+  return true;
+}
+
+function createIvyPlugin(
+  wco: WebpackConfigOptions,
+  aot: boolean,
+  tsconfig: string,
+): ivy.AngularWebpackPlugin {
+  const { buildOptions } = wco;
+  const optimize = buildOptions.optimization.scripts;
+
+  const compilerOptions: CompilerOptions = {
+    skipTemplateCodegen: !aot,
+    sourceMap: buildOptions.sourceMap.scripts,
+  };
+
+  if (buildOptions.preserveSymlinks !== undefined) {
+    compilerOptions.preserveSymlinks = buildOptions.preserveSymlinks;
+  }
+
+  const fileReplacements: Record<string, string> = {};
+  if (buildOptions.fileReplacements) {
+    for (const replacement of buildOptions.fileReplacements) {
+      fileReplacements[replacement.replace] = replacement.with;
+    }
+  }
+
+  return new ivy.AngularWebpackPlugin({
+    tsconfig,
+    compilerOptions,
+    fileReplacements,
+    emitNgModuleScope: !optimize,
+  });
+}
 
 function _pluginOptionsOverrides(
   buildOptions: BuildOptions,
@@ -103,40 +167,78 @@ function _createAotPlugin(
 
 export function getNonAotConfig(wco: WebpackConfigOptions) {
   const { tsConfigPath } = wco;
+  const useIvyOnlyPlugin = canUseIvyPlugin(wco);
 
   return {
-    module: { rules: [{ test: /\.tsx?$/, loader: NgToolsLoader }] },
-    plugins: [_createAotPlugin(wco, { tsConfigPath, skipCodeGeneration: true })]
+    module: {
+      rules: [
+        {
+          test: useIvyOnlyPlugin ? /\.[jt]sx?$/ : /\.tsx?$/,
+          loader: useIvyOnlyPlugin
+            ? ivy.AngularWebpackLoaderPath
+            : NgToolsLoader,
+        },
+      ],
+    },
+    plugins: [
+      useIvyOnlyPlugin
+        ? createIvyPlugin(wco, false, tsConfigPath)
+        : _createAotPlugin(wco, { tsConfigPath, skipCodeGeneration: true }),
+    ],
   };
 }
 
 export function getAotConfig(wco: WebpackConfigOptions, i18nExtract = false) {
   const { tsConfigPath, buildOptions } = wco;
+  const optimize = buildOptions.optimization.scripts;
+  const useIvyOnlyPlugin = canUseIvyPlugin(wco) && !i18nExtract;
 
-  const loaders: any[] = [NgToolsLoader];
+  let buildOptimizerRules: RuleSetLoader[] = [];
   if (buildOptions.buildOptimizer) {
-    loaders.unshift({
+    buildOptimizerRules = [{
       loader: buildOptimizerLoaderPath,
       options: { sourceMap: buildOptions.sourceMap.scripts }
-    });
+    }];
   }
 
-  const test = /(?:\.ngfactory\.js|\.ngstyle\.js|\.tsx?)$/;
-  const optimize = wco.buildOptions.optimization.scripts;
-
   return {
-    module: { rules: [{ test, use: loaders }] },
+    module: {
+      rules: [
+        {
+          test: useIvyOnlyPlugin ? /\.tsx?$/ : /(?:\.ngfactory\.js|\.ngstyle\.js|\.tsx?)$/,
+          use: [
+            ...buildOptimizerRules,
+            useIvyOnlyPlugin ? ivy.AngularWebpackLoaderPath : NgToolsLoader,
+          ],
+        },
+        // "allowJs" support with ivy plugin - ensures build optimizer is not run twice
+        ...(useIvyOnlyPlugin
+          ? [
+              {
+                test: /\.jsx?$/,
+                use: [ivy.AngularWebpackLoaderPath],
+              },
+            ]
+          : []),
+      ],
+    },
     plugins: [
-      _createAotPlugin(
-        wco,
-        { tsConfigPath, emitClassMetadata: !optimize, emitNgModuleScope: !optimize },
-        i18nExtract,
-      ),
+      useIvyOnlyPlugin
+        ? createIvyPlugin(wco, true, tsConfigPath)
+        : _createAotPlugin(
+            wco,
+            { tsConfigPath, emitClassMetadata: !optimize, emitNgModuleScope: !optimize },
+            i18nExtract,
+          ),
     ],
   };
 }
 
 export function getTypescriptWorkerPlugin(wco: WebpackConfigOptions, workerTsConfigPath: string) {
+  if (canUseIvyPlugin(wco)) {
+    return createIvyPlugin(wco, false, workerTsConfigPath);
+  }
+
   const { buildOptions } = wco;
 
   let pluginOptions: AngularCompilerPluginOptions = {