build: enable esModuleInterop TypeScript option

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';

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';

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) {

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 {

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') {

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

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';

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> {

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) =>

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';

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';

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,

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

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';

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';

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';
 

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';

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';
 

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,

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';

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';
 

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';

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';

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';

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

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

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';

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 {}

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

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

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) {

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';