@angular-devkit/build-angular 14.0.0-rc.1 → 14.0.0

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "14.0.0-rc.1",
+  "version": "14.0.0",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.2.0",
-    "@angular-devkit/architect": "0.1400.0-rc.1",
-    "@angular-devkit/build-webpack": "0.1400.0-rc.1",
-    "@angular-devkit/core": "14.0.0-rc.1",
+    "@angular-devkit/architect": "0.1400.0",
+    "@angular-devkit/build-webpack": "0.1400.0",
+    "@angular-devkit/core": "14.0.0",
     "@babel/core": "7.17.10",
     "@babel/generator": "7.17.10",
     "@babel/helper-annotate-as-pure": "7.16.7",
@@ -20,7 +20,7 @@
     "@babel/runtime": "7.17.9",
     "@babel/template": "7.16.7",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "14.0.0-rc.1",
+    "@ngtools/webpack": "14.0.0",
     "ansi-colors": "4.1.1",
     "babel-loader": "8.2.5",
     "babel-plugin-istanbul": "6.1.1",

package/src/babel/presets/application.d.ts

@@ -32,7 +32,7 @@ export interface ApplicationPresetOptions {
         jitMode: boolean;
         linkerPluginCreator: typeof import('@angular/compiler-cli/linker/babel').createEs2015LinkerPlugin;
     };
-    forceES5?: boolean;
+    forcePresetEnv?: boolean;
     forceAsyncTransformation?: boolean;
     instrumentCode?: {
         includedBasePath: string;
@@ -43,6 +43,7 @@ export interface ApplicationPresetOptions {
         pureTopLevel: boolean;
         wrapDecorators: boolean;
     };
+    supportedBrowsers?: string[];
     diagnosticReporter?: DiagnosticReporter;
 }
 export default function (api: unknown, options: ApplicationPresetOptions): {

package/src/babel/presets/application.js

@@ -116,14 +116,13 @@ function default_1(api, options) {
             },
         }));
     }
