@angular-devkit/build-angular 14.1.0-next.2 → 14.1.0-rc.3

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "14.1.0-next.2",
+  "version": "14.1.0-rc.3",
   "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.1401.0-next.2",
-    "@angular-devkit/build-webpack": "0.1401.0-next.2",
-    "@angular-devkit/core": "14.1.0-next.2",
-    "@babel/core": "7.18.2",
-    "@babel/generator": "7.18.2",
-    "@babel/helper-annotate-as-pure": "7.16.7",
-    "@babel/plugin-proposal-async-generator-functions": "7.17.12",
-    "@babel/plugin-transform-async-to-generator": "7.17.12",
-    "@babel/plugin-transform-runtime": "7.18.2",
-    "@babel/preset-env": "7.18.2",
-    "@babel/runtime": "7.18.3",
-    "@babel/template": "7.16.7",
+    "@angular-devkit/architect": "0.1401.0-rc.3",
+    "@angular-devkit/build-webpack": "0.1401.0-rc.3",
+    "@angular-devkit/core": "14.1.0-rc.3",
+    "@babel/core": "7.18.6",
+    "@babel/generator": "7.18.7",
+    "@babel/helper-annotate-as-pure": "7.18.6",
+    "@babel/plugin-proposal-async-generator-functions": "7.18.6",
+    "@babel/plugin-transform-async-to-generator": "7.18.6",
+    "@babel/plugin-transform-runtime": "7.18.6",
+    "@babel/preset-env": "7.18.6",
+    "@babel/runtime": "7.18.6",
+    "@babel/template": "7.18.6",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "14.1.0-next.2",
+    "@ngtools/webpack": "14.1.0-rc.3",
     "ansi-colors": "4.1.3",
     "babel-loader": "8.2.5",
     "babel-plugin-istanbul": "6.1.1",
@@ -29,17 +29,17 @@
     "copy-webpack-plugin": "11.0.0",
     "critters": "0.0.16",
     "css-loader": "6.7.1",
-    "esbuild-wasm": "0.14.42",
+    "esbuild-wasm": "0.14.48",
     "glob": "8.0.3",
     "https-proxy-agent": "5.0.1",
     "inquirer": "8.2.4",
     "jsonc-parser": "3.0.0",
     "karma-source-map-support": "1.4.0",
-    "less": "4.1.2",
+    "less": "4.1.3",
     "less-loader": "11.0.0",
     "license-webpack-plugin": "4.0.2",
     "loader-utils": "3.2.0",
-    "mini-css-extract-plugin": "2.6.0",
+    "mini-css-extract-plugin": "2.6.1",
     "minimatch": "5.1.0",
     "open": "8.4.0",
     "ora": "5.4.1",
@@ -48,29 +48,29 @@
     "postcss": "8.4.14",
     "postcss-import": "14.1.0",
     "postcss-loader": "7.0.0",
-    "postcss-preset-env": "7.7.0",
+    "postcss-preset-env": "7.7.2",
     "regenerator-runtime": "0.13.9",
     "resolve-url-loader": "5.0.0",
     "rxjs": "6.6.7",
-    "sass": "1.52.2",
-    "sass-loader": "13.0.0",
+    "sass": "1.53.0",
+    "sass-loader": "13.0.2",
     "semver": "7.3.7",
     "source-map-loader": "4.0.0",
     "source-map-support": "0.5.21",
     "stylus": "0.58.1",
     "stylus-loader": "7.0.0",
-    "terser": "5.14.0",
+    "terser": "5.14.1",
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
     "tslib": "2.4.0",
     "webpack": "5.73.0",
     "webpack-dev-middleware": "5.3.3",
-    "webpack-dev-server": "4.9.1",
+    "webpack-dev-server": "4.9.3",
     "webpack-merge": "5.8.0",
     "webpack-subresource-integrity": "5.1.0"
   },
   "optionalDependencies": {
-    "esbuild": "0.14.42"
+    "esbuild": "0.14.48"
   },
   "peerDependencies": {
     "@angular/compiler-cli": "^14.0.0 || ^14.0.0-next || ^14.1.0-next",

package/src/builders/app-shell/index.js

@@ -62,7 +62,7 @@ async function _renderUniversal(options, context, browserResult, serverResult, s
             deployUrl: browserOptions.deployUrl,
         })
         : undefined;
