Ivy-only Webpack Compiler Plugin

.circleci/config.yml

@@ -204,6 +204,14 @@ jobs:
           command: |
             rm -rf /mnt/ramdisk/*test-project
             PATH=~/.npm-global/bin:$PATH node ./tests/legacy-cli/run_e2e --nb-shards=${CIRCLE_NODE_TOTAL} --shard=${CIRCLE_NODE_INDEX} <<# parameters.ve >>--ve<</ parameters.ve >> <<# parameters.snapshots >>--ng-snapshots<</ parameters.snapshots >> --yarn --tmpdir=/mnt/ramdisk --glob="{tests/basic/**,tests/update/**}"
+      - unless:
+          condition: << parameters.ve >>
+          steps:
+            - run:
+                name: Execute CLI E2E Test Subset for Ivy-only plugin
+                command: |
+                  rm -rf /mnt/ramdisk/*test-project
+                  PATH=~/.npm-global/bin:$PATH NG_BUILD_IVY_EXPERIMENTAL=1 node ./tests/legacy-cli/run_e2e --nb-shards=${CIRCLE_NODE_TOTAL} --shard=${CIRCLE_NODE_INDEX} <<# parameters.snapshots >>--ng-snapshots<</ parameters.snapshots >> --tmpdir=/mnt/ramdisk --glob="{tests/basic/**,tests/build/**}"
 
   e2e-cli-node-10:
     executor:

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

@@ -61,6 +61,12 @@ describe('Browser Builder lazy modules', () => {
   for (const [name, imports] of cases) {
     describe(`Load children ${name} syntax`, () => {
       it('supports lazy bundle for lazy routes with JIT', async () => {
+        if (name === 'string' && !veEnabled) {
+          pending('Does not apply to Ivy.');
+
+          return;
+        }
+
         host.writeMultipleFiles(lazyModuleFiles);
         host.writeMultipleFiles(imports);
 
@@ -73,6 +79,12 @@ describe('Browser Builder lazy modules', () => {
       });
 
       it('supports lazy bundle for lazy routes with AOT', async () => {
+        if (name === 'string' && !veEnabled) {
+          pending('Does not apply to Ivy.');
+
+          return;
+        }
+
         host.writeMultipleFiles(lazyModuleFiles);
         host.writeMultipleFiles(imports);
         addLazyLoadedModulesInTsConfig(host, lazyModuleFiles);

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

@@ -13,9 +13,95 @@ 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 new ivy build system via environment variable ('NG_BUILD_IVY_EXPERIMENTAL=1')
+  // TODO: Remove this section and adjust warnings below once the Ivy plugin is the default
+  const flag = process.env['NG_BUILD_IVY_EXPERIMENTAL'];
+  if (flag === undefined || flag === '0' || flag.toLowerCase() === 'false') {
+    return false;
+  }
+
+  // Allow fallback to legacy build system via environment variable ('NG_BUILD_IVY_LEGACY=1')
+  // TODO: Enable this section once the Ivy plugin is the default
+  // 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 which is not supported
+  if (wco.buildOptions.lazyModules && wco.buildOptions.lazyModules.length > 0) {
+    wco.logger.warn(
+      '"lazyModules" option is deprecated and not supported by the experimental Ivy build system. ' +
+        'Using original Ivy build system.'
+    );
+
+    return false;
+  }
+
+  // This pass relies on internals of the original plugin
+  if (wco.buildOptions.experimentalRollupPass) {
+    wco.logger.warn(
+      'The experimental rollup pass is not supported by the experimental Ivy build system. ' +
+        'Using original Ivy build system.'
+    );
+
+    return false;
+  }
+
+  wco.logger.warn(
+    '"NG_BUILD_IVY_EXPERIMENTAL" environment variable detected. Using experimental Ivy build system.',
+  );
+
+  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 +189,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 = {

packages/ngtools/webpack/src/index.ts

@@ -14,3 +14,5 @@ export const NgToolsLoader = __filename;
 
 // We shouldn't need to export this, but webpack-rollup-loader uses it.
 export type { VirtualFileSystemDecorator } from './virtual_file_system_decorator';
+
+export * as ivy from './ivy';

packages/ngtools/webpack/src/ivy/diagnostics.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import { Diagnostics, formatDiagnostics } from '@angular/compiler-cli';
+import { DiagnosticCategory } from 'typescript';
+import { addError, addWarning } from '../webpack-diagnostics';
+
+export type DiagnosticsReporter = (diagnostics: Diagnostics) => void;
+
+export function createDiagnosticsReporter(
+  compilation: import('webpack').compilation.Compilation,
+): DiagnosticsReporter {
+  return (diagnostics) => {
+    for (const diagnostic of diagnostics) {
+      const text = formatDiagnostics([diagnostic]);
+      if (diagnostic.category === DiagnosticCategory.Error) {
+        addError(compilation, text);
+      } else {
+        addWarning(compilation, text);
+      }
+    }
+  };
+}