-    if (options.forceES5) {
+    if (options.forcePresetEnv) {
         presets.push([
             require('@babel/preset-env').default,
             {
                 bugfixes: true,
                 modules: false,
-                // Comparable behavior to tsconfig target of ES5
-                targets: { ie: 9 },
+                targets: options.supportedBrowsers,
                 exclude: ['transform-typeof-symbol'],
             },
         ]);

package/src/babel/webpack-loader.js

@@ -53,15 +53,16 @@ exports.default = (0, babel_loader_1.custom)(() => {
     return {
         async customOptions(options, { source, map }) {
             var _a, _b;
-            const { i18n, scriptTarget, aot, optimize, instrumentCode, ...rawOptions } = options;
+            const { i18n, scriptTarget, aot, optimize, instrumentCode, supportedBrowsers, ...rawOptions } = options;
             // Must process file if plugins are added
             let shouldProcess = Array.isArray(rawOptions.plugins) && rawOptions.plugins.length > 0;
             const customOptions = {
                 forceAsyncTransformation: false,
-                forceES5: false,
+                forcePresetEnv: false,
                 angularLinker: undefined,
                 i18n: undefined,
                 instrumentCode: undefined,
+                supportedBrowsers,
             };
             // Analyze file for linking
             if (await requiresLinking(this.resourcePath, source)) {
@@ -78,20 +79,31 @@ exports.default = (0, babel_loader_1.custom)(() => {
             }
             // Analyze for ES target processing
             const esTarget = scriptTarget;
-            if (esTarget !== undefined) {
-                if (esTarget < typescript_1.ScriptTarget.ES2015) {
-                    customOptions.forceES5 = true;
-                }
-                else if (esTarget >= typescript_1.ScriptTarget.ES2017 || /\.[cm]?js$/.test(this.resourcePath)) {
-                    // Application code (TS files) will only contain native async if target is ES2017+.
-                    // However, third-party libraries can regardless of the target option.
-                    // APF packages with code in [f]esm2015 directories is downlevelled to ES2015 and
-                    // will not have native async.
-                    customOptions.forceAsyncTransformation =
-                        !/[\\/][_f]?esm2015[\\/]/.test(this.resourcePath) && source.includes('async');
-                }
-                shouldProcess || (shouldProcess = customOptions.forceAsyncTransformation || customOptions.forceES5 || false);
+            const isJsFile = /\.[cm]?js$/.test(this.resourcePath);
+            // The below should be dropped when we no longer support ES5 TypeScript output.
+            if (esTarget === typescript_1.ScriptTarget.ES5) {
+                // This is needed because when target is ES5 we change the TypeScript target to ES2015
+                // because it simplifies build-optimization passes.
+                // @see https://github.com/angular/angular-cli/blob/22af6520834171d01413d4c7e4a9f13fb752252e/packages/angular_devkit/build_angular/src/webpack/plugins/typescript.ts#L51-L56
+                customOptions.forcePresetEnv = true;
+                // Comparable behavior to tsconfig target of ES5
+                customOptions.supportedBrowsers = ['IE 9'];
+            }
+            else if (isJsFile) {
+                // Applications code ES version can be controlled using TypeScript's `target` option.
+                // However, this doesn't effect libraries and hence we use preset-env to downlevel ES fetaures
+                // based on the supported browsers in browserlist.
+                customOptions.forcePresetEnv = true;
+            }
+            if ((esTarget !== undefined && esTarget >= typescript_1.ScriptTarget.ES2017) || isJsFile) {
+                // Application code (TS files) will only contain native async if target is ES2017+.
+                // However, third-party libraries can regardless of the target option.
+                // APF packages with code in [f]esm2015 directories is downlevelled to ES2015 and
+                // will not have native async.
+                customOptions.forceAsyncTransformation =
+                    !/[\\/][_f]?esm2015[\\/]/.test(this.resourcePath) && source.includes('async');
             }
+            shouldProcess || (shouldProcess = customOptions.forceAsyncTransformation || customOptions.forcePresetEnv || false);
             // Analyze for i18n inlining
             if (i18n &&
                 !/[\\/]@angular[\\/](?:compiler|localize)/.test(this.resourcePath) &&

package/src/builders/browser-esbuild/esbuild.d.ts

@@ -7,6 +7,8 @@
  */
 import { BuilderContext } from '@angular-devkit/architect';
 import { BuildFailure, BuildOptions, BuildResult, Message, OutputFile } from 'esbuild';
+/** Default outdir setting for esbuild. */
+export declare const DEFAULT_OUTDIR: string;
 /**
  * Determines if an unknown value is an esbuild BuildFailure error object thrown by esbuild.
  * @param value A potential esbuild BuildFailure error object.

package/src/builders/browser-esbuild/esbuild.js

@@ -7,8 +7,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.logMessages = exports.bundle = exports.isEsBuildFailure = void 0;
+exports.logMessages = exports.bundle = exports.isEsBuildFailure = exports.DEFAULT_OUTDIR = void 0;
 const esbuild_1 = require("esbuild");
+const path_1 = require("path");
+/** Default outdir setting for esbuild. */
+exports.DEFAULT_OUTDIR = (0, path_1.resolve)('/virtual-output');
 /**
  * Determines if an unknown value is an esbuild BuildFailure error object thrown by esbuild.
  * @param value A potential esbuild BuildFailure error object.

package/src/builders/browser-esbuild/index.js

@@ -99,11 +99,11 @@ async function execute(options, context) {
         // Entries in the metafile are relative to the `absWorkingDir` option which is set to the workspaceRoot
         const relativeFilePath = path.relative(workspaceRoot, outputFile.path);
         const entryPoint = (_c = (_b = result.metafile) === null || _b === void 0 ? void 0 : _b.outputs[relativeFilePath]) === null || _c === void 0 ? void 0 : _c.entryPoint;
+        outputFile.path = path.relative(esbuild_1.DEFAULT_OUTDIR, outputFile.path);
         if (entryPoint) {
             // An entryPoint value indicates an initial file
             initialFiles.push({
-                // Remove leading directory separator
-                file: outputFile.path.slice(1),
+                file: outputFile.path,
                 name: (_d = entryPointNameLookup.get(entryPoint)) !== null && _d !== void 0 ? _d : '',
                 extension: path.extname(outputFile.path),
             });
@@ -124,7 +124,9 @@ async function execute(options, context) {
         // resolveGlobalStyles is temporarily reused from the Webpack builder code
         const { entryPoints: stylesheetEntrypoints, noInjectNames } = (0, configs_1.resolveGlobalStyles)(options.styles, workspaceRoot, !!options.preserveSymlinks);
         for (const [name, files] of Object.entries(stylesheetEntrypoints)) {
-            const virtualEntryData = files.map((file) => `@import '${file}';`).join('\n');
+            const virtualEntryData = files
+                .map((file) => `@import '${file.replace(/\\/g, '/')}';`)
+                .join('\n');
             const sheetResult = await (0, stylesheets_1.bundleStylesheetText)(virtualEntryData, { virtualName: `angular:style/global;${name}`, resolvePath: workspaceRoot }, {
                 optimization: !!optimizationOptions.styles.minify,
                 sourcemap: !!sourcemapOptions.styles,
@@ -139,7 +141,7 @@ async function execute(options, context) {
             // The virtual stylesheets will be named `stdin` by esbuild. This must be replaced
             // with the actual name of the global style and the leading directory separator must
             // also be removed to make the path relative.
-            const sheetPath = sheetResult.path.replace('stdin', name).slice(1);
+            const sheetPath = sheetResult.path.replace('stdin', name);
             outputFiles.push(createOutputFileFromText(sheetPath, sheetResult.contents));
             if (sheetResult.map) {
                 outputFiles.push(createOutputFileFromText(sheetPath + '.map', sheetResult.map));
@@ -168,10 +170,12 @@ async function execute(options, context) {
             optimization: optimizationOptions,
             crossOrigin: options.crossOrigin,
         });
-        indexHtmlGenerator.readAsset = async function (path) {
+        /** Virtual output path to support reading in-memory files. */
+        const virtualOutputPath = '/';
+        indexHtmlGenerator.readAsset = async function (filePath) {
             // Remove leading directory separator
-            path = path.slice(1);
-            const file = outputFiles.find((file) => file.path === path);
+            const relativefilePath = path.relative(virtualOutputPath, filePath);
+            const file = outputFiles.find((file) => file.path === relativefilePath);
             if (file) {
                 return file.text;
             }
@@ -180,7 +184,7 @@ async function execute(options, context) {
         const { content, warnings, errors } = await indexHtmlGenerator.process({
             baseHref: options.baseHref,
             lang: undefined,
-            outputPath: '/',
+            outputPath: virtualOutputPath,
             files: initialFiles,
         });
         for (const error of errors) {
@@ -220,13 +224,13 @@ async function bundleCode(workspaceRoot, entryPoints, outputNames, options, opti
         assetNames: outputNames.media,
         target: 'es2020',
         mainFields: ['es2020', 'browser', 'module', 'main'],
-        conditions: ['es2020', 'module'],
+        conditions: ['es2020', 'es2015', 'module'],
         resolveExtensions: ['.ts', '.tsx', '.mjs', '.js'],
         logLevel: options.verbose ? 'debug' : 'silent',
         metafile: true,
         minify: optimizationOptions.scripts,
         pure: ['forwardRef'],
-        outdir: '/',
+        outdir: esbuild_1.DEFAULT_OUTDIR,
         sourcemap: sourcemapOptions.scripts && (sourcemapOptions.hidden ? 'external' : true),
         splitting: true,
         tsconfig,

package/src/builders/browser-esbuild/stylesheets.js

@@ -45,7 +45,7 @@ async function bundleStylesheet(entry, options) {
         logLevel: 'silent',
         minify: options.optimization,
         sourcemap: options.sourcemap,
-        outdir: '/',
+        outdir: esbuild_1.DEFAULT_OUTDIR,
         write: false,
         platform: 'browser',
         preserveSymlinks: options.preserveSymlinks,
@@ -62,6 +62,7 @@ async function bundleStylesheet(entry, options) {
     const resourceFiles = [];
     if (result.outputFiles) {
         for (const outputFile of result.outputFiles) {
+            outputFile.path = path.relative(esbuild_1.DEFAULT_OUTDIR, outputFile.path);
             const filename = path.basename(outputFile.path);
             if (filename.endsWith('.css')) {
                 outputPath = outputFile.path;

package/src/builders/protractor/index.js

@@ -100,67 +100,65 @@ async function execute(options, context) {
     }
     let baseUrl = options.baseUrl;
     let server;
-    if (options.devServerTarget) {
-        const target = (0, architect_1.targetFromTargetString)(options.devServerTarget);
-        const serverOptions = await context.getTargetOptions(target);
-        const overrides = {
-            watch: false,
-            liveReload: false,
-        };
-        if (options.host !== undefined) {
-            overrides.host = options.host;
-        }
-        else if (typeof serverOptions.host === 'string') {
-            options.host = serverOptions.host;
-        }
-        else {
-            options.host = overrides.host = 'localhost';
-        }
-        if (options.port !== undefined) {
-            overrides.port = options.port;
-        }
-        else if (typeof serverOptions.port === 'number') {
-            options.port = serverOptions.port;
-        }
-        server = await context.scheduleTarget(target, overrides);
-        const result = await server.result;
-        if (!result.success) {
-            return { success: false };
-        }
-        if (typeof serverOptions.publicHost === 'string') {
-            let publicHost = serverOptions.publicHost;
-            if (!/^\w+:\/\//.test(publicHost)) {
-                publicHost = `${serverOptions.ssl ? 'https' : 'http'}://${publicHost}`;
+    try {
+        if (options.devServerTarget) {
+            const target = (0, architect_1.targetFromTargetString)(options.devServerTarget);
+            const serverOptions = await context.getTargetOptions(target);
+            const overrides = {
+                watch: false,
+                liveReload: false,
+            };
+            if (options.host !== undefined) {
+                overrides.host = options.host;
+            }
+            else if (typeof serverOptions.host === 'string') {
+                options.host = serverOptions.host;
+            }
+            else {
+                options.host = overrides.host = 'localhost';
+            }
+            if (options.port !== undefined) {
+                overrides.port = options.port;
+            }
+            else if (typeof serverOptions.port === 'number') {
+                options.port = serverOptions.port;
+            }
+            server = await context.scheduleTarget(target, overrides);
+            const result = await server.result;
+            if (!result.success) {
+                return { success: false };
+            }
+            if (typeof serverOptions.publicHost === 'string') {
+                let publicHost = serverOptions.publicHost;
+                if (!/^\w+:\/\//.test(publicHost)) {
+                    publicHost = `${serverOptions.ssl ? 'https' : 'http'}://${publicHost}`;
+                }
+                const clientUrl = url.parse(publicHost);
+                baseUrl = url.format(clientUrl);
+            }
+            else if (typeof result.baseUrl === 'string') {
+                baseUrl = result.baseUrl;
+            }
+            else if (typeof result.port === 'number') {
+                baseUrl = url.format({
+                    protocol: serverOptions.ssl ? 'https' : 'http',
+                    hostname: options.host,
+                    port: result.port.toString(),
+                });
             }
-            const clientUrl = url.parse(publicHost);
-            baseUrl = url.format(clientUrl);
-        }
-        else if (typeof result.baseUrl === 'string') {
-            baseUrl = result.baseUrl;
         }
-        else if (typeof result.port === 'number') {
-            baseUrl = url.format({
-                protocol: serverOptions.ssl ? 'https' : 'http',
-                hostname: options.host,
-                port: result.port.toString(),
-            });
+        // Like the baseUrl in protractor config file when using the API we need to add
+        // a trailing slash when provide to the baseUrl.
+        if (baseUrl && !baseUrl.endsWith('/')) {
+            baseUrl += '/';
         }
-    }
-    // Like the baseUrl in protractor config file when using the API we need to add
-    // a trailing slash when provide to the baseUrl.
-    if (baseUrl && !baseUrl.endsWith('/')) {
-        baseUrl += '/';
-    }
-    try {
         return await runProtractor(context.workspaceRoot, { ...options, baseUrl });
     }
     catch {
         return { success: false };
     }
     finally {
-        if (server) {
-            await server.stop();
-        }
+        await (server === null || server === void 0 ? void 0 : server.stop());
     }
 }
 exports.execute = execute;

package/src/webpack/configs/common.js

@@ -300,6 +300,7 @@ async function getCommonConfig(wco) {
                                 scriptTarget,
                                 aot: buildOptions.aot,
                                 optimize: buildOptions.buildOptimizer,
+                                supportedBrowsers: buildOptions.supportedBrowsers,
                                 instrumentCode: codeCoverage
                                     ? {
                                         includedBasePath: sourceRoot,

package/src/webpack/configs/styles.js

@@ -110,19 +110,10 @@ function getStylesConfig(wco) {
     const assetNameTemplate = (0, helpers_1.assetNameTemplateFactory)(hashFormat);
     const extraPostcssPlugins = [];
     // Attempt to setup Tailwind CSS
-    // A configuration file can exist in the project or workspace root
-    const tailwindConfigFile = 'tailwind.config.js';
-    let tailwindConfigPath;
-    for (const basePath of [wco.projectRoot, wco.root]) {
-        const fullPath = path.join(basePath, tailwindConfigFile);
-        if (fs.existsSync(fullPath)) {
-            tailwindConfigPath = fullPath;
-            break;
-        }
-    }
     // Only load Tailwind CSS plugin if configuration file was found.
     // This acts as a guard to ensure the project actually wants to use Tailwind CSS.
     // The package may be unknowningly present due to a third-party transitive package dependency.
+    const tailwindConfigPath = getTailwindConfigPath(wco);
     if (tailwindConfigPath) {
         let tailwindPackagePath;
         try {
@@ -374,3 +365,19 @@ function getStylesConfig(wco) {
     };
 }
 exports.getStylesConfig = getStylesConfig;
+function getTailwindConfigPath({ projectRoot, root }) {
+    // A configuration file can exist in the project or workspace root
+    // The list of valid config files can be found:
+    // https://github.com/tailwindlabs/tailwindcss/blob/8845d112fb62d79815b50b3bae80c317450b8b92/src/util/resolveConfigPath.js#L46-L52
+    const tailwindConfigFiles = ['tailwind.config.js', 'tailwind.config.cjs'];
+    for (const basePath of [projectRoot, root]) {
+        for (const configFile of tailwindConfigFiles) {
+            // Irrespective of the name project level configuration should always take precedence.
+            const fullPath = path.join(basePath, configFile);
+            if (fs.existsSync(fullPath)) {
+                return fullPath;
+            }
+        }
+    }
+    return undefined;
+}

package/src/webpack/plugins/css-optimizer-plugin.js

@@ -30,11 +30,13 @@ class CssOptimizerPlugin {
     apply(compiler) {
         const { OriginalSource, SourceMapSource } = compiler.webpack.sources;
         compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+            const logger = compilation.getLogger('build-angular.CssOptimizerPlugin');
             compilation.hooks.processAssets.tapPromise({
                 name: PLUGIN_NAME,
                 stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE,
             }, async (compilationAssets) => {
                 const cache = compilation.options.cache && compilation.getCache(PLUGIN_NAME);
+                logger.time('optimize css assets');
                 for (const assetName of Object.keys(compilationAssets)) {
                     if (!/\.(?:css|scss|sass|less|styl)$/.test(assetName)) {
                         continue;
@@ -51,6 +53,7 @@ class CssOptimizerPlugin {
                         cacheItem = cache.getItemCache(name, eTag);
                         const cachedOutput = await cacheItem.getPromise();
                         if (cachedOutput) {
+                            logger.debug(`${name} restored from cache`);
                             await this.addWarnings(compilation, cachedOutput.warnings);
                             compilation.updateAsset(name, cachedOutput.source, (assetInfo) => ({
                                 ...assetInfo,
@@ -61,7 +64,10 @@ class CssOptimizerPlugin {
                     }
                     const { source, map: inputMap } = styleAssetSource.sourceAndMap();
                     const input = typeof source === 'string' ? source : source.toString();
+                    const optimizeAssetLabel = `optimize asset: ${asset.name}`;
+                    logger.time(optimizeAssetLabel);
                     const { code, warnings, map } = await this.optimize(input, asset.name, inputMap, this.targets);
+                    logger.timeEnd(optimizeAssetLabel);
                     await this.addWarnings(compilation, warnings);
                     const optimizedAsset = map
                         ? new SourceMapSource(code, name, map)
@@ -75,6 +81,7 @@ class CssOptimizerPlugin {
                         warnings,
                     }));
                 }
+                logger.timeEnd('optimize css assets');
             });
         });
     }

package/src/webpack/plugins/javascript-optimizer-plugin.js

@@ -38,10 +38,12 @@ class JavaScriptOptimizerPlugin {
     apply(compiler) {
         const { OriginalSource, SourceMapSource } = compiler.webpack.sources;
         compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+            const logger = compilation.getLogger('build-angular.JavaScriptOptimizerPlugin');
             compilation.hooks.processAssets.tapPromise({
                 name: PLUGIN_NAME,
                 stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE,
             }, async (compilationAssets) => {
+                logger.time('optimize js assets');
                 const scriptsToOptimize = [];
                 const cache = compilation.options.cache && compilation.getCache('JavaScriptOptimizerPlugin');
                 // Analyze the compilation assets for scripts that require optimization
@@ -61,6 +63,7 @@ class JavaScriptOptimizerPlugin {
                         cacheItem = cache.getItemCache(name, eTag);
                         const cachedOutput = await cacheItem.getPromise();
                         if (cachedOutput) {
+                            logger.debug(`${name} restored from cache`);
                             compilation.updateAsset(name, cachedOutput.source, (assetInfo) => ({
                                 ...assetInfo,
                                 minimized: true,
@@ -125,6 +128,7 @@ class JavaScriptOptimizerPlugin {
                 try {
                     const tasks = [];
                     for (const { name, code, map, cacheItem } of scriptsToOptimize) {
+                        logger.time(`optimize asset: ${name}`);
                         tasks.push(workerPool
                             .run({
                             asset: {
@@ -142,6 +146,7 @@ class JavaScriptOptimizerPlugin {
                                 ...assetInfo,
                                 minimized: true,
                             }));
+                            logger.timeEnd(`optimize asset: ${name}`);
                             return cacheItem === null || cacheItem === void 0 ? void 0 : cacheItem.storePromise({
                                 source: optimizedAsset,
                             });
@@ -155,6 +160,7 @@ class JavaScriptOptimizerPlugin {
                 finally {
                     void workerPool.destroy();
                 }
+                logger.timeEnd('optimize js assets');
             });
         });
     }

package/src/webpack/plugins/typescript.js

@@ -20,6 +20,7 @@ function ensureIvy(wco) {
         '\nFor additional information or if the build fails, please see https://angular.io/guide/ivy');
     wco.tsConfig.options.enableIvy = true;
 }
+let es5TargetWarningsShown = false;
 function createIvyPlugin(wco, aot, tsconfig) {
     if (aot) {
         ensureIvy(wco);
@@ -39,6 +40,10 @@ function createIvyPlugin(wco, aot, tsconfig) {
     // as for third-party libraries. This greatly reduces the complexity of static analysis.
     if (wco.scriptTarget < typescript_1.ScriptTarget.ES2015) {
         compilerOptions.target = typescript_1.ScriptTarget.ES2015;
+        if (!es5TargetWarningsShown) {
+            wco.logger.warn('DEPRECATED: ES5 output is deprecated. Please update TypeScript `target` compiler option to ES2015 or later.');
+            es5TargetWarningsShown = true;
+        }
     }
     const fileReplacements = {};
     if (buildOptions.fileReplacements) {