refactor(@ngtools/webpack): initial ivy-only Webpack plugin/loader

This change introduces a new Ivy-only Webpack plugin.  The plugin is based on the design introduced by `tsc_wrapped` within Bazel’s `rules_typescript` and leverages the newly added ngtsc plugin from within the `@angular/compiler-cli` package.  By leveraging the same plugin interface that it used by Bazel, a common interface can be used to access the Angular compiler.  This has benefits to both major build systems and dramatically reduces the necessary code infrastructure to integrate the Angular compiler.
The plugin also simplifies and reduces the amount of code within the plugin by leveraging newer TypeScript features and capabilities.  The need for the virtual filesystem has also been removed.  The file replacements capability was the primary driver for the previous need for the virtual filesystem.  File replacements are now implemented using a two-pronged approach.  The first, for TypeScript, is to hook TypeScript module resolution and adjust the resolved modules based on the configured file replacements.  This is similar in behavior to TypeScript path mapping.  The second, for Webpack, is the use of the `NormalModuleReplacementPlugin` to facilitate bundling of the configured file replacements.  An advantage to this approach is that the build system (both TypeScript and Webpack) are now aware of the replacements and can operate without augmenting multiple aspects of system as was needed previously.
The plugin also introduces the use of TypeScript’s builder programs.  The current primary benefit is more accurate and simplified dependency discovery.  Further, they also provide for the potential future introduction of incremental build support and incremental type checking.

NOTE: The deprecated string format for lazy routes is not supported by this plugin.  Dynamic imports are recommended for use with Ivy and are required when using the new plugin.

Author: clydin

packages/ngtools/webpack/src/index.ts

@@ -14,3 +14,8 @@ 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';
+
+import * as ivy from './ivy';
+export {
+  ivy,
+};

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

