From ff736e67d78b23ccb529bf068b01d71a08bac09b Mon Sep 17 00:00:00 2001 From: Charles Lyding <19598772+clydin@users.noreply.github.com> Date: Fri, 11 Jun 2021 11:29:41 -0400 Subject: [PATCH] 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 --- packages/angular/cli/commands/doc-impl.ts | 2 +- .../angular/cli/models/analytics-collector.ts | 2 +- packages/angular/cli/models/analytics.ts | 7 +- packages/angular/cli/utilities/spinner.ts | 2 +- packages/angular/pwa/pwa/index.ts | 2 +- .../node/node-modules-architect-host.ts | 9 +- .../architect_cli/bin/architect.ts | 2 +- .../architect_cli/src/progress.ts | 2 +- packages/angular_devkit/benchmark/src/main.ts | 6 +- .../benchmark/src/monitored-process.ts | 2 +- .../src/app-shell/app-shell_spec.ts | 2 +- .../build_angular/src/browser/index.ts | 2 +- .../build_angular/src/dev-server/index.ts | 6 +- .../build_angular/src/extract-i18n/index.ts | 2 +- .../build_angular/src/server/index.ts | 2 +- .../src/utils/build-browser-features.ts | 2 +- .../build_angular/src/utils/cache-path.ts | 2 +- .../build_angular/src/utils/copy-assets.ts | 2 +- .../utils/index-file/html-rewriting-stream.ts | 6 +- .../src/utils/index-file/inline-fonts.ts | 2 +- .../build_angular/src/utils/spinner.ts | 2 +- .../src/webpack/configs/common.ts | 2 +- .../src/webpack/plugins/karma/karma.ts | 2 +- .../build_angular/src/webpack/utils/stats.ts | 2 +- .../src/webpack-dev-server/index.ts | 12 +- .../build_webpack/src/webpack/index.ts | 6 +- .../tasks/package-manager/executor.ts | 2 +- .../tools/file-system-engine-host.ts | 3 +- .../schematics_cli/bin/schematics.ts | 2 +- .../update-10/remove-es5-browser-support.ts | 2 +- scripts/build-schema.ts | 2 +- scripts/build.ts | 2 +- scripts/test.ts | 2 +- .../e2e/tests/i18n/ivy-localize-server.ts | 10 +- .../tests/i18n/ivy-localize-serviceworker.ts | 8 +- tests/legacy-cli/e2e/tests/i18n/setup.ts | 82 +++++++----- tests/legacy-cli/e2e/tests/misc/browsers.ts | 15 +-- .../legacy-cli/e2e/tests/misc/proxy-config.ts | 102 +++++++------- .../legacy-cli/e2e/tests/misc/public-host.ts | 124 +++++++++++------- tests/legacy-cli/e2e/utils/assets.ts | 2 +- tests/legacy-cli/e2e/utils/http.ts | 7 +- tests/legacy-cli/e2e_runner.ts | 50 +++---- tsconfig.json | 1 + 43 files changed, 280 insertions(+), 226 deletions(-) diff --git a/packages/angular/cli/commands/doc-impl.ts b/packages/angular/cli/commands/doc-impl.ts index 6837add727e9..b39665b68abe 100644 --- 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 index da775363f34f..6754d5037059 100644 --- 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 index e3ab53593f6f..1c9185d95c61 100644 --- 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 { 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 index 50180b29ba0c..40ec3c4a9f3f 100644 --- 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 { diff --git a/packages/angular_devkit/benchmark/src/main.ts b/packages/angular_devkit/benchmark/src/main.ts index c9af80f169f2..25cf40ae71ec 100644 --- 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 index 35b5fffb4651..7a303b541e7f 100644 --- 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 index 2ce75a3166ff..975c87d6dbfb 100644 --- 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 index e27b78da3d5b..160dc7ca02af 100644 --- 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 index c736d8041db0..7ecc1b8e516b 100644 --- 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 index d50188c346fc..02fd75210770 100644 --- 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 index dc33a2deed24..b167b3b7a8d9 100644 --- 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 index fb5e8d095390..3be2a093fb05 100644 --- 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 index 6738ea01e167..26dfd13ac7fa 100644 --- 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 index ece6ade43d05..28a5b2cf9014 100644 --- 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 index 66e5d11c16e1..679b238a8ec7 100644 --- 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; }> { 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 index 219f3a9bd7b2..13dc064462b0 100644 --- 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 index 93fb042dcbb7..4a0e3deb587a 100644 --- 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 index 5f46eaa6e354..c62c099a4c8d 100644 --- 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 index f273348de9ef..ce24f7cf9fca 100644 --- 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 index 7d6ee2ea933c..5d49c2198dcf 100644 --- 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 index 9356e93221dd..bea3c99be376 100644 --- 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 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 index f8bcb7281fc1..8749e1237d0d 100644 --- 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((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 index 3886d960f301..6a4f83f18c98 100644 --- 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 index fc109f1926a5..e98992648695 100644 --- 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 index 186a1e302d00..806afff2d2b4 100644 --- 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 index 472adaa4c7da..68c827d59df4 100644 --- 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 { + await updateJsonFile('package.json', (packageJson) => { const dependencies = packageJson['dependencies']; dependencies['@angular/platform-server'] = snapshots.dependencies['@angular/platform-server']; }); @@ -34,7 +34,7 @@ export default async function () { const serverBuildArgs = ['run', 'test-project:server']; // Add server-specific config. - await updateJsonFile('angular.json', workspaceJson => { + await updateJsonFile('angular.json', (workspaceJson) => { const appProject = workspaceJson.projects['test-project']; const appArchitect = appProject.architect || appProject.targets; const serverOptions = appArchitect['server'].options; @@ -110,7 +110,9 @@ export default async function () { // Run the server const serverBundle = join(process.cwd(), `${serverbaseDir}/${lang}/main.js`); - const { i18nApp } = await import(serverBundle) as { i18nApp(locale: string): express.Express }; + const { i18nApp } = (await import(serverBundle)) as { + i18nApp(locale: string): express.Express; + }; const server = i18nApp(lang).listen(4200, 'localhost'); try { // Execute without a devserver. diff --git a/tests/legacy-cli/e2e/tests/i18n/ivy-localize-serviceworker.ts b/tests/legacy-cli/e2e/tests/i18n/ivy-localize-serviceworker.ts index 2402d2ed90cc..dfb32d768289 100644 --- a/tests/legacy-cli/e2e/tests/i18n/ivy-localize-serviceworker.ts +++ b/tests/legacy-cli/e2e/tests/i18n/ivy-localize-serviceworker.ts @@ -1,4 +1,4 @@ -import * as express from 'express'; +import express from 'express'; import { resolve } from 'path'; import { getGlobalVariable } from '../../utils/env'; import { @@ -14,7 +14,7 @@ import { updateJsonFile } from '../../utils/project'; import { expectToFail } from '../../utils/utils'; import { readNgVersion } from '../../utils/version'; -export default async function() { +export default async function () { // TEMP: disable pending i18n updates // TODO: when re-enabling, use setupI18nConfig and helpers like other i18n tests. return; @@ -33,7 +33,7 @@ export default async function() { } await installPackage(serviceWorkerVersion); - await updateJsonFile('tsconfig.json', config => { + await updateJsonFile('tsconfig.json', (config) => { config.compilerOptions.target = 'es2015'; if (!config.angularCompilerOptions) { config.angularCompilerOptions = {}; @@ -49,7 +49,7 @@ export default async function() { { lang: 'fr', translation: 'Bonjour i18n!' }, ]; - await updateJsonFile('angular.json', workspaceJson => { + await updateJsonFile('angular.json', (workspaceJson) => { const appProject = workspaceJson.projects['test-project']; const appArchitect = appProject.architect || appProject.targets; const serveConfigs = appArchitect['serve'].configurations; diff --git a/tests/legacy-cli/e2e/tests/i18n/setup.ts b/tests/legacy-cli/e2e/tests/i18n/setup.ts index efc957412df5..bca561214027 100644 --- a/tests/legacy-cli/e2e/tests/i18n/setup.ts +++ b/tests/legacy-cli/e2e/tests/i18n/setup.ts @@ -1,7 +1,14 @@ -import * as express from 'express'; +import express from 'express'; import { resolve } from 'path'; import { getGlobalVariable } from '../../utils/env'; -import { appendToFile, copyFile, expectFileToExist, expectFileToMatch, replaceInFile, writeFile } from '../../utils/fs'; +import { + appendToFile, + copyFile, + expectFileToExist, + expectFileToMatch, + replaceInFile, + writeFile, +} from '../../utils/fs'; import { installPackage } from '../../utils/packages'; import { ng } from '../../utils/process'; import { updateJsonFile } from '../../utils/project'; @@ -12,7 +19,8 @@ import { readNgVersion } from '../../utils/version'; export const baseDir = 'dist/test-project'; export const langTranslations = [ { - lang: 'en-US', outputPath: `${baseDir}/en-US`, + lang: 'en-US', + outputPath: `${baseDir}/en-US`, translation: { helloPartial: 'Hello', hello: 'Hello i18n!', @@ -21,7 +29,8 @@ export const langTranslations = [ }, }, { - lang: 'fr', outputPath: `${baseDir}/fr`, + lang: 'fr', + outputPath: `${baseDir}/fr`, translation: { helloPartial: 'Bonjour', hello: 'Bonjour i18n!', @@ -38,7 +47,8 @@ export const langTranslations = [ ], }, { - lang: 'de', outputPath: `${baseDir}/de`, + lang: 'de', + outputPath: `${baseDir}/de`, translation: { helloPartial: 'Hallo', hello: 'Hallo i18n!', @@ -69,16 +79,12 @@ export const formats = { 'xlf': { ext: 'xlf', sourceCheck: 'source-language="en-US"', - replacements: [ - [/source/g, 'target'], - ], + replacements: [[/source/g, 'target']], }, 'xlf2': { ext: 'xlf', sourceCheck: 'srcLang="en-US"', - replacements: [ - [/source/g, 'target'], - ], + replacements: [[/source/g, 'target']], }, 'xmb': { ext: 'xmb', @@ -92,20 +98,20 @@ export const formats = { 'json': { ext: 'json', sourceCheck: '"locale": "en-US"', - replacements: [ - ], + replacements: [], }, 'arb': { ext: 'arb', sourceCheck: '"@@locale": "en-US"', - replacements: [ - ], + replacements: [], }, }; export async function setupI18nConfig(format: keyof typeof formats = 'xlf') { // Add component with i18n content, both translations and localeData (plural, dates). - await writeFile('src/app/app.component.ts', ` + await writeFile( + 'src/app/app.component.ts', + ` import { Component, Inject, LOCALE_ID } from '@angular/core'; @Component({ selector: 'app-root', @@ -117,24 +123,33 @@ export async function setupI18nConfig(format: keyof typeof formats = 'xlf') { jan = new Date(2000, 0, 1); minutes = 3; } - `); - await writeFile(`src/app/app.component.html`, ` + `, + ); + await writeFile( + `src/app/app.component.html`, + `

Hello {{ title }}!

{{ locale }}

{{ jan | date : 'LLLL' }}

Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}

- `); + `, + ); // Add a dynamic import to ensure syntax is supported // ng serve support: https://github.com/angular/angular-cli/issues/16248 await writeFile('src/app/dynamic.ts', `export const abc = 5;`); - await appendToFile('src/app/app.component.ts', ` + await appendToFile( + 'src/app/app.component.ts', + ` (async () => { await import('./dynamic'); })(); - `); + `, + ); // Add e2e specs for each lang. for (const { lang, translation } of langTranslations) { - await writeFile(`./e2e/src/app.${lang}.e2e-spec.ts`, ` + await writeFile( + `./e2e/src/app.${lang}.e2e-spec.ts`, + ` import { browser, logging, element, by } from 'protractor'; describe('workspace-project App', () => { @@ -160,11 +175,12 @@ export async function setupI18nConfig(format: keyof typeof formats = 'xlf') { it('should display pluralized message', async () => expect(await getParagraph('plural')).toEqual('${translation.plural}')); }); - `); + `, + ); } // Update angular.json to build, serve, and test each locale. - await updateJsonFile('angular.json', workspaceJson => { + await updateJsonFile('angular.json', (workspaceJson) => { const appProject = workspaceJson.projects['test-project']; const appArchitect = workspaceJson.projects['test-project'].architect; const buildConfigs = appArchitect['build'].configurations; @@ -177,10 +193,12 @@ export async function setupI18nConfig(format: keyof typeof formats = 'xlf') { appArchitect['build'].options.optimization = true; appArchitect['build'].options.buildOptimizer = true; appArchitect['build'].options.aot = true; - appArchitect['build'].options.fileReplacements = [{ - replace: 'src/environments/environment.ts', - with: 'src/environments/environment.prod.ts', - }]; + appArchitect['build'].options.fileReplacements = [ + { + replace: 'src/environments/environment.ts', + with: 'src/environments/environment.prod.ts', + }, + ]; appArchitect['build'].options.i18nMissingTranslation = 'error'; appArchitect['build'].options.vendorChunk = true; appArchitect['build'].options.sourceMap = true; @@ -209,7 +227,7 @@ export async function setupI18nConfig(format: keyof typeof formats = 'xlf') { } }); -// Install the localize package if using ivy + // Install the localize package if using ivy let localizeVersion = '@angular/localize@' + readNgVersion(); if (getGlobalVariable('argv')['ng-snapshots']) { localizeVersion = require('../../ng-snapshot/package.json').dependencies['@angular/localize']; @@ -217,11 +235,7 @@ export async function setupI18nConfig(format: keyof typeof formats = 'xlf') { await installPackage(localizeVersion); // Extract the translation messages. - await ng( - 'extract-i18n', - '--output-path=src/locale', - `--format=${format}`, - ); + await ng('extract-i18n', '--output-path=src/locale', `--format=${format}`); const translationFile = `src/locale/messages.${formats[format].ext}`; await expectFileToExist(translationFile); await expectFileToMatch(translationFile, formats[format].sourceCheck); diff --git a/tests/legacy-cli/e2e/tests/misc/browsers.ts b/tests/legacy-cli/e2e/tests/misc/browsers.ts index fd221cca8d90..440116abccad 100644 --- a/tests/legacy-cli/e2e/tests/misc/browsers.ts +++ b/tests/legacy-cli/e2e/tests/misc/browsers.ts @@ -1,7 +1,6 @@ -import * as express from 'express'; +import express from 'express'; import * as path from 'path'; import { copyProjectAsset } from '../../utils/assets'; -import { getGlobalVariable } from '../../utils/env'; import { replaceInFile } from '../../utils/fs'; import { ng } from '../../utils/process'; @@ -15,18 +14,10 @@ export default async function () { throw new Error('SauceLabs is not configured.'); } - await replaceInFile( - '.browserslistrc', - 'not IE 11', - 'IE 11', - ); + await replaceInFile('.browserslistrc', 'not IE 11', 'IE 11'); // Workaround for https://github.com/angular/angular/issues/32192 - await replaceInFile( - 'src/app/app.component.html', - /class="material-icons"/g, - '', - ); + await replaceInFile('src/app/app.component.html', /class="material-icons"/g, ''); await ng('build'); diff --git a/tests/legacy-cli/e2e/tests/misc/proxy-config.ts b/tests/legacy-cli/e2e/tests/misc/proxy-config.ts index ec5ce3d7101e..76896e92b055 100644 --- a/tests/legacy-cli/e2e/tests/misc/proxy-config.ts +++ b/tests/legacy-cli/e2e/tests/misc/proxy-config.ts @@ -1,14 +1,14 @@ -import * as express from 'express'; +import express from 'express'; import * as http from 'http'; -import {writeFile} from '../../utils/fs'; -import {request} from '../../utils/http'; -import {killAllProcesses, ng} from '../../utils/process'; -import {ngServe} from '../../utils/project'; -import {updateJsonFile} from '../../utils/project'; -import {expectToFail} from "../../utils/utils"; +import { writeFile } from '../../utils/fs'; +import { request } from '../../utils/http'; +import { killAllProcesses, ng } from '../../utils/process'; +import { ngServe } from '../../utils/project'; +import { updateJsonFile } from '../../utils/project'; +import { expectToFail } from '../../utils/utils'; -export default function() { +export default function () { // TODO(architect): Delete this test. It is now in devkit/build-angular. // Create an express app that serves as a proxy. @@ -27,45 +27,59 @@ export default function() { const proxyConfigFile = 'proxy.config.json'; const proxyConfig = { '/api/*': { - target: proxyServerUrl - } + target: proxyServerUrl, + }, }; - return Promise.resolve() - .then(() => writeFile(proxyConfigFile, JSON.stringify(proxyConfig, null, 2))) - .then(() => ngServe('--proxy-config', proxyConfigFile)) - .then(() => request('http://localhost:4200/api/test')) - .then(body => { - if (!body.match(/TEST_API_RETURN/)) { - throw new Error('Response does not match expected value.'); - } - }) - .then(() => killAllProcesses(), (err) => { killAllProcesses(); throw err; }) + return ( + Promise.resolve() + .then(() => writeFile(proxyConfigFile, JSON.stringify(proxyConfig, null, 2))) + .then(() => ngServe('--proxy-config', proxyConfigFile)) + .then(() => request('http://localhost:4200/api/test')) + .then((body) => { + if (!body.match(/TEST_API_RETURN/)) { + throw new Error('Response does not match expected value.'); + } + }) + .then( + () => killAllProcesses(), + (err) => { + killAllProcesses(); + throw err; + }, + ) - // .then(() => updateJsonFile('angular.json', configJson => { - // const app = configJson.defaults; - // app.serve = { - // proxyConfig: proxyConfigFile - // }; - // })) - // .then(() => ngServe()) - // .then(() => request('http://localhost:4200/api/test')) - // .then(body => { - // if (!body.match(/TEST_API_RETURN/)) { - // throw new Error('Response does not match expected value.'); - // } - // }) - // .then(() => killAllProcesses(), (err) => { killAllProcesses(); throw err; }) + // .then(() => updateJsonFile('angular.json', configJson => { + // const app = configJson.defaults; + // app.serve = { + // proxyConfig: proxyConfigFile + // }; + // })) + // .then(() => ngServe()) + // .then(() => request('http://localhost:4200/api/test')) + // .then(body => { + // if (!body.match(/TEST_API_RETURN/)) { + // throw new Error('Response does not match expected value.'); + // } + // }) + // .then(() => killAllProcesses(), (err) => { killAllProcesses(); throw err; }) - .then(() => server.close(), (err) => { server.close(); throw err; }) + .then( + () => server.close(), + (err) => { + server.close(); + throw err; + }, + ) + ); - // // A non-existing proxy file should error. - // .then(() => expectToFail(() => ng('serve', '--proxy-config', 'proxy.non-existent.json'))) - // .then(() => updateJsonFile('angular.json', configJson => { - // const app = configJson.defaults; - // app.serve = { - // proxyConfig: 'proxy.non-existent.json' - // }; - // })) - // .then(() => expectToFail(() => ng('serve'))); + // // A non-existing proxy file should error. + // .then(() => expectToFail(() => ng('serve', '--proxy-config', 'proxy.non-existent.json'))) + // .then(() => updateJsonFile('angular.json', configJson => { + // const app = configJson.defaults; + // app.serve = { + // proxyConfig: 'proxy.non-existent.json' + // }; + // })) + // .then(() => expectToFail(() => ng('serve'))); } diff --git a/tests/legacy-cli/e2e/tests/misc/public-host.ts b/tests/legacy-cli/e2e/tests/misc/public-host.ts index faf63bd82316..4a040475ece5 100644 --- a/tests/legacy-cli/e2e/tests/misc/public-host.ts +++ b/tests/legacy-cli/e2e/tests/misc/public-host.ts @@ -1,5 +1,4 @@ import * as os from 'os'; -import * as _ from 'lodash'; import { request } from '../../utils/http'; import { killAllProcesses } from '../../utils/process'; @@ -8,56 +7,81 @@ import { ngServe } from '../../utils/project'; export default function () { // TODO(architect): Delete this test. It is now in devkit/build-angular. - const firstLocalIp = _(os.networkInterfaces()) - .values() - .flatten() - .filter({ family: 'IPv4', internal: false }) - .map('address') - .first(); + const firstLocalIp = Object.values(os.networkInterfaces()) + .flat() + .filter((ni) => ni.family === 'IPv4' && !ni.internal) + .map((ni) => ni.address) + .shift(); const publicHost = `${firstLocalIp}:4200`; const localAddress = `http://${publicHost}`; - return Promise.resolve() - // Disabling this test. Webpack Dev Server does not check the hots anymore when binding to - // numeric IP addresses. - // .then(() => ngServe('--host=0.0.0.0')) - // .then(() => request(localAddress)) - // .then(body => { - // if (!body.match(/Invalid Host header/)) { - // throw new Error('Response does not match expected value.'); - // } - // }) - // .then(() => killAllProcesses(), (err) => { killAllProcesses(); throw err; }) - .then(() => ngServe('--host=0.0.0.0', `--public-host=${publicHost}`)) - .then(() => request(localAddress)) - .then(body => { - if (!body.match(/<\/app-root>/)) { - throw new Error('Response does not match expected value.'); - } - }) - .then(() => killAllProcesses(), (err) => { killAllProcesses(); throw err; }) - .then(() => ngServe('--host=0.0.0.0', `--disable-host-check`)) - .then(() => request(localAddress)) - .then(body => { - if (!body.match(/<\/app-root>/)) { - throw new Error('Response does not match expected value.'); - } - }) - .then(() => killAllProcesses(), (err) => { killAllProcesses(); throw err; }) - .then(() => ngServe('--host=0.0.0.0', `--public-host=${localAddress}`)) - .then(() => request(localAddress)) - .then(body => { - if (!body.match(/<\/app-root>/)) { - throw new Error('Response does not match expected value.'); - } - }) - .then(() => killAllProcesses(), (err) => { killAllProcesses(); throw err; }) - .then(() => ngServe('--host=0.0.0.0', `--public-host=${firstLocalIp}`)) - .then(() => request(localAddress)) - .then(body => { - if (!body.match(/<\/app-root>/)) { - throw new Error('Response does not match expected value.'); - } - }) - .then(() => killAllProcesses(), (err) => { killAllProcesses(); throw err; }); + return ( + Promise.resolve() + // Disabling this test. Webpack Dev Server does not check the hots anymore when binding to + // numeric IP addresses. + // .then(() => ngServe('--host=0.0.0.0')) + // .then(() => request(localAddress)) + // .then(body => { + // if (!body.match(/Invalid Host header/)) { + // throw new Error('Response does not match expected value.'); + // } + // }) + // .then(() => killAllProcesses(), (err) => { killAllProcesses(); throw err; }) + .then(() => ngServe('--host=0.0.0.0', `--public-host=${publicHost}`)) + .then(() => request(localAddress)) + .then((body) => { + if (!body.match(/<\/app-root>/)) { + throw new Error('Response does not match expected value.'); + } + }) + .then( + () => killAllProcesses(), + (err) => { + killAllProcesses(); + throw err; + }, + ) + .then(() => ngServe('--host=0.0.0.0', `--disable-host-check`)) + .then(() => request(localAddress)) + .then((body) => { + if (!body.match(/<\/app-root>/)) { + throw new Error('Response does not match expected value.'); + } + }) + .then( + () => killAllProcesses(), + (err) => { + killAllProcesses(); + throw err; + }, + ) + .then(() => ngServe('--host=0.0.0.0', `--public-host=${localAddress}`)) + .then(() => request(localAddress)) + .then((body) => { + if (!body.match(/<\/app-root>/)) { + throw new Error('Response does not match expected value.'); + } + }) + .then( + () => killAllProcesses(), + (err) => { + killAllProcesses(); + throw err; + }, + ) + .then(() => ngServe('--host=0.0.0.0', `--public-host=${firstLocalIp}`)) + .then(() => request(localAddress)) + .then((body) => { + if (!body.match(/<\/app-root>/)) { + throw new Error('Response does not match expected value.'); + } + }) + .then( + () => killAllProcesses(), + (err) => { + killAllProcesses(); + throw err; + }, + ) + ); } diff --git a/tests/legacy-cli/e2e/utils/assets.ts b/tests/legacy-cli/e2e/utils/assets.ts index e2d3f2f0a969..ac0e321ddf27 100644 --- a/tests/legacy-cli/e2e/utils/assets.ts +++ b/tests/legacy-cli/e2e/utils/assets.ts @@ -1,5 +1,5 @@ import { join } from 'path'; -import * as glob from 'glob'; +import glob from 'glob'; import { getGlobalVariable } from './env'; import { relative, resolve } from 'path'; import { copyFile, writeFile } from './fs'; diff --git a/tests/legacy-cli/e2e/utils/http.ts b/tests/legacy-cli/e2e/utils/http.ts index fa0fbc32c3c5..b18b697a2b32 100644 --- a/tests/legacy-cli/e2e/utils/http.ts +++ b/tests/legacy-cli/e2e/utils/http.ts @@ -1,13 +1,12 @@ -import {IncomingMessage} from 'http'; -import * as _request from 'request'; - +import { IncomingMessage } from 'http'; +import _request from 'request'; export function request(url: string): Promise { return new Promise((resolve, reject) => { let options = { url: url, headers: { 'Accept': 'text/html' }, - agentOptions: { rejectUnauthorized: false } + agentOptions: { rejectUnauthorized: false }, }; _request(options, (error: any, response: IncomingMessage, body: string) => { if (error) { diff --git a/tests/legacy-cli/e2e_runner.ts b/tests/legacy-cli/e2e_runner.ts index 182bc2edb714..53c830865474 100644 --- a/tests/legacy-cli/e2e_runner.ts +++ b/tests/legacy-cli/e2e_runner.ts @@ -5,8 +5,8 @@ import { createConsoleLogger } from '@angular-devkit/core/node'; import * as colors from 'ansi-colors'; import { spawn } from 'child_process'; import * as fs from 'fs'; -import * as glob from 'glob'; -import * as minimist from 'minimist'; +import glob from 'glob'; +import minimist from 'minimist'; import * as os from 'os'; import * as path from 'path'; import { setGlobalVariable } from './e2e/utils/env'; @@ -57,11 +57,11 @@ const argv = minimist(process.argv.slice(2), { process.exitCode = 255; const logger = createConsoleLogger(argv.verbose, process.stdout, process.stderr, { - info: s => s, - debug: s => s, - warn: s => colors.bold.yellow(s), - error: s => colors.bold.red(s), - fatal: s => colors.bold.red(s), + info: (s) => s, + debug: (s) => s, + warn: (s) => colors.bold.yellow(s), + error: (s) => colors.bold.red(s), + fatal: (s) => colors.bold.red(s), }); const logStack = [logger]; @@ -75,25 +75,25 @@ let currentFileName = null; const e2eRoot = path.join(__dirname, 'e2e'); const allSetups = glob .sync(path.join(e2eRoot, 'setup/**/*.ts'), { nodir: true }) - .map(name => path.relative(e2eRoot, name)) + .map((name) => path.relative(e2eRoot, name)) .sort(); const allTests = glob .sync(path.join(e2eRoot, testGlob), { nodir: true, ignore: argv.ignore }) - .map(name => path.relative(e2eRoot, name)) + .map((name) => path.relative(e2eRoot, name)) // Replace windows slashes. - .map(name => name.replace(/\\/g, '/')) + .map((name) => name.replace(/\\/g, '/')) .sort() - .filter(name => !name.endsWith('/setup.ts')); + .filter((name) => !name.endsWith('/setup.ts')); const shardId = 'shard' in argv ? argv['shard'] : null; const nbShards = (shardId === null ? 1 : argv['nb-shards']) || 2; -const tests = allTests.filter(name => { +const tests = allTests.filter((name) => { // Check for naming tests on command line. if (argv._.length == 0) { return true; } - return argv._.some(argName => { + return argv._.some((argName) => { return ( path.join(process.cwd(), argName) == path.join(__dirname, 'e2e', name) || argName == name || @@ -128,12 +128,10 @@ setGlobalVariable('package-manager', argv.yarn ? 'yarn' : 'npm'); setGlobalVariable('package-registry', 'http://localhost:4873'); // Setup local package registry -const registryPath = - fs.mkdtempSync(path.join(fs.realpathSync(os.tmpdir()), 'angular-cli-e2e-registry-')); -fs.copyFileSync( - path.join(__dirname, 'verdaccio.yaml'), - path.join(registryPath, 'verdaccio.yaml'), +const registryPath = fs.mkdtempSync( + path.join(fs.realpathSync(os.tmpdir()), 'angular-cli-e2e-registry-'), ); +fs.copyFileSync(path.join(__dirname, 'verdaccio.yaml'), path.join(registryPath, 'verdaccio.yaml')); const registryProcess = spawn( 'node', [require.resolve('verdaccio/bin/verdaccio'), '-c', './verdaccio.yaml'], @@ -172,7 +170,7 @@ testsToRun .then(() => fn(() => (clean = false))) .then( () => logStack.pop(), - err => { + (err) => { logStack.pop(); throw err; }, @@ -193,7 +191,7 @@ testsToRun return gitClean().then( () => logStack.pop(), - err => { + (err) => { logStack.pop(); throw err; }, @@ -202,7 +200,7 @@ testsToRun }) .then( () => printFooter(currentFileName, start), - err => { + (err) => { printFooter(currentFileName, start); console.error(err); throw err; @@ -219,7 +217,7 @@ testsToRun console.log(colors.green('Done.')); process.exit(0); }, - err => { + (err) => { console.log('\n'); console.error(colors.red(`Test "${currentFileName}" failed...`)); console.error(colors.red(err.message)); @@ -251,8 +249,12 @@ function printHeader(testName: string, testIndex: number) { : (testIndex - allSetups.length) * nbShards + shardId + allSetups.length) + 1; const length = tests.length + allSetups.length; const shard = - shardId === null ? '' : colors.yellow(` [${shardId}:${nbShards}]` + colors.bold(` (${fullIndex}/${length})`)); - console.log(colors.green(`Running "${colors.bold.blue(testName)}" (${colors.bold.white(text)}${shard})...`)); + shardId === null + ? '' + : colors.yellow(` [${shardId}:${nbShards}]` + colors.bold(` (${fullIndex}/${length})`)); + console.log( + colors.green(`Running "${colors.bold.blue(testName)}" (${colors.bold.white(text)}${shard})...`), + ); } function printFooter(testName: string, startTime: number) { diff --git a/tsconfig.json b/tsconfig.json index 35bf024ea4a3..bfd37ce6d1ba 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,7 @@ { "compilerOptions": { "declaration": true, + "esModuleInterop": true, "module": "commonjs", "moduleResolution": "node", "noEmitOnError": true,