build: enable esModuleInterop TypeScript option

clydin · clydin · commit b3d7080147f7 · 2021-06-13T11:45:55.000-04:00
The `esModuleInterop` option is recommended to be enable by TypeScript and corrects several assumptions TypeScript would otherwise make when importing CommonJS files. This option change helps ensure compatibility as packages move towards ESM. Reference: https://www.typescriptlang.org/tsconfig#esModuleInterop
diff --git a/packages/angular/cli/commands/doc-impl.ts b/packages/angular/cli/commands/doc-impl.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import * as open from 'open';
+import open from 'open';
 import { Command } from '../models/command';
 import { Arguments } from '../models/interface';
 import { Schema as DocCommandSchema } from './doc';
diff --git a/packages/angular/cli/models/analytics-collector.ts b/packages/angular/cli/models/analytics-collector.ts
@@ -8,7 +8,7 @@
 
 import { analytics } from '@angular-devkit/core';
 import { execSync } from 'child_process';
-import * as debug from 'debug';
+import debug from 'debug';
 import * as https from 'https';
 import * as os from 'os';
 import * as querystring from 'querystring';
diff --git a/packages/angular/cli/models/analytics.ts b/packages/angular/cli/models/analytics.ts
@@ -7,7 +7,7 @@
  */
 
 import { json, tags } from '@angular-devkit/core';
-import * as debug from 'debug';
+import debug from 'debug';
 import * as inquirer from 'inquirer';
 import { v4 as uuidV4 } from 'uuid';
 import { colors } from '../utilities/color';