-    for (const outputPath of browserResult.outputPaths) {
+    for (const { path: outputPath, baseHref } of browserResult.outputs) {
         const localeDirectory = path.relative(browserResult.baseOutputPath, outputPath);
         const browserIndexOutputPath = path.join(outputPath, 'index.html');
         const indexHtml = await fs.promises.readFile(browserIndexOutputPath, 'utf8');
@@ -96,7 +96,7 @@ async function _renderUniversal(options, context, browserResult, serverResult, s
         }
         await fs.promises.writeFile(outputIndexPath, html);
         if (browserOptions.serviceWorker) {
-            await (0, service_worker_1.augmentAppWithServiceWorker)(projectRoot, root, outputPath, browserOptions.baseHref || '/', browserOptions.ngswConfigPath);
+            await (0, service_worker_1.augmentAppWithServiceWorker)(projectRoot, root, outputPath, baseHref !== null && baseHref !== void 0 ? baseHref : '/', browserOptions.ngswConfigPath);
         }
     }
     return browserResult;

package/src/builders/browser/index.d.ts

@@ -17,11 +17,19 @@ import { Schema as BrowserBuilderSchema } from './schema';
  */
 export declare type BrowserBuilderOutput = BuilderOutput & {
     baseOutputPath: string;
+    /**
+     * @deprecated in version 14. Use 'outputs' instead.
+     */
     outputPaths: string[];
     /**
-     * @deprecated in version 9. Use 'outputPaths' instead.
+     * @deprecated in version 9. Use 'outputs' instead.
      */
     outputPath: string;
+    outputs: {
+        locale?: string;
+        path: string;
+        baseHref?: string;
+    }[];
 };
 /**
  * Maximum time in milliseconds for single build/rebuild

package/src/builders/browser/index.js

@@ -128,7 +128,7 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                     }
                 }),
         }).pipe((0, operators_1.concatMap)(async (buildEvent) => {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             const spinner = new spinner_1.Spinner();
             spinner.enabled = options.progress !== false;
             const { success, emittedFiles = [], outputPath: webpackOutputPath } = buildEvent;
@@ -218,7 +218,7 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                         for (const [locale, outputPath] of outputPaths.entries()) {
                             try {
                                 const { content, warnings, errors } = await indexHtmlGenerator.process({
-                                    baseHref: getLocaleBaseHref(i18n, locale) || options.baseHref,
+                                    baseHref: (_f = getLocaleBaseHref(i18n, locale)) !== null && _f !== void 0 ? _f : options.baseHref,
                                     // i18nLocale is used when Ivy is disabled
                                     lang: locale || undefined,
                                     outputPath,
@@ -254,7 +254,7 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                         spinner.start('Generating service worker...');
                         for (const [locale, outputPath] of outputPaths.entries()) {
                             try {
-                                await (0, service_worker_1.augmentAppWithServiceWorker)(projectRoot, context.workspaceRoot, outputPath, getLocaleBaseHref(i18n, locale) || options.baseHref || '/', options.ngswConfigPath);
+                                await (0, service_worker_1.augmentAppWithServiceWorker)(projectRoot, context.workspaceRoot, outputPath, (_h = (_g = getLocaleBaseHref(i18n, locale)) !== null && _g !== void 0 ? _g : options.baseHref) !== null && _h !== void 0 ? _h : '/', options.ngswConfigPath);
                             }
                             catch (error) {
                                 spinner.fail('Service worker generation failed.');
@@ -272,6 +272,18 @@ function buildWebpackBrowser(options, context, transforms = {}) {
             baseOutputPath,
             outputPath: baseOutputPath,
             outputPaths: (outputPaths && Array.from(outputPaths.values())) || [baseOutputPath],
+            outputs: (outputPaths &&
+                [...outputPaths.entries()].map(([locale, path]) => {
+                    var _a;
+                    return ({
+                        locale,
+                        path,
+                        baseHref: (_a = getLocaleBaseHref(i18n, locale)) !== null && _a !== void 0 ? _a : options.baseHref,
+                    });
+                })) || {
+                path: baseOutputPath,
+                baseHref: options.baseHref,
+            },
         })));
     }));
     function getLocaleBaseHref(i18n, locale) {

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

@@ -11,4 +11,5 @@ export declare function createCompilerPlugin(pluginOptions: {
     sourcemap: boolean;
     tsconfig: string;
     advancedOptimizations?: boolean;
+    thirdPartySourcemaps?: boolean;
 }, styleOptions: BundleStylesheetOptions): Plugin;

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

@@ -167,18 +167,25 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 const result = {};
                 // Create TypeScript compiler host
                 const host = typescript_1.default.createIncrementalCompilerHost(compilerOptions);
-                // Temporarily add a readResource hook to allow for a transformResource hook.
-                // Once the AOT compiler allows only a transformResource hook this can be removed.
-                host.readResource = function (fileName) {
-                    var _a;
-                    // Provide same no file found behavior as @ngtools/webpack
-                    return (_a = this.readFile(fileName)) !== null && _a !== void 0 ? _a : '';
+                // Temporarily process external resources via readResource.
+                // The AOT compiler currently requires this hook to allow for a transformResource hook.
+                // Once the AOT compiler allows only a transformResource hook, this can be reevaluated.
+                host.readResource = async function (fileName) {
+                    var _a, _b, _c;
+                    // Template resources (.html) files are not bundled or transformed
+                    if (fileName.endsWith('.html')) {
+                        return (_a = this.readFile(fileName)) !== null && _a !== void 0 ? _a : '';
+                    }
+                    const { contents, errors, warnings } = await (0, stylesheets_1.bundleStylesheetFile)(fileName, styleOptions);
+                    ((_b = result.errors) !== null && _b !== void 0 ? _b : (result.errors = [])).push(...errors);
+                    ((_c = result.warnings) !== null && _c !== void 0 ? _c : (result.warnings = [])).push(...warnings);
+                    return contents;
                 };
                 // Add an AOT compiler resource transform hook
                 host.transformResource = async function (data, context) {
                     var _a, _b, _c;
-                    // Only style resources are transformed currently
-                    if (context.type !== 'style') {
+                    // Only inline style resources are transformed separately currently
+                    if (context.resourceFile || context.type !== 'style') {
                         return null;
                     }
                     // The file with the resource content will either be an actual file (resourceFile)
@@ -256,10 +263,12 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                         ],
                     };
                 }
+                const useInputSourcemap = pluginOptions.sourcemap &&
+                    (!!pluginOptions.thirdPartySourcemaps || !/[\\/]node_modules[\\/]/.test(args.path));
                 const data = (_a = typescriptResult.content) !== null && _a !== void 0 ? _a : '';
                 const babelResult = await (0, core_1.transformAsync)(data, {
                     filename: args.path,
-                    inputSourceMap: (pluginOptions.sourcemap ? undefined : false),
+                    inputSourceMap: (useInputSourcemap ? undefined : false),
                     sourceMaps: pluginOptions.sourcemap ? 'inline' : false,
                     compact: false,
                     configFile: false,
@@ -285,10 +294,12 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 var _a;
                 const angularPackage = /[\\/]node_modules[\\/]@angular[\\/]/.test(args.path);
                 const linkerPluginCreator = (await (0, load_esm_1.loadEsmModule)('@angular/compiler-cli/linker/babel')).createEs2015LinkerPlugin;
+                const useInputSourcemap = pluginOptions.sourcemap &&
+                    (!!pluginOptions.thirdPartySourcemaps || !/[\\/]node_modules[\\/]/.test(args.path));
                 const data = await fs_1.promises.readFile(args.path, 'utf-8');
                 const result = await (0, core_1.transformAsync)(data, {
                     filename: args.path,
-                    inputSourceMap: (pluginOptions.sourcemap ? undefined : false),
+                    inputSourceMap: (useInputSourcemap ? undefined : false),
                     sourceMaps: pluginOptions.sourcemap ? 'inline' : false,
                     compact: false,
                     configFile: false,

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

@@ -7,8 +7,6 @@
  */
 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,11 +7,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.logMessages = exports.bundle = exports.isEsBuildFailure = exports.DEFAULT_OUTDIR = void 0;
+exports.logMessages = exports.bundle = exports.isEsBuildFailure = 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

@@ -57,7 +57,7 @@ const stylesheets_1 = require("./stylesheets");
  */
 // eslint-disable-next-line max-lines-per-function
 async function buildEsbuildBrowser(options, context) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const startTime = Date.now();
     // Only AOT is currently supported
     if (options.aot !== true) {
@@ -101,7 +101,7 @@ async function buildEsbuildBrowser(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);
+        outputFile.path = relativeFilePath;
         if (entryPoint) {
             // An entryPoint value indicates an initial file
             initialFiles.push({
@@ -130,9 +130,11 @@ async function buildEsbuildBrowser(options, context) {
                 .map((file) => `@import '${file.replace(/\\/g, '/')}';`)
                 .join('\n');
             const sheetResult = await (0, stylesheets_1.bundleStylesheetText)(virtualEntryData, { virtualName: `angular:style/global;${name}`, resolvePath: workspaceRoot }, {
+                workspaceRoot,
                 optimization: !!optimizationOptions.styles.minify,
-                sourcemap: !!sourcemapOptions.styles,
+                sourcemap: !!sourcemapOptions.styles && (sourcemapOptions.hidden ? 'external' : true),
                 outputNames: noInjectNames.includes(name) ? { media: outputNames.media } : outputNames,
+                includePaths: (_e = options.stylePreprocessorOptions) === null || _e === void 0 ? void 0 : _e.includePaths,
             });
             await (0, esbuild_1.logMessages)(context, sheetResult);
             if (!sheetResult.path) {
@@ -161,8 +163,8 @@ async function buildEsbuildBrowser(options, context) {
     // Generate index HTML file
     if (options.index) {
         const entrypoints = (0, package_chunk_sort_1.generateEntryPoints)({
-            scripts: (_e = options.scripts) !== null && _e !== void 0 ? _e : [],
-            styles: (_f = options.styles) !== null && _f !== void 0 ? _f : [],
+            scripts: (_f = options.scripts) !== null && _f !== void 0 ? _f : [],
+            styles: (_g = options.styles) !== null && _g !== void 0 ? _g : [],
         });
         // Create an index HTML generator that reads from the in-memory output files
         const indexHtmlGenerator = new index_html_generator_1.IndexHtmlGenerator({
@@ -228,6 +230,7 @@ function createOutputFileFromText(path, text) {
     };
 }
 async function bundleCode(workspaceRoot, entryPoints, outputNames, options, optimizationOptions, sourcemapOptions, tsconfig) {
+    var _a;
     return (0, esbuild_1.bundle)({
         absWorkingDir: workspaceRoot,
         bundle: true,
@@ -243,7 +246,7 @@ async function bundleCode(workspaceRoot, entryPoints, outputNames, options, opti
         metafile: true,
         minify: optimizationOptions.scripts,
         pure: ['forwardRef'],
-        outdir: esbuild_1.DEFAULT_OUTDIR,
+        outdir: workspaceRoot,
         sourcemap: sourcemapOptions.scripts && (sourcemapOptions.hidden ? 'external' : true),
         splitting: true,
         tsconfig,
@@ -256,6 +259,7 @@ async function bundleCode(workspaceRoot, entryPoints, outputNames, options, opti
             // JS/TS options
             {
                 sourcemap: !!sourcemapOptions.scripts,
+                thirdPartySourcemaps: sourcemapOptions.vendor,
                 tsconfig,
                 advancedOptimizations: options.buildOptimizer,
             }, 
@@ -263,8 +267,13 @@ async function bundleCode(workspaceRoot, entryPoints, outputNames, options, opti
             {
                 workspaceRoot,
                 optimization: !!optimizationOptions.styles.minify,
-                sourcemap: !!sourcemapOptions.styles,
+                sourcemap: 
+                // Hidden component stylesheet sourcemaps are inaccessible which is effectively
+                // the same as being disabled. Disabling has the advantage of avoiding the overhead
+                // of sourcemap processing.
+                !!sourcemapOptions.styles && (sourcemapOptions.hidden ? false : 'inline'),
                 outputNames,
+                includePaths: (_a = options.stylePreprocessorOptions) === null || _a === void 0 ? void 0 : _a.includePaths,
             }),
         ],
         define: {

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

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import type { Plugin } from 'esbuild';
+export declare function createSassPlugin(options: {
+    sourcemap: boolean;
+    includePaths?: string[];
+}): Plugin;

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

@@ -0,0 +1,52 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSassPlugin = void 0;
+const sass_service_1 = require("../../sass/sass-service");
+function createSassPlugin(options) {
+    return {
+        name: 'angular-sass',
+        setup(build) {
+            let sass;
+            build.onStart(() => {
+                sass = new sass_service_1.SassWorkerImplementation();
+            });
+            build.onEnd(() => {
+                sass === null || sass === void 0 ? void 0 : sass.close();
+            });
+            build.onLoad({ filter: /\.s[ac]ss$/ }, async (args) => {
+                const result = await new Promise((resolve, reject) => {
+                    sass.render({
+                        file: args.path,
+                        includePaths: options.includePaths,
+                        indentedSyntax: args.path.endsWith('.sass'),
+                        outputStyle: 'expanded',
+                        sourceMap: options.sourcemap,
+                        sourceMapContents: options.sourcemap,
+                        sourceMapEmbed: options.sourcemap,
+                        quietDeps: true,
+                    }, (error, result) => {
+                        if (error) {
+                            reject(error);
+                        }
+                        if (result) {
+                            resolve(result);
+                        }
+                    });
+                });
+                return {
+                    contents: result.css,
+                    loader: 'css',
+                    watchFiles: result.stats.includedFiles,
+                };
+            });
+        },
+    };
+}
+exports.createSassPlugin = createSassPlugin;

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

@@ -7,14 +7,15 @@
  */
 import type { OutputFile } from 'esbuild';
 export interface BundleStylesheetOptions {
-    workspaceRoot?: string;
+    workspaceRoot: string;
     optimization: boolean;
     preserveSymlinks?: boolean;
-    sourcemap: boolean | 'external';
+    sourcemap: boolean | 'external' | 'inline';
     outputNames?: {
         bundles?: string;
         media?: string;
     };
+    includePaths?: string[];
 }
 /**
  * Bundle a stylesheet that exists as a file on the filesystem.

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

@@ -33,6 +33,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.bundleStylesheetText = exports.bundleStylesheetFile = void 0;
 const path = __importStar(require("path"));
 const esbuild_1 = require("./esbuild");
+const sass_plugin_1 = require("./sass-plugin");
 async function bundleStylesheet(entry, options) {
     var _a, _b;
     // Execute esbuild
@@ -45,14 +46,14 @@ async function bundleStylesheet(entry, options) {
         logLevel: 'silent',
         minify: options.optimization,
         sourcemap: options.sourcemap,
-        outdir: esbuild_1.DEFAULT_OUTDIR,
+        outdir: options.workspaceRoot,
         write: false,
         platform: 'browser',
         preserveSymlinks: options.preserveSymlinks,
         conditions: ['style'],
         mainFields: ['style'],
         plugins: [
-        // TODO: preprocessor plugins
+            (0, sass_plugin_1.createSassPlugin)({ sourcemap: !!options.sourcemap, includePaths: options.includePaths }),
         ],
     });
     // Extract the result of the bundling from the output files
@@ -62,7 +63,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);
+            outputFile.path = path.relative(options.workspaceRoot, outputFile.path);
             const filename = path.basename(outputFile.path);
             if (filename.endsWith('.css')) {
                 outputPath = outputFile.path;

package/src/builders/karma/find-tests.js

@@ -71,6 +71,8 @@ async function findMatchingTests(pattern, workspaceRoot, projectSourceRoot) {
     }
     return globPromise(normalizedPattern, {
         cwd: projectSourceRoot,
+        root: projectSourceRoot,
+        nomount: true,
     });
 }
 async function isDirectory(path) {

package/src/builders/server/index.d.ts

@@ -15,11 +15,18 @@ import { Schema as ServerBuilderOptions } from './schema';
  */
 export declare type ServerBuilderOutput = BuilderOutput & {
     baseOutputPath: string;
+    /**
+     * @deprecated in version 14. Use 'outputs' instead.
+     */
     outputPaths: string[];
     /**
-     * @deprecated in version 9. Use 'outputPaths' instead.
+     * @deprecated in version 9. Use 'outputs' instead.
      */
     outputPath: string;
+    outputs: {
+        locale?: string;
+        path: string;
+    }[];
 };
 export { ServerBuilderOptions };
 /**

package/src/builders/server/index.js

@@ -102,6 +102,13 @@ function execute(options, context, transforms = {}) {
             baseOutputPath,
             outputPath: baseOutputPath,
             outputPaths: outputPaths || [baseOutputPath],
+            outputs: (outputPaths &&
+                [...outputPaths.entries()].map(([locale, path]) => ({
+                    locale,
+                    path,
+                }))) || {
+                path: baseOutputPath,
+            },
         };
     }));
 }

package/src/utils/color.js

@@ -64,7 +64,6 @@ function removeColor(text) {
 }
 exports.removeColor = removeColor;
 // Create a separate instance to prevent unintended global changes to the color configuration
-// Create function is not defined in the typings. See: https://github.com/doowb/ansi-colors/pull/44
 const colors = ansiColors.create();
 exports.colors = colors;
 colors.enabled = supportColor();

package/src/utils/copy-assets.js

@@ -37,17 +37,18 @@ exports.copyAssets = void 0;
 const fs = __importStar(require("fs"));
 const glob_1 = __importDefault(require("glob"));
 const path = __importStar(require("path"));
-function globAsync(pattern, options) {
-    return new Promise((resolve, reject) => (0, glob_1.default)(pattern, options, (e, m) => (e ? reject(e) : resolve(m))));
-}
+const util_1 = require("util");
+const globPromise = (0, util_1.promisify)(glob_1.default);
 async function copyAssets(entries, basePaths, root, changed) {
     const defaultIgnore = ['.gitkeep', '**/.DS_Store', '**/Thumbs.db'];
     for (const entry of entries) {
         const cwd = path.resolve(root, entry.input);
-        const files = await globAsync(entry.glob, {
+        const files = await globPromise(entry.glob, {
             cwd,
             dot: true,
             nodir: true,
+            root: cwd,
+            nomount: true,
             ignore: entry.ignore ? defaultIgnore.concat(entry.ignore) : defaultIgnore,
             follow: entry.followSymlinks,
         });

package/src/utils/i18n-options.js

@@ -175,13 +175,15 @@ async function configureI18nBuild(context, options) {
     }
     // If inlining store the output in a temporary location to facilitate post-processing
     if (i18n.shouldInline) {
+        // TODO: we should likely save these in the .angular directory in the next major version.
+        // We'd need to do a migration to add the temp directory to gitignore.
         const tempPath = fs_1.default.mkdtempSync(path_1.default.join(fs_1.default.realpathSync(os_1.default.tmpdir()), 'angular-cli-i18n-'));
         buildOptions.outputPath = tempPath;
-        process.on('exit', () => deleteTempDirectory(tempPath));
-        process.once('SIGINT', () => {
-            deleteTempDirectory(tempPath);
-            // Needed due to `ora` as otherwise process will not terminate.
-            process.kill(process.pid, 'SIGINT');
+        process.on('exit', () => {
+            try {
+                fs_1.default.rmSync(tempPath, { force: true, recursive: true, maxRetries: 3 });
+            }
+            catch { }
         });
     }
     return { buildOptions, i18n };
@@ -198,13 +200,6 @@ function findLocaleDataPath(locale, resolver) {
         return scrubbedLocale === 'en-US' ? findLocaleDataPath('en', resolver) : null;
     }
 }
-/** Remove temporary directory used for i18n processing. */
-function deleteTempDirectory(tempPath) {
-    try {
-        fs_1.default.rmSync(tempPath, { force: true, recursive: true, maxRetries: 3 });
-    }
-    catch { }
-}
 function loadTranslations(locale, desc, workspaceRoot, loader, logger, usedFormats, duplicateTranslation) {
     let translations = undefined;
     for (const file of desc.files) {

package/src/webpack/configs/dev-server.js

@@ -86,6 +86,10 @@ async function getDevServerConfig(wco) {
                     },
                 ],
             },
+            // When setupExitSignals is enabled webpack-dev-server will shutdown gracefully which would
+            // require CTRL+C to be pressed multiple times to exit.
+            // See: https://github.com/webpack/webpack-dev-server/blob/c76b6d11a3821436c5e20207c8a38deb6ab7e33c/lib/Server.js#L1801-L1827
+            setupExitSignals: false,
             compress: false,
             static: false,
             server: getServerConfig(root, wco.buildOptions),

package/src/webpack/plugins/common-js-usage-warn-plugin.js

@@ -12,7 +12,9 @@ const path_1 = require("path");
 const webpack_diagnostics_1 = require("../../utils/webpack-diagnostics");
 // Webpack doesn't export these so the deep imports can potentially break.
 const AMDDefineDependency = require('webpack/lib/dependencies/AMDDefineDependency');
+const CommonJsExportsDependency = require('webpack/lib/dependencies/CommonJsExportsDependency');
 const CommonJsRequireDependency = require('webpack/lib/dependencies/CommonJsRequireDependency');
+const CommonJsSelfReferenceDependency = require('webpack/lib/dependencies/CommonJsSelfReferenceDependency');
 class CommonJsUsageWarnPlugin {
     constructor(options = {}) {
         this.options = options;
@@ -81,7 +83,10 @@ class CommonJsUsageWarnPlugin {
     }
     hasCommonJsDependencies(compilation, dependencies, checkParentModules = false) {
         for (const dep of dependencies) {
-            if (dep instanceof CommonJsRequireDependency || dep instanceof AMDDefineDependency) {
+            if (dep instanceof CommonJsRequireDependency ||
+                dep instanceof CommonJsExportsDependency ||
+                dep instanceof CommonJsSelfReferenceDependency ||
+                dep instanceof AMDDefineDependency) {
                 return true;
             }
             if (checkParentModules) {

package/src/webpack/plugins/scripts-webpack-plugin.js

@@ -35,6 +35,10 @@ const loader_utils_1 = require("loader-utils");
 const path = __importStar(require("path"));
 const webpack_1 = require("webpack");
 const Entrypoint = require('webpack/lib/Entrypoint');
+/**
+ * The name of the plugin provided to Webpack when tapping Webpack compiler hooks.
+ */
+const PLUGIN_NAME = 'scripts-webpack-plugin';
 function addDependencies(compilation, scripts) {
     for (const script of scripts) {
         compilation.fileDependencies.add(script);
@@ -88,8 +92,8 @@ class ScriptsWebpackPlugin {
         const scripts = this.options.scripts
             .filter((script) => !!script)
             .map((script) => path.resolve(this.options.basePath || '', script));
-        compiler.hooks.thisCompilation.tap('scripts-webpack-plugin', (compilation) => {
-            compilation.hooks.additionalAssets.tapPromise('scripts-webpack-plugin', async () => {
+        compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+            compilation.hooks.additionalAssets.tapPromise(PLUGIN_NAME, async () => {
                 if (await this.shouldSkip(compilation, scripts)) {
                     if (this._cachedOutput) {
                         this._insertOutput(compilation, this._cachedOutput, true);
@@ -129,14 +133,24 @@ class ScriptsWebpackPlugin {
                     concatSource.add('\n;');
                 });
                 const combinedSource = new webpack_1.sources.CachedSource(concatSource);
-                const filename = (0, loader_utils_1.interpolateName)({ resourcePath: 'scripts.js' }, this.options.filename, {
-                    content: combinedSource.source(),
-                });
-                const output = { filename, source: combinedSource };
+                const output = { filename: this.options.filename, source: combinedSource };
                 this._insertOutput(compilation, output);
                 this._cachedOutput = output;
                 addDependencies(compilation, scripts);
             });
+            compilation.hooks.processAssets.tapPromise({
+                name: PLUGIN_NAME,
+                stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING,
+            }, async () => {
+                const assetName = this.options.filename;
+                const asset = compilation.getAsset(assetName);
+                if (asset) {
+                    const interpolatedFilename = (0, loader_utils_1.interpolateName)({ resourcePath: 'scripts.js' }, assetName, { content: asset.source.source() });
+                    if (assetName !== interpolatedFilename) {
+                        compilation.renameAsset(assetName, interpolatedFilename);
+                    }
+                }
+            });
         });
     }
 }

package/src/webpack/plugins/typescript.js

@@ -20,7 +20,6 @@ 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);
@@ -40,10 +39,7 @@ 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;
-        }
+        wco.logger.warn('DEPRECATED: ES5 output is deprecated. Please update TypeScript `target` compiler option to ES2015 or later.');
     }
     const fileReplacements = {};
     if (buildOptions.fileReplacements) {

package/src/webpack/utils/helpers.d.ts

@@ -16,11 +16,12 @@ export interface HashFormat {
     file: string;
     script: string;
 }
+export declare type WebpackStatsOptions = Exclude<Configuration['stats'], string | boolean | undefined>;
 export declare function getOutputHashFormat(outputHashing?: OutputHashing, length?: number): HashFormat;
 export declare type NormalizedEntryPoint = Required<Exclude<ScriptElement | StyleElement, string>>;
 export declare function normalizeExtraEntryPoints(extraEntryPoints: (ScriptElement | StyleElement)[], defaultBundleName: string): NormalizedEntryPoint[];
 export declare function assetNameTemplateFactory(hashFormat: HashFormat): (resourcePath: string) => string;
-export declare function getInstrumentationExcludedPaths(sourceRoot: string, excludedPaths: string[]): Set<string>;
+export declare function getInstrumentationExcludedPaths(root: string, excludedPaths: string[]): Set<string>;
 export declare function getCacheSettings(wco: WebpackConfigOptions, angularVersion: string): WebpackOptionsNormalized['cache'];
 export declare function globalScriptsByBundleName(root: string, scripts: ScriptElement[]): {
     bundleName: string;
@@ -29,7 +30,5 @@ export declare function globalScriptsByBundleName(root: string, scripts: ScriptE
 }[];
 export declare function assetPatterns(root: string, assets: AssetPatternClass[]): ObjectPattern[];
 export declare function externalizePackages(context: string, request: string | undefined, callback: (error?: Error, result?: string) => void): void;
-declare type WebpackStatsOptions = Exclude<Configuration['stats'], string | boolean>;
 export declare function getStatsOptions(verbose?: boolean): WebpackStatsOptions;
 export declare function getMainFieldsAndConditionNames(target: ScriptTarget, platformServer: boolean): Pick<WebpackOptionsNormalized['resolve'], 'mainFields' | 'conditionNames'>;
-export {};

package/src/webpack/utils/helpers.js

@@ -121,12 +121,12 @@ function assetNameTemplateFactory(hashFormat) {
     };
 }
 exports.assetNameTemplateFactory = assetNameTemplateFactory;
-function getInstrumentationExcludedPaths(sourceRoot, excludedPaths) {
+function getInstrumentationExcludedPaths(root, excludedPaths) {
     const excluded = new Set();
     for (const excludeGlob of excludedPaths) {
         glob_1.default
-            .sync(excludeGlob, { nodir: true, cwd: sourceRoot })
-            .forEach((p) => excluded.add(path.join(sourceRoot, p)));
+            .sync(excludeGlob, { nodir: true, cwd: root, root, nomount: true })
+            .forEach((p) => excluded.add(path.join(root, p)));
     }
     return excluded;
 }
@@ -278,6 +278,7 @@ function getStatsOptions(verbose = false) {
         version: true,
         chunkModules: true,
         errorDetails: true,
+        errorStack: true,
         moduleTrace: true,
         logging: 'verbose',
         modulesSpace: Infinity,

package/src/webpack/utils/stats.d.ts

@@ -10,6 +10,7 @@ import { logging } from '@angular-devkit/core';
 import { Configuration, StatsCompilation } from 'webpack';
 import { Schema as BrowserBuilderOptions } from '../../builders/browser/schema';
 import { BudgetCalculatorResult } from '../../utils/bundle-calculator';
+import { WebpackStatsOptions } from './helpers';
 export declare function formatSize(size: number): string;
 export declare type BundleStatsData = [
     files: string,
@@ -29,8 +30,8 @@ export declare function generateBundleStats(info: {
     initial?: boolean;
     rendered?: boolean;
 }): BundleStats;
-export declare function statsWarningsToString(json: StatsCompilation, statsConfig: any): string;
-export declare function statsErrorsToString(json: StatsCompilation, statsConfig: any): string;
+export declare function statsWarningsToString(json: StatsCompilation, statsConfig: WebpackStatsOptions): string;
+export declare function statsErrorsToString(json: StatsCompilation, statsConfig: WebpackStatsOptions): string;
 export declare function statsHasErrors(json: StatsCompilation): boolean;
 export declare function statsHasWarnings(json: StatsCompilation): boolean;
 export declare function createWebpackLoggingCallback(options: BrowserBuilderOptions, logger: logging.LoggerApi): WebpackLoggingCallback;

package/src/webpack/utils/stats.js

@@ -261,7 +261,6 @@ statsConfig, budgetFailures) {
       `));
     }
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function statsWarningsToString(json, statsConfig) {
     const colors = statsConfig.colors;
     const c = (x) => (colors ? color_1.colors.reset.cyan(x) : x);
@@ -294,8 +293,8 @@ function statsWarningsToString(json, statsConfig) {
     return output ? '\n' + output : output;
 }
 exports.statsWarningsToString = statsWarningsToString;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function statsErrorsToString(json, statsConfig) {
+    var _a, _b;
     const colors = statsConfig.colors;
     const c = (x) => (colors ? color_1.colors.reset.cyan(x) : x);
     const yb = (x) => (colors ? color_1.colors.reset.yellowBright(x) : x);
@@ -310,7 +309,16 @@ function statsErrorsToString(json, statsConfig) {
             output += r(`Error: ${error}\n\n`);
         }
         else {
-            const file = error.file || error.moduleName;
+            let file = error.file || error.moduleName;
+            // Clean up error paths
+            // Ex: ./src/app/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js....
+            // to ./src/app/styles.scss.webpack
+            if (file && !statsConfig.errorDetails) {
+                const webpackPathIndex = file.indexOf('.webpack[');
+                if (webpackPathIndex !== -1) {
+                    file = file.substring(0, webpackPathIndex);
+                }
+            }
             if (file) {
                 output += c(file);
                 if (error.loc) {
@@ -318,10 +326,16 @@ function statsErrorsToString(json, statsConfig) {
                 }
                 output += ' - ';
             }
-            if (!/^error/i.test(error.message)) {
+            // In most cases webpack will add stack traces to error messages.
+            // This below cleans up the error from stacks.
+            // See: https://github.com/webpack/webpack/issues/15980
+            const message = statsConfig.errorStack
+                ? error.message
+                : (_b = (_a = /[\s\S]+?(?=[\n\s]+at)/.exec(error.message)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : error.message;
+            if (!/^error/i.test(message)) {
                 output += r('Error: ');
             }
-            output += `${error.message}\n\n`;
+            output += `${message}\n\n`;
         }
     }
     return output ? '\n' + output : output;
@@ -358,6 +372,9 @@ function createWebpackLoggingCallback(options, logger) {
 exports.createWebpackLoggingCallback = createWebpackLoggingCallback;
 function webpackStatsLogger(logger, json, config, budgetFailures) {
     logger.info(statsToString(json, config.stats, budgetFailures));
+    if (typeof config.stats !== 'object') {
+        throw new Error('Invalid Webpack stats configuration.');
+    }
     if (statsHasWarnings(json)) {
         logger.warn(statsWarningsToString(json, config.stats));
     }