Ivy Webpack compiler plugin

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

@@ -9,7 +9,7 @@
 import { Architect } from '@angular-devkit/architect';
 import { TestProjectHost } from '@angular-devkit/architect/testing';
 import { logging } from '@angular-devkit/core';
-import { take, tap, timeout } from 'rxjs/operators';
+import { debounceTime, take, tap } from 'rxjs/operators';
 import {
   browserBuild,
   createArchitect,
@@ -117,7 +117,7 @@ describe('Browser Builder lazy modules', () => {
       const run = await architect.scheduleTarget(target, overrides);
       await run.output
         .pipe(
-          timeout(15000),
+          debounceTime(3000),
           tap(buildEvent => {
             buildNumber++;
             switch (buildNumber) {

packages/angular_devkit/build_angular/src/utils/environment-options.ts

@@ -82,3 +82,8 @@ export const cachingBasePath = (() => {
 // Build profiling
 const profilingVariable = process.env['NG_BUILD_PROFILING'];
 export const profilingEnabled = isPresent(profilingVariable) && isEnabled(profilingVariable);
+
+// Legacy Webpack plugin with Ivy
+const legacyIvyVariable = process.env['NG_BUILD_IVY_LEGACY'];
+export const legacyIvyPluginEnabled =
+  isPresent(legacyIvyVariable) && !isDisabled(legacyIvyVariable);

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

@@ -350,6 +350,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

@@ -7,15 +7,79 @@
  */
 // tslint:disable
 // TODO: cleanup this file, it's copied as is from Angular CLI.
+import { CompilerOptions } from '@angular/compiler-cli';
 import { buildOptimizerLoaderPath } from '@angular-devkit/build-optimizer';
-import * as path from 'path';
 import {
   AngularCompilerPlugin,
   AngularCompilerPluginOptions,
   NgToolsLoader,
-  PLATFORM
+  PLATFORM,
+  ivy,
 } from '@ngtools/webpack';
+import * as path from 'path';
+import { RuleSetLoader } from 'webpack';
 import { WebpackConfigOptions, BuildOptions } from '../../utils/build-options';
+import { legacyIvyPluginEnabled } from '../../utils/environment-options';
+
+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')
+  if (legacyIvyPluginEnabled) {
+    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 = {

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);
+      }
+    }
+  };
+}