@@ -298,9 +298,8 @@ export async function getWorkspaceAnalytics(): Promise<AnalyticsCollector | unde
   analyticsDebug('getWorkspaceAnalytics');
   try {
     const globalWorkspace = await getWorkspace('local');
-    const analyticsConfig: string | undefined | null | { uid?: string } = globalWorkspace?.getCli()[
-      'analytics'
-    ];
+    const analyticsConfig: string | undefined | null | { uid?: string } =
+      globalWorkspace?.getCli()['analytics'];
     analyticsDebug('Workspace Analytics config found: %j', analyticsConfig);
 
     if (analyticsConfig === false) {
diff --git a/packages/angular/cli/utilities/spinner.ts b/packages/angular/cli/utilities/spinner.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import * as ora from 'ora';
+import ora from 'ora';
 import { colors } from './color';
 
 export class Spinner {
diff --git a/packages/angular/pwa/pwa/index.ts b/packages/angular/pwa/pwa/index.ts
@@ -30,7 +30,7 @@ function updateIndexFile(path: string): Rule {
       throw new SchematicsException(`Could not read index file: ${path}`);
     }
 
-    const rewriter = new (await import('parse5-html-rewriting-stream'))();
+    const rewriter = new (await import('parse5-html-rewriting-stream')).default();
     let needsNoScript = true;
     rewriter.on('startTag', (startTag) => {
       if (startTag.tagName === 'noscript') {
diff --git a/packages/angular_devkit/architect/node/node-modules-architect-host.ts b/packages/angular_devkit/architect/node/node-modules-architect-host.ts
@@ -91,12 +91,12 @@ export class WorkspaceNodeModulesArchitectHost implements ArchitectHost<NodeModu
             throw new Error(`Project "${project}" does not exist.`);
           }
 
-          return ({
+          return {
             root: projectDefinition.root,
             sourceRoot: projectDefinition.sourceRoot,
             prefix: projectDefinition.prefix,
             ...(clone(projectDefinition.extensions) as {}),
-          } as unknown) as json.JsonObject;
+          } as unknown as json.JsonObject;
         },
         async hasTarget(project, target) {
           return !!workspaceOrHost.projects.get(project)?.targets.has(target);
@@ -201,6 +201,11 @@ export class WorkspaceNodeModulesArchitectHost implements ArchitectHost<NodeModu
       return builder;
     }
 
+    // Default handling code is for old builders that incorrectly export `default` with non-ESM module
+    if (builder?.default[BuilderSymbol]) {
+      return builder.default;
+    }
+
     throw new Error('Builder is not a builder');
   }
 }
diff --git a/packages/angular_devkit/architect_cli/bin/architect.ts b/packages/angular_devkit/architect_cli/bin/architect.ts
@@ -13,7 +13,7 @@ import { logging, schema, tags, workspaces } from '@angular-devkit/core';
 import { NodeJsSyncHost, createConsoleLogger } from '@angular-devkit/core/node';
 import * as ansiColors from 'ansi-colors';
 import { existsSync } from 'fs';
-import * as minimist from 'minimist';
+import minimist from 'minimist';
 import * as path from 'path';
 import { tap } from 'rxjs/operators';
 import { MultiProgressBar } from '../src/progress';
diff --git a/packages/angular_devkit/architect_cli/src/progress.ts b/packages/angular_devkit/architect_cli/src/progress.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import * as ProgressBar from 'progress';
+import ProgressBar from 'progress';
 import * as readline from 'readline';
 
 export class MultiProgressBar<Key, T> {
diff --git a/packages/angular_devkit/benchmark/src/main.ts b/packages/angular_devkit/benchmark/src/main.ts
@@ -11,7 +11,7 @@ import { logging, tags } from '@angular-devkit/core';
 import { ProcessOutput } from '@angular-devkit/core/node';
 import * as ansiColors from 'ansi-colors';
 import { appendFileSync, writeFileSync } from 'fs';
-import * as minimist from 'minimist';
+import minimist from 'minimist';
 import { filter, map, toArray } from 'rxjs/operators';
 import { Command } from '../src/command';
 import { defaultReporter } from '../src/default-reporter';
@@ -73,7 +73,7 @@ export async function main({
   }
 
   // Parse the command line.
-  const argv = (minimist(args, {
+  const argv = minimist(args, {
     boolean: ['help', 'verbose', 'overwrite-output-file'],
     string: ['watch-matcher', 'watch-script'],
     default: {
@@ -86,7 +86,7 @@ export async function main({
       'watch-timeout': 10000,
     },
     '--': true,
-  }) as {}) as BenchmarkCliArgv;
+  }) as {} as BenchmarkCliArgv;
 
   // Create the DevKit Logger used through the CLI.
   const logger = new logging.TransformLogger('benchmark-prefix-logger', (stream) =>
diff --git a/packages/angular_devkit/benchmark/src/monitored-process.ts b/packages/angular_devkit/benchmark/src/monitored-process.ts
@@ -7,7 +7,7 @@
  */
 
 import { SpawnOptions, spawn } from 'child_process';
-import * as pidusage from 'pidusage';
+import pidusage from 'pidusage';
 import { Observable, Subject, from, timer } from 'rxjs';
 import { concatMap, map, onErrorResumeNext, tap } from 'rxjs/operators';
 import { Command } from './command';
diff --git a/packages/angular_devkit/build_angular/src/app-shell/app-shell_spec.ts b/packages/angular_devkit/build_angular/src/app-shell/app-shell_spec.ts
@@ -8,7 +8,7 @@
 
 import { Architect } from '@angular-devkit/architect';
 import { getSystemPath, join, normalize, virtualFs } from '@angular-devkit/core';
-import * as express from 'express'; // eslint-disable-line import/no-extraneous-dependencies
+import express from 'express'; // eslint-disable-line import/no-extraneous-dependencies
 import * as http from 'http';
 import { AddressInfo } from 'net';
 import { createArchitect, host } from '../test-utils';
diff --git a/packages/angular_devkit/build_angular/src/browser/index.ts b/packages/angular_devkit/build_angular/src/browser/index.ts
@@ -14,7 +14,7 @@ import * as path from 'path';
 import { Observable, from } from 'rxjs';
 import { concatMap, map, switchMap } from 'rxjs/operators';
 import { ScriptTarget } from 'typescript';
-import * as webpack from 'webpack';
+import webpack from 'webpack';
 import { ExecutionTransformer } from '../transforms';
 import {
   BuildBrowserFeatures,
diff --git a/packages/angular_devkit/build_angular/src/dev-server/index.ts b/packages/angular_devkit/build_angular/src/dev-server/index.ts
@@ -18,8 +18,8 @@ import { Observable, from } from 'rxjs';
 import { concatMap, switchMap } from 'rxjs/operators';
 import * as ts from 'typescript';
 import * as url from 'url';
-import * as webpack from 'webpack';
-import * as webpackDevServer from 'webpack-dev-server';
+import webpack from 'webpack';
+import webpackDevServer from 'webpack-dev-server';
 import { Schema as BrowserBuilderSchema, OutputHashing } from '../browser/schema';
 import { ExecutionTransformer } from '../transforms';
 import { BuildBrowserFeatures, normalizeOptimization } from '../utils';
@@ -362,7 +362,7 @@ export function serveWebpackBrowser(
             );
 
             if (options.open) {
-              const open = await import('open');
+              const open = (await import('open')).default;
               await open(serverAddress);
             }
           }
diff --git a/packages/angular_devkit/build_angular/src/extract-i18n/index.ts b/packages/angular_devkit/build_angular/src/extract-i18n/index.ts
@@ -13,7 +13,7 @@ import type { ɵParsedMessage as LocalizeMessage } from '@angular/localize';
 import type { Diagnostics } from '@angular/localize/src/tools/src/diagnostics';
 import * as fs from 'fs';
 import * as path from 'path';
-import * as webpack from 'webpack';
+import webpack from 'webpack';
 import { Schema as BrowserBuilderOptions, OutputHashing } from '../browser/schema';
 import { ExecutionTransformer } from '../transforms';
 import { createI18nOptions } from '../utils/i18n-options';
diff --git a/packages/angular_devkit/build_angular/src/server/index.ts b/packages/angular_devkit/build_angular/src/server/index.ts
@@ -13,7 +13,7 @@ import * as path from 'path';
 import { Observable, from } from 'rxjs';
 import { concatMap, map } from 'rxjs/operators';
 import { ScriptTarget } from 'typescript';
-import * as webpack from 'webpack';
+import webpack from 'webpack';
 import { ExecutionTransformer } from '../transforms';
 import { NormalizedBrowserBuilderSchema, deleteOutputDir } from '../utils';
 import { i18nInlineEmittedFiles } from '../utils/i18n-inlining';
diff --git a/packages/angular_devkit/build_angular/src/utils/build-browser-features.ts b/packages/angular_devkit/build_angular/src/utils/build-browser-features.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import * as browserslist from 'browserslist';
+import browserslist from 'browserslist';
 import { feature, features } from 'caniuse-lite';
 import * as ts from 'typescript';
 
diff --git a/packages/angular_devkit/build_angular/src/utils/cache-path.ts b/packages/angular_devkit/build_angular/src/utils/cache-path.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import * as findCacheDirectory from 'find-cache-dir';
+import findCacheDirectory from 'find-cache-dir';
 import { tmpdir } from 'os';
 import { resolve } from 'path';
 import { cachingBasePath } from './environment-options';
diff --git a/packages/angular_devkit/build_angular/src/utils/copy-assets.ts b/packages/angular_devkit/build_angular/src/utils/copy-assets.ts
@@ -7,7 +7,7 @@
  */
 
 import * as fs from 'fs';
-import * as glob from 'glob';
+import glob from 'glob';
 import * as path from 'path';
 import { copyFile } from './copy-file';
 
diff --git a/packages/angular_devkit/build_angular/src/utils/index-file/html-rewriting-stream.ts b/packages/angular_devkit/build_angular/src/utils/index-file/html-rewriting-stream.ts
@@ -8,14 +8,12 @@
 
 import { Readable, Writable } from 'stream';
 
-export async function htmlRewritingStream(
-  content: string,
-): Promise<{
+export async function htmlRewritingStream(content: string): Promise<{
   rewriter: import('parse5-html-rewriting-stream');
   transformedContent: Promise<string>;
 }> {
   const chunks: Buffer[] = [];
-  const rewriter = new (await import('parse5-html-rewriting-stream'))();
+  const rewriter = new (await import('parse5-html-rewriting-stream')).default();
 
   return {
     rewriter,
diff --git a/packages/angular_devkit/build_angular/src/utils/index-file/inline-fonts.ts b/packages/angular_devkit/build_angular/src/utils/index-file/inline-fonts.ts
@@ -9,7 +9,7 @@
 import * as cacache from 'cacache';
 import * as fs from 'fs';
 import * as https from 'https';
-import * as proxyAgent from 'https-proxy-agent';
+import proxyAgent from 'https-proxy-agent';
 import { URL } from 'url';
 import { findCachePath } from '../cache-path';
 import { cachingDisabled } from '../environment-options';
diff --git a/packages/angular_devkit/build_angular/src/utils/spinner.ts b/packages/angular_devkit/build_angular/src/utils/spinner.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import * as ora from 'ora';
+import ora from 'ora';
 import { colors } from './color';
 import { isTTY } from './tty';
 
diff --git a/packages/angular_devkit/build_angular/src/webpack/configs/common.ts b/packages/angular_devkit/build_angular/src/webpack/configs/common.ts
@@ -15,7 +15,7 @@ import {
   GLOBAL_DEFS_FOR_TERSER_WITH_AOT,
   VERSION as NG_VERSION,
 } from '@angular/compiler-cli';
-import * as CopyWebpackPlugin from 'copy-webpack-plugin';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
 import { createHash } from 'crypto';
 import { createWriteStream, existsSync, promises as fsPromises } from 'fs';
 import * as path from 'path';
diff --git a/packages/angular_devkit/build_angular/src/webpack/plugins/karma/karma.ts b/packages/angular_devkit/build_angular/src/webpack/plugins/karma/karma.ts
@@ -11,7 +11,7 @@
 import * as http from 'http';
 import * as path from 'path';
 import * as glob from 'glob';
-import * as webpack from 'webpack';
+import webpack from 'webpack';
 const webpackDevMiddleware = require('webpack-dev-middleware');
 
 import { statsErrorsToString } from '../../utils/stats';
diff --git a/packages/angular_devkit/build_angular/src/webpack/utils/stats.ts b/packages/angular_devkit/build_angular/src/webpack/utils/stats.ts
@@ -9,7 +9,7 @@
 import { WebpackLoggingCallback } from '@angular-devkit/build-webpack';
 import { logging, tags } from '@angular-devkit/core';
 import * as path from 'path';
-import * as textTable from 'text-table';
+import textTable from 'text-table';
 import { Configuration, StatsCompilation } from 'webpack';
 import { Schema as BrowserBuilderOptions } from '../../browser/schema';
 import { colors as ansiColors, removeColor } from '../../utils/color';
diff --git a/packages/angular_devkit/build_webpack/src/webpack-dev-server/index.ts b/packages/angular_devkit/build_webpack/src/webpack-dev-server/index.ts
@@ -11,8 +11,8 @@ import * as net from 'net';
 import { resolve as pathResolve } from 'path';
 import { Observable, from, isObservable, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
-import * as webpack from 'webpack';
-import * as WebpackDevServer from 'webpack-dev-server';
+import webpack from 'webpack';
+import WebpackDevServer from 'webpack-dev-server';
 import { getEmittedFiles } from '../utils';
 import { BuildResult, WebpackFactory, WebpackLoggingCallback } from '../webpack';
 import { Schema as WebpackDevServerBuilderSchema } from './schema';
@@ -85,12 +85,12 @@ export function runWebpackDevServer(
             // Log stats.
             log(stats, config);
 
-            obs.next(({
+            obs.next({
               ...result,
               emittedFiles: getEmittedFiles(stats.compilation),
               success: !stats.hasErrors(),
               outputPath: stats.compilation.outputOptions.path,
-            } as unknown) as DevServerBuildOutput);
+            } as unknown as DevServerBuildOutput);
           });
 
           server.listen(
@@ -132,7 +132,9 @@ export default createBuilder<WebpackDevServerBuilderSchema, DevServerBuildOutput
     const configPath = pathResolve(context.workspaceRoot, options.webpackConfig);
 
     return from(import(configPath)).pipe(
-      switchMap((config: webpack.Configuration) => runWebpackDevServer(config, context)),
+      switchMap(({ default: config }: { default: webpack.Configuration }) =>
+        runWebpackDevServer(config, context),
+      ),
     );
   },
 );
diff --git a/packages/angular_devkit/build_webpack/src/webpack/index.ts b/packages/angular_devkit/build_webpack/src/webpack/index.ts
@@ -10,7 +10,7 @@ import { BuilderContext, BuilderOutput, createBuilder } from '@angular-devkit/ar
 import { resolve as pathResolve } from 'path';
 import { Observable, from, isObservable, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
-import * as webpack from 'webpack';
+import webpack from 'webpack';
 import { EmittedFiles, getEmittedFiles } from '../utils';
 import { Schema as RealWebpackBuilderSchema } from './schema';
 
@@ -115,6 +115,8 @@ export default createBuilder<WebpackBuilderSchema>((options, context) => {
   const configPath = pathResolve(context.workspaceRoot, options.webpackConfig);
 
   return from(import(configPath)).pipe(
-    switchMap((config: webpack.Configuration) => runWebpack(config, context)),
+    switchMap(({ default: config }: { default: webpack.Configuration }) =>
+      runWebpack(config, context),
+    ),
   );
 });
diff --git a/packages/angular_devkit/schematics/tasks/package-manager/executor.ts b/packages/angular_devkit/schematics/tasks/package-manager/executor.ts
@@ -8,7 +8,7 @@
 
 import { BaseException } from '@angular-devkit/core';
 import { SpawnOptions, spawn } from 'child_process';
-import * as ora from 'ora';
+import ora from 'ora';
 import * as path from 'path';
 import { Observable } from 'rxjs';
 import { TaskExecutor, UnsuccessfulWorkflowExecution } from '../../src';
diff --git a/packages/angular_devkit/schematics/tools/file-system-engine-host.ts b/packages/angular_devkit/schematics/tools/file-system-engine-host.ts
@@ -105,7 +105,8 @@ export class FileSystemEngineHost extends FileSystemEngineHostBase {
       try {
         const path = require.resolve(join(this._root, name));
 
-        return from(import(path).then((mod) => mod.default())).pipe(
+        // Default handling code is for old tasks that incorrectly export `default` with non-ESM module
+        return from(import(path).then((mod) => (mod.default?.default || mod.default)())).pipe(
           catchError(() => throwError(new UnregisteredTaskException(name))),
         );
       } catch {}
diff --git a/packages/angular_devkit/schematics_cli/bin/schematics.ts b/packages/angular_devkit/schematics_cli/bin/schematics.ts
@@ -15,7 +15,7 @@ import { UnsuccessfulWorkflowExecution } from '@angular-devkit/schematics';
 import { NodeWorkflow } from '@angular-devkit/schematics/tools';
 import * as ansiColors from 'ansi-colors';
 import * as inquirer from 'inquirer';
-import * as minimist from 'minimist';
+import minimist from 'minimist';
 
 /**
  * Parse the name of schematic passed in argument, and return a {collection, schematic} named
diff --git a/packages/schematics/angular/migrations/update-10/remove-es5-browser-support.ts b/packages/schematics/angular/migrations/update-10/remove-es5-browser-support.ts
@@ -113,7 +113,7 @@ async function isES5SupportNeeded(projectRoot: Path): Promise<boolean | undefine
 
   try {
     // eslint-disable-next-line import/no-extraneous-dependencies
-    const browserslist = await import('browserslist');
+    const browserslist = (await import('browserslist')).default;
     const supportedBrowsers = browserslist(undefined, {
       path: getSystemPath(projectRoot),
     });
diff --git a/scripts/build-schema.ts b/scripts/build-schema.ts
@@ -8,7 +8,7 @@
 
 import { logging } from '@angular-devkit/core';
 import * as fs from 'fs';
-import * as glob from 'glob';
+import glob from 'glob';
 import * as path from 'path';
 
 export default async function (argv: {}, logger: logging.Logger) {
diff --git a/scripts/build.ts b/scripts/build.ts
@@ -9,7 +9,7 @@
 import { JsonObject, logging } from '@angular-devkit/core';
 import * as child_process from 'child_process';
 import * as fs from 'fs';
-import * as glob from 'glob';
+import glob from 'glob';
 import * as path from 'path';
 import { packages } from '../lib/packages';
 import buildSchema from './build-schema';
diff --git a/scripts/test.ts b/scripts/test.ts
diff --git a/tests/legacy-cli/e2e/tests/i18n/ivy-localize-server.ts b/tests/legacy-cli/e2e/tests/i18n/ivy-localize-server.ts
diff --git a/tests/legacy-cli/e2e/tests/i18n/ivy-localize-serviceworker.ts b/tests/legacy-cli/e2e/tests/i18n/ivy-localize-serviceworker.ts
diff --git a/tests/legacy-cli/e2e/tests/i18n/setup.ts b/tests/legacy-cli/e2e/tests/i18n/setup.ts
diff --git a/tests/legacy-cli/e2e/tests/misc/browsers.ts b/tests/legacy-cli/e2e/tests/misc/browsers.ts
diff --git a/tests/legacy-cli/e2e/tests/misc/proxy-config.ts b/tests/legacy-cli/e2e/tests/misc/proxy-config.ts
diff --git a/tests/legacy-cli/e2e/tests/misc/public-host.ts b/tests/legacy-cli/e2e/tests/misc/public-host.ts
diff --git a/tests/legacy-cli/e2e/utils/assets.ts b/tests/legacy-cli/e2e/utils/assets.ts
diff --git a/tests/legacy-cli/e2e/utils/http.ts b/tests/legacy-cli/e2e/utils/http.ts
diff --git a/tests/legacy-cli/e2e_runner.ts b/tests/legacy-cli/e2e_runner.ts
diff --git a/tsconfig.json b/tsconfig.json

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ function updateIndexFile(path: string): Rule {`
`30`	`30`	throw new SchematicsException(`Could not read index file: ${path}`);
`31`	`31`	`}`
`32`	`32`
`33`		`- const rewriter = new (await import('parse5-html-rewriting-stream'))();`
	`33`	`+ const rewriter = new (await import('parse5-html-rewriting-stream')).default();`
`34`	`34`	`let needsNoScript = true;`
`35`	`35`	`rewriter.on('startTag', (startTag) => {`
`36`	`36`	`if (startTag.tagName === 'noscript') {`
Original file line number	Diff line number	Diff line change
`@@ -91,12 +91,12 @@ export class WorkspaceNodeModulesArchitectHost implements ArchitectHost<NodeModu`
`91`	`91`	throw new Error(`Project "${project}" does not exist.`);
`92`	`92`	`}`
`93`	`93`
`94`		`- return ({`
	`94`	`+ return {`
`95`	`95`	`root: projectDefinition.root,`
`96`	`96`	`sourceRoot: projectDefinition.sourceRoot,`
`97`	`97`	`prefix: projectDefinition.prefix,`
`98`	`98`	`...(clone(projectDefinition.extensions) as {}),`
`99`		`- } as unknown) as json.JsonObject;`
	`99`	`+ } as unknown as json.JsonObject;`
`100`	`100`	`},`
`101`	`101`	`async hasTarget(project, target) {`
`102`	`102`	`return !!workspaceOrHost.projects.get(project)?.targets.has(target);`
`@@ -201,6 +201,11 @@ export class WorkspaceNodeModulesArchitectHost implements ArchitectHost<NodeModu`
`201`	`201`	`return builder;`
`202`	`202`	`}`
`203`	`203`
	`204`	+ // Default handling code is for old builders that incorrectly export `default` with non-ESM module
	`205`	`+ if (builder?.default[BuilderSymbol]) {`
	`206`	`+ return builder.default;`
	`207`	`+ }`
	`208`	`+`
`204`	`209`	`throw new Error('Builder is not a builder');`
`205`	`210`	`}`
`206`	`211`	`}`