refactor(@angular-devkit/build-angular): support an ESM-only @angular/compiler-cli package

This uses a dynamic import to load `@angular/compiler-cli` which may be ESM. CommonJS code can load ESM code via a dynamic import. Unfortunately, TypeScript will currently, unconditionally downlevel dynamic import into a require call. require calls cannot load ESM code and will result in a runtime error. To workaround this, a Function constructor is used to prevent TypeScript from changing the dynamic import. Once TypeScript provides support for keeping the dynamic import this workaround can be dropped and replaced with a standard dynamic import.

Author: clydin

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

@@ -161,7 +161,7 @@ export async function configureI18nBuild<T extends BrowserBuilderSchema | Server
   }
 
   const buildOptions = { ...options };
-  const tsConfig = readTsconfig(buildOptions.tsConfig, context.workspaceRoot);
+  const tsConfig = await readTsconfig(buildOptions.tsConfig, context.workspaceRoot);
   const metadata = await context.getProjectMetadata(context.target);
   const i18n = createI18nOptions(metadata, buildOptions.localize);
 

packages/angular_devkit/build_angular/src/utils/read-tsconfig.ts

@@ -16,16 +16,28 @@ import * as path from 'path';
  * @param workspaceRoot - workspaceRoot root location when provided
  * it will resolve 'tsconfigPath' from this path.
  */
-export function readTsconfig(tsconfigPath: string, workspaceRoot?: string): ParsedConfiguration {
+export async function readTsconfig(
+  tsconfigPath: string,
+  workspaceRoot?: string,
+): Promise<ParsedConfiguration> {
   const tsConfigFullPath = workspaceRoot ? path.resolve(workspaceRoot, tsconfigPath) : tsconfigPath;
 
-  // We use 'ng' instead of 'ts' here because 'ts' is not aware of 'angularCompilerOptions'
-  // and will not merged them if they are at un upper level tsconfig file when using `extends`.
-  const ng: typeof import('@angular/compiler-cli') = require('@angular/compiler-cli');
+  // This uses a dynamic import to load `@angular/compiler-cli` which may be ESM.
+  // CommonJS code can load ESM code via a dynamic import. Unfortunately, TypeScript
+  // will currently, unconditionally downlevel dynamic import into a require call.
+  // require calls cannot load ESM code and will result in a runtime error. To workaround
+  // this, a Function constructor is used to prevent TypeScript from changing the dynamic import.
+  // Once TypeScript provides support for keeping the dynamic import this workaround can
+  // be dropped.
+  const compilerCliModule = await new Function(`return import('@angular/compiler-cli');`)();
+  // If it is not ESM then the functions needed will be stored in the `default` property.
+  const { formatDiagnostics, readConfiguration } = (
+    compilerCliModule.readConfiguration ? compilerCliModule : compilerCliModule.default
+  ) as typeof import('@angular/compiler-cli');
 
-  const configResult = ng.readConfiguration(tsConfigFullPath);
+  const configResult = readConfiguration(tsConfigFullPath);
   if (configResult.errors && configResult.errors.length) {
-    throw new Error(ng.formatDiagnostics(configResult.errors));
+    throw new Error(formatDiagnostics(configResult.errors));
   }
 
   return configResult;

packages/angular_devkit/build_angular/src/utils/webpack-browser-config.ts

@@ -40,7 +40,7 @@ export async function generateWebpackConfig(
   }
 
   const tsConfigPath = path.resolve(workspaceRoot, options.tsConfig);
-  const tsConfig = readTsconfig(tsConfigPath);
+  const tsConfig = await readTsconfig(tsConfigPath);
 
   const ts = await import('typescript');
   const scriptTarget = tsConfig.options.target || ts.ScriptTarget.ES5;

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

@@ -6,11 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {
-  GLOBAL_DEFS_FOR_TERSER,
-  GLOBAL_DEFS_FOR_TERSER_WITH_AOT,
-  VERSION as NG_VERSION,
-} from '@angular/compiler-cli';
 import CopyWebpackPlugin, { ObjectPattern } from 'copy-webpack-plugin';
 import { createHash } from 'crypto';
 import { createWriteStream, existsSync, promises as fsPromises } from 'fs';
@@ -42,7 +37,7 @@ import { JavaScriptOptimizerPlugin } from '../plugins/javascript-optimizer-plugi
 import { getOutputHashFormat, getWatchOptions, normalizeExtraEntryPoints } from '../utils/helpers';
 
 // eslint-disable-next-line max-lines-per-function
-export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
+export async function getCommonConfig(wco: WebpackConfigOptions): Promise<Configuration> {
   const { root, projectRoot, buildOptions, tsConfig } = wco;
   const {
     platform = 'browser',
@@ -54,6 +49,23 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
   const extraRules: RuleSetRule[] = [];
   const entryPoints: { [key: string]: [string, ...string[]] } = {};
 
+  // This uses a dynamic import to load `@angular/compiler-cli` which may be ESM.
+  // CommonJS code can load ESM code via a dynamic import. Unfortunately, TypeScript
+  // will currently, unconditionally downlevel dynamic import into a require call.
+  // require calls cannot load ESM code and will result in a runtime error. To workaround
+  // this, a Function constructor is used to prevent TypeScript from changing the dynamic import.
+  // Once TypeScript provides support for keeping the dynamic import this workaround can
+  // be dropped.
+  const compilerCliModule = await new Function(`return import('@angular/compiler-cli');`)();
+  // If it is not ESM then the values needed will be stored in the `default` property.
+  const {
+    GLOBAL_DEFS_FOR_TERSER,
+    GLOBAL_DEFS_FOR_TERSER_WITH_AOT,
+    VERSION: NG_VERSION,
+  } = (
+    compilerCliModule.GLOBAL_DEFS_FOR_TERSER ? compilerCliModule : compilerCliModule.default
+  ) as typeof import('@angular/compiler-cli');
+
   // determine hashing format
   const hashFormat = getOutputHashFormat(buildOptions.outputHashing || 'none');
   const buildBrowserFeatures = new BuildBrowserFeatures(projectRoot);
@@ -393,7 +405,7 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
     infrastructureLogging: {
       level: buildOptions.verbose ? 'verbose' : 'error',
     },
-    cache: getCacheSettings(wco, buildBrowserFeatures.supportedBrowsers),
+    cache: getCacheSettings(wco, buildBrowserFeatures.supportedBrowsers, NG_VERSION.full),
     optimization: {
       minimizer: extraMinimizers,
       moduleIds: 'deterministic',
@@ -417,6 +429,7 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
 function getCacheSettings(
   wco: WebpackConfigOptions,
   supportedBrowsers: string[],
+  angularVersion: string,
 ): WebpackOptionsNormalized['cache'] {
   if (persistentBuildCacheEnabled) {
     const packageVersion = require('../../../package.json').version;
@@ -429,7 +442,7 @@ function getCacheSettings(
       // dynamic and shared among different build types: test, build and serve.
       // None of which are "named".
       name: createHash('sha1')
-        .update(NG_VERSION.full)
+        .update(angularVersion)
         .update(packageVersion)
         .update(wco.projectRoot)
         .update(JSON.stringify(wco.tsConfig))