@@ -0,0 +1,234 @@
+/**
+ * @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 { CompilerHost } from '@angular/compiler-cli';
+import { createHash } from 'crypto';
+import * as path from 'path';
+import * as ts from 'typescript';
+import { NgccProcessor } from '../ngcc_processor';
+import { WebpackResourceLoader } from '../resource_loader';
+import { forwardSlashPath } from '../utils';
+
+export function augmentHostWithResources(
+  host: ts.CompilerHost,
+  resourceLoader: WebpackResourceLoader,
+  options: { directTemplateLoading?: boolean } = {},
+) {
+  const resourceHost = host as CompilerHost;
+
+  resourceHost.readResource = function (fileName: string) {
+    const filePath = forwardSlashPath(fileName);
+
+    if (
+      options.directTemplateLoading &&
+      (filePath.endsWith('.html') || filePath.endsWith('.svg'))
+    ) {
+      const content = this.readFile(filePath);
+      if (content === undefined) {
+        throw new Error('Unable to locate component resource: ' + fileName);
+      }
+
+      resourceLoader.setAffectedResources(filePath, [filePath]);
+
+      return content;
+    } else {
+      return resourceLoader.get(filePath);
+    }
+  };
+
+  resourceHost.resourceNameToFileName = function (resourceName: string, containingFile: string) {
+    return forwardSlashPath(path.join(path.dirname(containingFile), resourceName));
+  };
+
+  resourceHost.getModifiedResourceFiles = function () {
+    return resourceLoader.getModifiedResourceFiles();
+  };
+}
+
+function augmentResolveModuleNames(
+  host: ts.CompilerHost,
+  resolvedModuleModifier: (
+    resolvedModule: ts.ResolvedModule | undefined,
+    moduleName: string,
+  ) => ts.ResolvedModule | undefined,
+): void {
+  if (host.resolveModuleNames) {
+    const baseResolveModuleNames = host.resolveModuleNames;
+    host.resolveModuleNames = function (moduleNames: string[], ...parameters) {
+      return moduleNames.map((name) => {
+        const result = baseResolveModuleNames.call(host, [name], ...parameters);
+
+        return resolvedModuleModifier(result[0], name);
+      });
+    };
+  } else {
+    host.resolveModuleNames = function (
+      moduleNames: string[],
+      containingFile: string,
+      _reusedNames: string[] | undefined,
+      redirectedReference: ts.ResolvedProjectReference | undefined,
+      options: ts.CompilerOptions,
+    ) {
+      return moduleNames.map((name) => {
+        const result = ts.resolveModuleName(
+          name,
+          containingFile,
+          options,
+          host,
+          undefined,
+          redirectedReference,
+        ).resolvedModule;
+
+        return resolvedModuleModifier(result, name);
+      });
+    };
+  }
+}
+
+export function augmentHostWithNgcc(host: ts.CompilerHost, ngcc: NgccProcessor): void {
+  augmentResolveModuleNames(host, (resolvedModule, moduleName) => {
+    if (resolvedModule && ngcc) {
+      ngcc.processModule(moduleName, resolvedModule);
+    }
+
+    return resolvedModule;
+  });
+
+  if (host.resolveTypeReferenceDirectives) {
+    const baseResolveTypeReferenceDirectives = host.resolveTypeReferenceDirectives;
+    host.resolveTypeReferenceDirectives = function (names: string[], ...parameters) {
+      return names.map((name) => {
+        const result = baseResolveTypeReferenceDirectives.call(host, [name], ...parameters);
+
+        if (result[0] && ngcc) {
+          ngcc.processModule(name, result[0]);
+        }
+
+        return result[0];
+      });
+    };
+  } else {
+    host.resolveTypeReferenceDirectives = function (
+      moduleNames: string[],
+      containingFile: string,
+      redirectedReference: ts.ResolvedProjectReference | undefined,
+      options: ts.CompilerOptions,
+    ) {
+      return moduleNames.map((name) => {
+        const result = ts.resolveTypeReferenceDirective(
+          name,
+          containingFile,
+          options,
+          host,
+          redirectedReference,
+        ).resolvedTypeReferenceDirective;
+
+        if (result && ngcc) {
+          ngcc.processModule(name, result);
+        }
+
+        return result;
+      });
+    };
+  }
+}
+
+export function augmentHostWithReplacements(
+  host: ts.CompilerHost,
+  replacements: Record<string, string>,
+): void {
+  if (Object.keys(replacements).length === 0) {
+    return;
+  }
+
+  const tryReplace = (resolvedModule: ts.ResolvedModule | undefined) => {
+    const replacement = resolvedModule && replacements[resolvedModule.resolvedFileName];
+    if (replacement) {
+      return {
+        resolvedFileName: replacement,
+        isExternalLibraryImport: /[\/\\]node_modules[\/\\]/.test(replacement),
+      };
+    } else {
+      return resolvedModule;
+    }
+  };
+
+  augmentResolveModuleNames(host, tryReplace);
+}
+
+export function augmentHostWithSubstitutions(
+  host: ts.CompilerHost,
+  substitutions: Record<string, string>,
+): void {
+  const regexSubstitutions: [RegExp, string][] = [];
+  for (const [key, value] of Object.entries(substitutions)) {
+    regexSubstitutions.push([new RegExp(`\\b${key}\\b`, 'g'), value]);
+  }
+
+  if (regexSubstitutions.length === 0) {
+    return;
+  }
+
+  const baseReadFile = host.readFile;
+  host.readFile = function (...parameters) {
+    let file: string | undefined = baseReadFile.call(host, ...parameters);
+    if (file) {
+      for (const entry of regexSubstitutions) {
+        file = file.replace(entry[0], entry[1]);
+      }
+    }
+
+    return file;
+  };
+}
+
+export function augmentHostWithVersioning(host: ts.CompilerHost): void {
+  const baseGetSourceFile = host.getSourceFile;
+  host.getSourceFile = function (...parameters) {
+    const file = baseGetSourceFile.call(host, ...parameters);
+    if (file && file.version === undefined) {
+      file.version = createHash('sha256').update(file.text).digest('hex');
+    }
+
+    return file;
+  };
+}
+
+export function augmentHostWithCaching(
+  host: ts.CompilerHost,
+  cache: Map<string, ts.SourceFile>,
+): void {
+  const baseGetSourceFile = host.getSourceFile;
+  host.getSourceFile = function (
+    fileName,
+    languageVersion,
+    onError,
+    shouldCreateNewSourceFile,
+    // tslint:disable-next-line: trailing-comma
+    ...parameters
+  ) {
+    const normalizedFileName = forwardSlashPath(fileName);
+    if (!shouldCreateNewSourceFile && cache.has(normalizedFileName)) {
+      return cache.get(normalizedFileName);
+    }
+
+    const file = baseGetSourceFile.call(
+      host,
+      fileName,
+      languageVersion,
+      onError,
+      true,
+      ...parameters,
+    );
+    if (file && file.version === undefined) {
+      file.version = createHash('sha256').update(file.text).digest('hex');
+    }
+    cache.set(normalizedFileName, file);
+
+    return file;
+  };
+}

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

@@ -0,0 +1,11 @@
+/**
+ * @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
+ */
+export { angularWebpackLoader as default } from './loader';
+export { AngularPluginOptions, AngularWebpackPlugin } from './plugin';
+
+export const AngularWebpackLoaderPath = __filename;

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

