build: enable esModuleInterop TypeScript option

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

Author: clydin

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