@@ -0,0 +1,88 @@
+/**
+ * @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 { formatDiagnostics } from '@angular/compiler-cli';
+import * as path from 'path';
+import * as ts from 'typescript';
+import { AngularPluginSymbol, FileEmitter } from './symbol';
+
+export function angularWebpackLoader(
+  this: import('webpack').loader.LoaderContext,
+  content: string,
+  // Source map types are broken in the webpack type definitions
+  // tslint:disable-next-line: no-any
+  map: any,
+) {
+  if (this.loaderIndex !== this.loaders.length - 1) {
+    this.emitWarning('The Angular Webpack loader does not support chaining prior to the loader.');
+  }
+
+  const callback = this.async();
+  if (!callback) {
+    throw new Error('Invalid webpack version');
+  }
+
+  const emitFile = this._compilation[AngularPluginSymbol] as FileEmitter;
+  if (typeof emitFile !== 'function') {
+    if (this.resourcePath.endsWith('.js')) {
+      // Passthrough for JS files when no plugin is used
+      this.callback(undefined, content, map);
+
+      return;
+    }
+
+    callback(new Error('The Angular Webpack loader requires the AngularWebpackPlugin'));
+
+    return;
+  }
+
+  emitFile(this.resourcePath)
+    .then((result) => {
+      if (!result) {
+        if (this.resourcePath.endsWith('.js')) {
+          // Return original content for JS files if not compiled by TypeScript ("allowJs")
+          this.callback(undefined, content, map);
+        } else {
+          // File is not part of the compilation
+          const message =
+            `${this.resourcePath} is missing from the TypeScript compilation. ` +
+            `Please make sure it is in your tsconfig via the 'files' or 'include' property.`;
+          callback(new Error(message));
+        }
+
+        return;
+      }
+
+      for (const diagnostic of result.diagnostics) {
+        const text = formatDiagnostics([diagnostic]);
+        if (diagnostic.category === ts.DiagnosticCategory.Error) {
+          this.emitError(new Error(text));
+        } else {
+          this.emitWarning(text);
+        }
+      }
+
+      result.dependencies.forEach((dependency) => this.addDependency(dependency));
+
+      let resultContent = result.content || '';
+      let resultMap;
+      if (result.map) {
+        resultContent = resultContent.replace(/^\/\/# sourceMappingURL=[^\r\n]*/gm, '');
+        resultMap = JSON.parse(result.map);
+        resultMap.sources = resultMap.sources.map((source: string) =>
+          path.join(path.dirname(this.resourcePath), source),
+        );
+      }
+
+      callback(undefined, resultContent, resultMap);
+    })
+    .catch((err) => {
+      callback(err);
+    });
+}
+
+export { angularWebpackLoader as default };