@angular-devkit/build-angular 12.0.0-rc.2 → 12.0.2

package/package.json

@@ -1,25 +1,25 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "12.0.0-rc.2",
+  "version": "12.0.2",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
-    "@angular-devkit/architect": "0.1200.0-rc.2",
-    "@angular-devkit/build-optimizer": "0.1200.0-rc.2",
-    "@angular-devkit/build-webpack": "0.1200.0-rc.2",
-    "@angular-devkit/core": "12.0.0-rc.2",
-    "@babel/core": "7.13.13",
-    "@babel/generator": "7.13.9",
+    "@angular-devkit/architect": "0.1200.2",
+    "@angular-devkit/build-optimizer": "0.1200.2",
+    "@angular-devkit/build-webpack": "0.1200.2",
+    "@angular-devkit/core": "12.0.2",
+    "@babel/core": "7.14.3",
+    "@babel/generator": "7.14.3",
     "@babel/plugin-transform-async-to-generator": "7.13.0",
-    "@babel/plugin-transform-runtime": "7.13.10",
-    "@babel/preset-env": "7.13.12",
-    "@babel/runtime": "7.13.10",
+    "@babel/plugin-transform-runtime": "7.14.3",
+    "@babel/preset-env": "7.14.2",
+    "@babel/runtime": "7.14.0",
     "@babel/template": "7.12.13",
     "@discoveryjs/json-ext": "0.5.2",
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
-    "@ngtools/webpack": "12.0.0-rc.2",
+    "@ngtools/webpack": "12.0.2",
     "ansi-colors": "4.1.1",
     "babel-loader": "8.2.2",
     "browserslist": "^4.9.1",
@@ -27,12 +27,12 @@
     "caniuse-lite": "^1.0.30001032",
     "circular-dependency-plugin": "5.2.2",
     "copy-webpack-plugin": "8.1.1",
-    "core-js": "3.11.1",
+    "core-js": "3.12.0",
     "critters": "0.0.10",
     "css-loader": "5.2.4",
-    "cssnano": "5.0.2",
+    "css-minimizer-webpack-plugin": "3.0.0",
     "find-cache-dir": "3.3.1",
-    "glob": "7.1.6",
+    "glob": "7.1.7",
     "https-proxy-agent": "5.0.0",
     "inquirer": "8.0.0",
     "jest-worker": "26.6.2",
@@ -43,16 +43,16 @@
     "loader-utils": "2.0.0",
     "mini-css-extract-plugin": "1.5.1",
     "minimatch": "3.0.4",
-    "open": "8.0.7",
+    "open": "8.0.2",
     "ora": "5.4.0",
     "parse5-html-rewriting-stream": "6.0.1",
-    "postcss": "8.2.13",
+    "postcss": "8.3.0",
     "postcss-import": "14.0.1",
     "postcss-loader": "5.2.0",
     "postcss-preset-env": "6.7.0",
     "raw-loader": "4.0.2",
     "regenerator-runtime": "0.13.7",
-    "resolve-url-loader": "3.1.2",
+    "resolve-url-loader": "4.0.0",
     "rimraf": "3.0.2",
     "rxjs": "6.6.7",
     "sass": "1.32.12",
@@ -65,21 +65,21 @@
     "stylus": "0.54.8",
     "stylus-loader": "5.0.0",
     "terser": "5.7.0",
-    "terser-webpack-plugin": "4.2.3",
+    "terser-webpack-plugin": "5.1.2",
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
-    "webpack": "5.36.1",
+    "webpack": "5.36.2",
     "webpack-dev-middleware": "4.1.0",
     "webpack-dev-server": "3.11.2",
     "webpack-merge": "5.7.3",
     "webpack-subresource-integrity": "1.5.2"
   },
   "peerDependencies": {
-    "@angular/compiler-cli": "^12.0.0-next",
-    "@angular/localize": "^12.0.0-next",
-    "@angular/service-worker": "^12.0.0-next",
+    "@angular/compiler-cli": "^12.0.0",
+    "@angular/localize": "^12.0.0",
+    "@angular/service-worker": "^12.0.0",
     "karma": "^6.3.0",
-    "ng-packagr": "^12.0.0-next",
+    "ng-packagr": "^12.0.0",
     "protractor": "^7.0.0",
     "tailwindcss": "^2.0.0",
     "tslint": "^6.1.0",

package/src/dev-server/index.js

@@ -133,7 +133,8 @@ function serveWebpackBrowser(options, context, transforms = {}) {
             logger.warn(core_1.tags.stripIndents `NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.
       See https://webpack.js.org/guides/hot-module-replacement for information on working with HMR for Webpack.`);
         }
-        if (options.host &&
+        if (!options.disableHostCheck &&
+            options.host &&
             !/^127\.\d+\.\d+\.\d+/g.test(options.host) &&
             options.host !== 'localhost') {
             logger.warn(core_1.tags.stripIndent `

package/src/dev-server/schema.d.ts

@@ -84,7 +84,8 @@ export interface Schema {
      */
     progress?: boolean;
     /**
-     * Proxy configuration file.
+     * Proxy configuration file. For more information, see
+     * https://angular.io/guide/build#proxying-to-a-backend-server.
      */
     proxyConfig?: string;
     /**

package/src/dev-server/schema.json

@@ -21,7 +21,7 @@
     },
     "proxyConfig": {
       "type": "string",
-      "description": "Proxy configuration file."
+      "description": "Proxy configuration file. For more information, see https://angular.io/guide/build#proxying-to-a-backend-server."
     },
     "ssl": {
       "type": "boolean",

package/src/extract-i18n/index.js

@@ -150,6 +150,7 @@ async function execute(options, context, transforms) {
             configs_1.getCommonConfig(wco),
             configs_1.getBrowserConfig(wco),
             configs_1.getTypeScriptConfig(wco),
+            configs_1.getWorkerConfig(wco),
             configs_1.getStatsConfig(wco),
         ];
         // Add Ivy application file extractor support
@@ -170,6 +171,7 @@ async function execute(options, context, transforms) {
         partials.push({
             plugins: [
                 new webpack.NormalModuleReplacementPlugin(/\.(css|scss|sass|styl|less)$/, path.join(__dirname, 'empty-export-default.js')),
+                new webpack.NormalModuleReplacementPlugin(/^angular-resource:\/\//, path.join(__dirname, 'empty-export-default.js')),
             ],
         });
         return partials;

package/src/sass/sass-service.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @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 { Options, Result, SassException } from 'sass';
+/**
+ * The callback type for the `dart-sass` asynchronous render function.
+ */
+declare type RenderCallback = (error?: SassException, result?: Result) => void;
+/**
+ * A Sass renderer implementation that provides an interface that can be used by Webpack's
+ * `sass-loader`. The implementation uses a Worker thread to perform the Sass rendering
+ * with the `dart-sass` package.  The `dart-sass` synchronous render function is used within
+ * the worker which can be up to two times faster than the asynchronous variant.
+ */
+export declare class SassWorkerImplementation {
+    private readonly workers;
+    private readonly availableWorkers;
+    private readonly requests;
+    private idCounter;
+    private nextWorkerIndex;
+    /**
+     * Provides information about the Sass implementation.
+     * This mimics enough of the `dart-sass` value to be used with the `sass-loader`.
+     */
+    get info(): string;
+    /**
+     * The synchronous render function is not used by the `sass-loader`.
+     */
+    renderSync(): never;
+    /**
+     * Asynchronously request a Sass stylesheet to be renderered.
+     *
+     * @param options The `dart-sass` options to use when rendering the stylesheet.
+     * @param callback The function to execute when the rendering is complete.
+     */
+    render(options: Options, callback: RenderCallback): void;
+    /**
+     * Shutdown the Sass render worker.
+     * Executing this method will stop any pending render requests.
+     *
+     * The worker is unreferenced upon creation and will not block application exit. This method
+     * is only needed if early cleanup is needed.
+     */
+    close(): void;
+    private createWorker;
+    private processImporters;
+    private createRequest;
+}
+export {};

package/src/sass/sass-service.js

@@ -0,0 +1,186 @@
+"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.SassWorkerImplementation = void 0;
+const worker_threads_1 = require("worker_threads");
+const environment_options_1 = require("../utils/environment-options");
+/**
+ * The maximum number of Workers that will be created to execute render requests.
+ */
+const MAX_RENDER_WORKERS = environment_options_1.maxWorkers;
+/**
+ * Workaround required for lack of new Worker transfer list support in Node.js prior to 12.17
+ */
+let transferListWorkaround = false;
+const version = process.versions.node.split('.').map((part) => Number(part));
+if (version[0] === 12 && version[1] < 17) {
+    transferListWorkaround = true;
+}
+/**
+ * A Sass renderer implementation that provides an interface that can be used by Webpack's
+ * `sass-loader`. The implementation uses a Worker thread to perform the Sass rendering
+ * with the `dart-sass` package.  The `dart-sass` synchronous render function is used within
+ * the worker which can be up to two times faster than the asynchronous variant.
+ */
+class SassWorkerImplementation {
+    constructor() {
+        this.workers = [];
+        this.availableWorkers = [];
+        this.requests = new Map();
+        this.idCounter = 1;
+        this.nextWorkerIndex = 0;
+    }
+    /**
+     * Provides information about the Sass implementation.
+     * This mimics enough of the `dart-sass` value to be used with the `sass-loader`.
+     */
+    get info() {
+        return 'dart-sass\tworker';
+    }
+    /**
+     * The synchronous render function is not used by the `sass-loader`.
+     */
+    renderSync() {
+        throw new Error('Sass renderSync is not supported.');
+    }
+    /**
+     * Asynchronously request a Sass stylesheet to be renderered.
+     *
+     * @param options The `dart-sass` options to use when rendering the stylesheet.
+     * @param callback The function to execute when the rendering is complete.
+     */
+    render(options, callback) {
+        // The `functions` and `importer` options are JavaScript functions that cannot be transferred.
+        // If any additional function options are added in the future, they must be excluded as well.
+        const { functions, importer, ...serializableOptions } = options;
+        // The CLI's configuration does not use or expose the ability to defined custom Sass functions
+        if (functions && Object.keys(functions).length > 0) {
+            throw new Error('Sass custom functions are not supported.');
+        }
+        let workerIndex = this.availableWorkers.pop();
+        if (workerIndex === undefined) {
+            if (this.workers.length < MAX_RENDER_WORKERS) {
+                workerIndex = this.workers.length;
+                this.workers.push(this.createWorker());
+            }
+            else {
+                workerIndex = this.nextWorkerIndex++;
+                if (this.nextWorkerIndex >= this.workers.length) {
+                    this.nextWorkerIndex = 0;
+                }
+            }
+        }
+        const request = this.createRequest(workerIndex, callback, importer);
+        this.requests.set(request.id, request);
+        this.workers[workerIndex].postMessage({
+            id: request.id,
+            hasImporter: !!importer,
+            options: serializableOptions,
+        });
+    }
+    /**
+     * Shutdown the Sass render worker.
+     * Executing this method will stop any pending render requests.
+     *
+     * The worker is unreferenced upon creation and will not block application exit. This method
+     * is only needed if early cleanup is needed.
+     */
+    close() {
+        for (const worker of this.workers) {
+            void worker.terminate();
+        }
+        this.requests.clear();
+    }
+    createWorker() {
+        const { port1: mainImporterPort, port2: workerImporterPort } = new worker_threads_1.MessageChannel();
+        const importerSignal = new Int32Array(new SharedArrayBuffer(4));
+        const workerPath = require.resolve('./worker');
+        const worker = new worker_threads_1.Worker(workerPath, {
+            workerData: transferListWorkaround ? undefined : { workerImporterPort, importerSignal },
+            transferList: transferListWorkaround ? undefined : [workerImporterPort],
+        });
+        if (transferListWorkaround) {
+            worker.postMessage({ init: true, workerImporterPort, importerSignal }, [workerImporterPort]);
+        }
+        worker.on('message', (response) => {
+            const request = this.requests.get(response.id);
+            if (!request) {
+                return;
+            }
+            this.requests.delete(response.id);
+            this.availableWorkers.push(request.workerIndex);
+            if (response.result) {
+                // The results are expected to be Node.js `Buffer` objects but will each be transferred as
+                // a Uint8Array that does not have the expected `toString` behavior of a `Buffer`.
+                const { css, map, stats } = response.result;
+                const result = {
+                    // This `Buffer.from` override will use the memory directly and avoid making a copy
+                    css: Buffer.from(css.buffer, css.byteOffset, css.byteLength),
+                    stats,
+                };
+                if (map) {
+                    // This `Buffer.from` override will use the memory directly and avoid making a copy
+                    result.map = Buffer.from(map.buffer, map.byteOffset, map.byteLength);
+                }
+                request.callback(undefined, result);
+            }
+            else {
+                request.callback(response.error);
+            }
+        });
+        mainImporterPort.on('message', ({ id, url, prev }) => {
+            const request = this.requests.get(id);
+            if (!(request === null || request === void 0 ? void 0 : request.importers)) {
+                mainImporterPort.postMessage(null);
+                Atomics.store(importerSignal, 0, 1);
+                Atomics.notify(importerSignal, 0);
+                return;
+            }
+            this.processImporters(request.importers, url, prev)
+                .then((result) => {
+                mainImporterPort.postMessage(result);
+            })
+                .catch((error) => {
+                mainImporterPort.postMessage(error);
+            })
+                .finally(() => {
+                Atomics.store(importerSignal, 0, 1);
+                Atomics.notify(importerSignal, 0);
+            });
+        });
+        worker.unref();
+        mainImporterPort.unref();
+        return worker;
+    }
+    async processImporters(importers, url, prev) {
+        let result = null;
+        for (const importer of importers) {
+            result = await new Promise((resolve) => {
+                // Importers can be both sync and async
+                const innerResult = importer(url, prev, resolve);
+                if (innerResult !== undefined) {
+                    resolve(innerResult);
+                }
+            });
+            if (result) {
+                break;
+            }
+        }
+        return result;
+    }
+    createRequest(workerIndex, callback, importer) {
+        return {
+            id: this.idCounter++,
+            workerIndex,
+            callback,
+            importers: !importer || Array.isArray(importer) ? importer : [importer],
+        };
+    }
+}
+exports.SassWorkerImplementation = SassWorkerImplementation;

package/src/sass/worker.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @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
+ */
+export {};

package/src/sass/worker.js

@@ -0,0 +1,49 @@
+"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 });
+const sass_1 = require("sass");
+const worker_threads_1 = require("worker_threads");
+if (!worker_threads_1.parentPort) {
+    throw new Error('Sass worker must be executed as a Worker.');
+}
+// The importer variables are used to proxy import requests to the main thread
+let { workerImporterPort, importerSignal } = (worker_threads_1.workerData || {});
+worker_threads_1.parentPort.on('message', (message) => {
+    // The init message is only needed to support Node.js < 12.17 and can be removed once support is dropped
+    if (message.init) {
+        workerImporterPort = message.workerImporterPort;
+        importerSignal = message.importerSignal;
+        return;
+    }
+    const { id, hasImporter, options } = message;
+    try {
+        if (hasImporter) {
+            // When a custom importer function is present, the importer request must be proxied
+            // back to the main thread where it can be executed.
+            // This process must be synchronous from the perspective of dart-sass. The `Atomics`
+            // functions combined with the shared memory `importSignal` and the Node.js
+            // `receiveMessageOnPort` function are used to ensure synchronous behavior.
+            options.importer = (url, prev) => {
+                var _a;
+                Atomics.store(importerSignal, 0, 0);
+                workerImporterPort.postMessage({ id, url, prev });
+                Atomics.wait(importerSignal, 0, 0);
+                return (_a = worker_threads_1.receiveMessageOnPort(workerImporterPort)) === null || _a === void 0 ? void 0 : _a.message;
+            };
+        }
+        // The synchronous Sass render function can be up to two times faster than the async variant
+        const result = sass_1.renderSync(options);
+        worker_threads_1.parentPort === null || worker_threads_1.parentPort === void 0 ? void 0 : worker_threads_1.parentPort.postMessage({ id, result });
+    }
+    catch (error) {
+        // Needed because V8 will only serialize the message and stack properties of an Error instance.
+        const { formatted, file, line, column, message, stack } = error;
+        worker_threads_1.parentPort === null || worker_threads_1.parentPort === void 0 ? void 0 : worker_threads_1.parentPort.postMessage({ id, error: { formatted, file, line, column, message, stack } });
+    }
+});

package/src/utils/action-executor.js

@@ -13,7 +13,7 @@ const os = require("os");
 const path = require("path");
 const v8_1 = require("v8");
 const action_cache_1 = require("./action-cache");
-const workers_1 = require("./workers");
+const environment_options_1 = require("./environment-options");
 let workerFile = require.resolve('./process-bundle');
 workerFile =
     path.extname(workerFile) === '.ts' ? require.resolve('./process-bundle-bootstrap') : workerFile;
@@ -36,7 +36,7 @@ class BundleActionExecutor {
         return (this.largeWorker = new jest_worker_1.default(workerFile, {
             exposedMethods: ['process', 'inlineLocales'],
             setupArgs: [[...v8_1.serialize(this.workerOptions)]],
-            numWorkers: workers_1.maxWorkers,
+            numWorkers: environment_options_1.maxWorkers,
         }));
     }
     ensureSmall() {

package/src/utils/environment-options.d.ts

@@ -11,3 +11,4 @@ export declare const allowMinify: boolean;
 export declare const cachingDisabled: boolean;
 export declare const cachingBasePath: string | null;
 export declare const profilingEnabled: boolean;
+export declare const maxWorkers: number;

package/src/utils/environment-options.js

@@ -7,7 +7,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.profilingEnabled = exports.cachingBasePath = exports.cachingDisabled = exports.allowMinify = exports.shouldBeautify = exports.allowMangle = void 0;
+exports.maxWorkers = exports.profilingEnabled = exports.cachingBasePath = exports.cachingDisabled = exports.allowMinify = exports.shouldBeautify = exports.allowMangle = void 0;
 const path = require("path");
 function isDisabled(variable) {
     return variable === '0' || variable.toLowerCase() === 'false';
@@ -72,3 +72,14 @@ exports.cachingBasePath = (() => {
 // Build profiling
 const profilingVariable = process.env['NG_BUILD_PROFILING'];
 exports.profilingEnabled = isPresent(profilingVariable) && isEnabled(profilingVariable);
+/**
+ * Some environments, like CircleCI which use Docker report a number of CPUs by the host and not the count of available.
+ * This cause `Error: Call retries were exceeded` errors when trying to use them.
+ *
+ * @see https://github.com/nodejs/node/issues/28762
+ * @see https://github.com/webpack-contrib/terser-webpack-plugin/issues/143
+ * @see https://ithub.com/angular/angular-cli/issues/16860#issuecomment-588828079
+ *
+ */
+const maxWorkersVariable = process.env['NG_BUILD_MAX_WORKERS'];
+exports.maxWorkers = isPresent(maxWorkersVariable) ? +maxWorkersVariable : 4;

package/src/utils/index.d.ts

@@ -15,4 +15,3 @@ export * from './normalize-source-maps';
 export * from './normalize-optimization';
 export * from './normalize-builder-schema';
 export * from './url';
-export * from './workers';

package/src/utils/index.js

@@ -27,4 +27,3 @@ __exportStar(require("./normalize-source-maps"), exports);
 __exportStar(require("./normalize-optimization"), exports);
 __exportStar(require("./normalize-builder-schema"), exports);
 __exportStar(require("./url"), exports);
-__exportStar(require("./workers"), exports);

package/src/utils/service-worker.js

@@ -40,7 +40,7 @@ class CliFilesystem {
         for await (const entry of await fs_1.promises.opendir(dir)) {
             if (entry.isFile()) {
                 // Uses posix paths since the service worker expects URLs
-                items.push('/' + path.posix.relative(this.base, path.posix.join(dir, entry.name)));
+                items.push('/' + path.relative(this.base, path.join(dir, entry.name)).replace(/\\/g, '/'));
             }
             else if (entry.isDirectory()) {
                 subdirectories.push(path.join(dir, entry.name));

package/src/webpack/configs/common.js

@@ -23,7 +23,6 @@ const webpack_diagnostics_1 = require("../../utils/webpack-diagnostics");
 const plugins_1 = require("../plugins");
 const helpers_1 = require("../utils/helpers");
 const stats_1 = require("../utils/stats");
-const TerserPlugin = require('terser-webpack-plugin');
 // eslint-disable-next-line max-lines-per-function
 function getCommonConfig(wco) {
     var _a;
@@ -34,6 +33,7 @@ function getCommonConfig(wco) {
     const entryPoints = {};
     // determine hashing format
     const hashFormat = helpers_1.getOutputHashFormat(buildOptions.outputHashing || 'none');
+    const buildBrowserFeatures = new utils_1.BuildBrowserFeatures(projectRoot);
     const targetInFileName = helpers_1.getEsVersionForFileName(tsConfig.options.target, buildOptions.differentialLoadingNeeded);
     if (buildOptions.main) {
         const mainPath = path.resolve(root, buildOptions.main);
@@ -42,7 +42,6 @@ function getCommonConfig(wco) {
     const differentialLoadingMode = buildOptions.differentialLoadingNeeded && !buildOptions.watch;
     if (platform !== 'server') {
         if (differentialLoadingMode || tsConfig.options.target === typescript_1.ScriptTarget.ES5) {
-            const buildBrowserFeatures = new utils_1.BuildBrowserFeatures(projectRoot);
             if (buildBrowserFeatures.isEs5SupportNeeded()) {
                 const polyfillsChunkName = 'polyfills-es5';
                 entryPoints[polyfillsChunkName] = [path.join(__dirname, '..', 'es5-polyfills.js')];
@@ -200,7 +199,7 @@ function getCommonConfig(wco) {
                 compiler.hooks.done.tapPromise('angular-cli-stats', async (stats) => {
                     const { stringifyStream } = await Promise.resolve().then(() => require('@discoveryjs/json-ext'));
                     const data = stats.toJson('verbose');
-                    const statsOutputPath = path.join(root, buildOptions.outputPath, 'stats.json');
+                    const statsOutputPath = path.resolve(root, buildOptions.outputPath, 'stats.json');
                     try {
                         await fs_1.promises.mkdir(path.dirname(statsOutputPath), { recursive: true });
                         await new Promise((resolve, reject) => stringifyStream(data)
@@ -234,14 +233,8 @@ function getCommonConfig(wco) {
         ];
     }
     const extraMinimizers = [];
-    if (stylesOptimization.minify) {
-        extraMinimizers.push(new plugins_1.OptimizeCssWebpackPlugin({
-            sourceMap: stylesSourceMap,
-            // component styles retain their original file name
-            test: (file) => /\.(?:css|scss|sass|less|styl)$/.test(file),
-        }));
-    }
     if (scriptsOptimization) {
+        const TerserPlugin = require('terser-webpack-plugin');
         const { GLOBAL_DEFS_FOR_TERSER, GLOBAL_DEFS_FOR_TERSER_WITH_AOT, } = require('@angular/compiler-cli');
         const angularGlobalDefinitions = buildOptions.aot
             ? GLOBAL_DEFS_FOR_TERSER_WITH_AOT
@@ -285,9 +278,7 @@ function getCommonConfig(wco) {
         };
         const globalScriptsNames = globalScriptsByBundleName.map((s) => s.bundleName);
         extraMinimizers.push(new TerserPlugin({
-            sourceMap: scriptsSourceMap,
-            parallel: utils_1.maxWorkers,
-            cache: !environment_options_1.cachingDisabled && cache_path_1.findCachePath('terser-webpack'),
+            parallel: environment_options_1.maxWorkers,
             extractComments: false,
             exclude: globalScriptsNames,
             terserOptions,
@@ -295,9 +286,7 @@ function getCommonConfig(wco) {
         // Script bundles are fully optimized here in one step since they are never downleveled.
         // They are shared between ES2015 & ES5 outputs so must support ES5.
         new TerserPlugin({
-            sourceMap: scriptsSourceMap,
-            parallel: utils_1.maxWorkers,
-            cache: !environment_options_1.cachingDisabled && cache_path_1.findCachePath('terser-webpack'),
+            parallel: environment_options_1.maxWorkers,
             extractComments: false,
             include: globalScriptsNames,
             terserOptions: {
@@ -337,6 +326,7 @@ function getCommonConfig(wco) {
         context: root,
         entry: entryPoints,
         output: {
+            clean: buildOptions.deleteOutputPath,
             path: path.resolve(root, buildOptions.outputPath),
             publicPath: (_a = buildOptions.deployUrl) !== null && _a !== void 0 ? _a : '',
             filename: ({ chunk }) => {
@@ -374,6 +364,8 @@ function getCommonConfig(wco) {
                 },
                 {
                     test: /\.[cm]?js$|\.tsx?$/,
+                    // The below is needed due to a bug in `@babel/runtime`. See: https://github.com/babel/babel/issues/12824
+                    resolve: { fullySpecified: false },
                     exclude: [/[\/\\](?:core-js|\@babel|tslib|web-animations-js)[\/\\]/],
                     use: [
                         {
@@ -390,6 +382,10 @@ function getCommonConfig(wco) {
                 ...extraRules,
             ],
         },
+        experiments: {
+            syncWebAssembly: true,
+            asyncWebAssembly: true,
+        },
         cache: !!buildOptions.watch &&
             !environment_options_1.cachingDisabled && {
             type: 'memory',

package/src/webpack/configs/styles.js

@@ -10,7 +10,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStylesConfig = void 0;
 const fs = require("fs");
 const path = require("path");
+const sass_service_1 = require("../../sass/sass-service");
 const build_browser_features_1 = require("../../utils/build-browser-features");
+const environment_options_1 = require("../../utils/environment-options");
 const plugins_1 = require("../plugins");
 const helpers_1 = require("../utils/helpers");
 function resolveGlobalStyles(styleEntrypoints, root, preserveSymlinks) {
@@ -62,7 +64,7 @@ function getStylesConfig(wco) {
     // use includePaths from appConfig
     const includePaths = (_c = (_b = (_a = buildOptions.stylePreprocessorOptions) === null || _a === void 0 ? void 0 : _a.includePaths) === null || _b === void 0 ? void 0 : _b.map((p) => path.resolve(root, p))) !== null && _c !== void 0 ? _c : [];
     // Process global styles.
-    const { entryPoints, noInjectNames, paths: globalStylePaths } = resolveGlobalStyles(buildOptions.styles, root, !!buildOptions.preserveSymlinks);
+    const { entryPoints, noInjectNames, paths: globalStylePaths, } = resolveGlobalStyles(buildOptions.styles, root, !!buildOptions.preserveSymlinks);
     if (noInjectNames.length > 0) {
         // Add plugin to remove hashes from lazy styles.
         extraPlugins.push(new plugins_1.RemoveHashPlugin({ chunkNames: noInjectNames, hashFormat }));
@@ -78,7 +80,7 @@ function getStylesConfig(wco) {
             `To opt-out of the deprecated behaviour and start using 'sass' uninstall 'node-sass'.`);
     }
     catch {
-        sassImplementation = require('sass');
+        sassImplementation = new sass_service_1.SassWorkerImplementation();
     }
     const assetNameTemplate = helpers_1.assetNameTemplateFactory(hashFormat);
     const extraPostcssPlugins = [];
@@ -115,6 +117,11 @@ function getStylesConfig(wco) {
         }
     }
     const { supportedBrowsers } = new build_browser_features_1.BuildBrowserFeatures(wco.projectRoot);
+    const postcssPresetEnvPlugin = postcssPresetEnv({
+        browsers: supportedBrowsers,
+        autoprefixer: true,
+        stage: 3,
+    });
     const postcssOptionsCreator = (inlineSourcemaps, extracted) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const optionGenerator = (loader) => ({
@@ -150,11 +157,7 @@ function getStylesConfig(wco) {
                     extracted,
                 }),
                 ...extraPostcssPlugins,
-                postcssPresetEnv({
-                    browsers: supportedBrowsers,
-                    autoprefixer: true,
-                    stage: 3,
-                }),
+                postcssPresetEnvPlugin,
             ],
         });
         // postcss-loader fails when trying to determine configuration files for data URIs
@@ -232,6 +235,8 @@ function getStylesConfig(wco) {
                         implementation: sassImplementation,
                         sourceMap: true,
                         sassOptions: {
+                            // Prevent use of `fibers` package as it no longer works in newer Node.js versions
+                            fiber: false,
                             // bootstrap-sass requires a minimum precision of 8
                             precision: 8,
                             includePaths,
@@ -340,11 +345,46 @@ function getStylesConfig(wco) {
             ],
         });
     }
+    const extraMinimizers = [];
+    if (buildOptions.optimization.styles.minify) {
+        const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+        const minimizerOptions = {
+            preset: [
+                'default',
+                {
+                    // Disable SVG optimizations, as this can cause optimizations which are not compatible in all browsers.
+                    svgo: false,
+                    // Disable `calc` optimizations, due to several issues. #16910, #16875, #17890
+                    calc: false,
+                    // Disable CSS rules sorted due to several issues #20693, https://github.com/ionic-team/ionic-framework/issues/23266 and https://github.com/cssnano/cssnano/issues/1054
+                    cssDeclarationSorter: false,
+                },
+            ],
+        };
+        const globalBundlesRegExp = new RegExp(`^(${Object.keys(entryPoints).join('|')})(\.[0-9a-f]{20})?.css$`);
+        extraMinimizers.push(new CssMinimizerPlugin({
+            // Component styles retain their original file name
+            test: /\.(?:css|scss|sass|less|styl)$/,
+            parallel: false,
+            exclude: globalBundlesRegExp,
+            minify: [CssMinimizerPlugin.cssnanoMinify],
+            minimizerOptions,
+        }), new CssMinimizerPlugin({
+            test: /\.css$/,
+            include: globalBundlesRegExp,
+            parallel: environment_options_1.maxWorkers,
+            minify: [CssMinimizerPlugin.cssnanoMinify],
+            minimizerOptions,
+        }));
+    }
     return {
         entry: entryPoints,
         module: {
             rules: [...fileLanguageRules, ...inlineLanguageRules],
         },
+        optimization: {
+            minimizer: extraMinimizers,
+        },
         plugins: extraPlugins,
     };
 }

package/src/webpack/plugins/index-html-webpack-plugin.js

@@ -40,7 +40,7 @@ class IndexHtmlWebpackPlugin extends index_html_generator_1.IndexHtmlGenerator {
             const moduleFiles = [];
             try {
                 for (const [entryName, entrypoint] of this.compilation.entrypoints) {
-                    const entryFiles = (_a = entrypoint === null || entrypoint === void 0 ? void 0 : entrypoint.getFiles()) === null || _a === void 0 ? void 0 : _a.map((f) => ({
+                    const entryFiles = (_a = entrypoint === null || entrypoint === void 0 ? void 0 : entrypoint.getFiles()) === null || _a === void 0 ? void 0 : _a.filter((f) => !f.endsWith('.hot-update.js')).map((f) => ({
                         name: entryName,
                         file: f,
                         extension: path_1.extname(f),

package/src/webpack/plugins/index.d.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 export { AnyComponentStyleBudgetChecker } from './any-component-style-budget-checker';
-export { OptimizeCssWebpackPlugin, OptimizeCssWebpackPluginOptions, } from './optimize-css-webpack-plugin';
 export { ScriptsWebpackPlugin, ScriptsWebpackPluginOptions } from './scripts-webpack-plugin';
 export { SuppressExtractedTextChunksWebpackPlugin } from './suppress-entry-chunks-webpack-plugin';
 export { RemoveHashPlugin, RemoveHashPluginOptions } from './remove-hash-plugin';

package/src/webpack/plugins/index.js

@@ -7,12 +7,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PostcssCliResources = exports.CommonJsUsageWarnPlugin = exports.DedupeModuleResolvePlugin = exports.RemoveHashPlugin = exports.SuppressExtractedTextChunksWebpackPlugin = exports.ScriptsWebpackPlugin = exports.OptimizeCssWebpackPlugin = exports.AnyComponentStyleBudgetChecker = void 0;
+exports.PostcssCliResources = exports.CommonJsUsageWarnPlugin = exports.DedupeModuleResolvePlugin = exports.RemoveHashPlugin = exports.SuppressExtractedTextChunksWebpackPlugin = exports.ScriptsWebpackPlugin = exports.AnyComponentStyleBudgetChecker = void 0;
 // Exports the webpack plugins we use internally.
 var any_component_style_budget_checker_1 = require("./any-component-style-budget-checker");
 Object.defineProperty(exports, "AnyComponentStyleBudgetChecker", { enumerable: true, get: function () { return any_component_style_budget_checker_1.AnyComponentStyleBudgetChecker; } });
-var optimize_css_webpack_plugin_1 = require("./optimize-css-webpack-plugin");
-Object.defineProperty(exports, "OptimizeCssWebpackPlugin", { enumerable: true, get: function () { return optimize_css_webpack_plugin_1.OptimizeCssWebpackPlugin; } });
 var scripts_webpack_plugin_1 = require("./scripts-webpack-plugin");
 Object.defineProperty(exports, "ScriptsWebpackPlugin", { enumerable: true, get: function () { return scripts_webpack_plugin_1.ScriptsWebpackPlugin; } });
 var suppress_entry_chunks_webpack_plugin_1 = require("./suppress-entry-chunks-webpack-plugin");

package/src/webpack/plugins/postcss-cli-resources.js

@@ -83,7 +83,7 @@ function default_1(options) {
                 }
                 loader.addDependency(result);
                 if (emitFile) {
-                    loader.emitFile(outputPath, content, undefined);
+                    loader.emitFile(outputPath, content, undefined, { sourceFilename: result });
                 }
                 let outputUrl = outputPath.replace(/\\/g, '/');
                 if (hash || search) {

package/src/webpack/utils/async-chunks.js

@@ -24,17 +24,13 @@ function markAsyncChunksNonInitial(webpackStats, extraEntryPoints) {
         .filter((entryPoint) => !entryPoint.inject)
         .flatMap((entryPoint) => entryPoints[entryPoint.bundleName].chunks);
     // Find chunks for each ID.
-    const asyncChunks = asyncChunkIds
-        .map((chunkId) => {
+    const asyncChunks = asyncChunkIds.map((chunkId) => {
         const chunk = chunks.find((chunk) => chunk.id === chunkId);
         if (!chunk) {
             throw new Error(`Failed to find chunk (${chunkId}) in set:\n${JSON.stringify(chunks)}`);
         }
         return chunk;
-    })
-        // All Webpack chunks are dependent on `runtime`, which is never an async
-        // entry point, simply ignore this one.
-        .filter((chunk) => { var _a; return !!((_a = chunk.names) === null || _a === void 0 ? void 0 : _a.includes('runtime')); });
+    });
     // A chunk is considered `initial` only if Webpack already belives it to be initial
     // and the application developer did not mark it async via an extra entry point.
     return chunks.map((chunk) => ({

package/src/webpack/utils/stats.js

@@ -12,6 +12,7 @@ const core_1 = require("@angular-devkit/core");
 const path = require("path");
 const textTable = require("text-table");
 const color_1 = require("../../utils/color");
+const stats_1 = require("../configs/stats");
 function formatSize(size) {
     if (size <= 0) {
         return '0 bytes';
@@ -259,13 +260,7 @@ function createWebpackLoggingCallback(verbose, logger) {
         if (verbose) {
             logger.info(stats.toString(config.stats));
         }
-        webpackStatsLogger(logger, stats.toJson({
-            errors: true,
-            warnings: true,
-            builtAt: true,
-            assets: true,
-            chunks: true,
-        }), config);
+        webpackStatsLogger(logger, stats.toJson(stats_1.getWebpackStatsConfig(false)), config);
     };
 }
 exports.createWebpackLoggingCallback = createWebpackLoggingCallback;

package/src/utils/workers.d.ts

@@ -1,22 +0,0 @@
-/**
- * @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
- */
-/**
- * Use CPU count -1 with limit to 7 for workers not to clog the system.
- * Some environments, like CircleCI which use Docker report a number of CPUs by the host and not the count of available.
- * This cause `Error: Call retries were exceeded` errors when trying to use them.
- *
- * See:
- *
- * https://github.com/nodejs/node/issues/28762
- *
- * https://github.com/webpack-contrib/terser-webpack-plugin/issues/143
- *
- * https://github.com/angular/angular-cli/issues/16860#issuecomment-588828079
- *
- */
-export declare const maxWorkers: number;

package/src/utils/workers.js

@@ -1,26 +0,0 @@
-"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.maxWorkers = void 0;
-const os_1 = require("os");
-/**
- * Use CPU count -1 with limit to 7 for workers not to clog the system.
- * Some environments, like CircleCI which use Docker report a number of CPUs by the host and not the count of available.
- * This cause `Error: Call retries were exceeded` errors when trying to use them.
- *
- * See:
- *
- * https://github.com/nodejs/node/issues/28762
- *
- * https://github.com/webpack-contrib/terser-webpack-plugin/issues/143
- *
- * https://github.com/angular/angular-cli/issues/16860#issuecomment-588828079
- *
- */
-exports.maxWorkers = Math.max(Math.min(os_1.cpus().length, 8) - 1, 1);

package/src/webpack/plugins/optimize-css-webpack-plugin.d.ts

@@ -1,17 +0,0 @@
-/**
- * @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 { Compiler } from 'webpack';
-export interface OptimizeCssWebpackPluginOptions {
-    sourceMap: boolean;
-    test: (file: string) => boolean;
-}
-export declare class OptimizeCssWebpackPlugin {
-    private readonly _options;
-    constructor(options: Partial<OptimizeCssWebpackPluginOptions>);
-    apply(compiler: Compiler): void;
-}

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

@@ -1,106 +0,0 @@
-"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.OptimizeCssWebpackPlugin = void 0;
-const cssNano = require("cssnano");
-const webpack_1 = require("webpack");
-const webpack_diagnostics_1 = require("../../utils/webpack-diagnostics");
-const PLUGIN_NAME = 'optimize-css-webpack-plugin';
-function hook(compiler, action) {
-    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
-        compilation.hooks.processAssets.tapPromise({
-            name: PLUGIN_NAME,
-            stage: webpack_1.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE,
-        }, (assets) => action(compilation, Object.keys(assets)));
-    });
-}
-class OptimizeCssWebpackPlugin {
-    constructor(options) {
-        this._options = {
-            sourceMap: false,
-            test: (file) => file.endsWith('.css'),
-            ...options,
-        };
-    }
-    apply(compiler) {
-        hook(compiler, (compilation, assetsURI) => {
-            const files = [...compilation.additionalChunkAssets, ...assetsURI];
-            const actions = files
-                .filter((file) => this._options.test(file))
-                .map(async (file) => {
-                const asset = compilation.assets[file];
-                if (!asset) {
-                    return;
-                }
-                let content;
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                let map;
-                if (this._options.sourceMap && asset.sourceAndMap) {
-                    const sourceAndMap = asset.sourceAndMap({});
-                    content = sourceAndMap.source;
-                    map = sourceAndMap.map;
-                }
-                else {
-                    content = asset.source();
-                }
-                if (typeof content !== 'string') {
-                    content = content.toString();
-                }
-                if (content.length === 0) {
-                    return;
-                }
-                const cssNanoOptions = {
-                    preset: [
-                        'default',
-                        {
-                            // Disable SVG optimizations, as this can cause optimizations which are not compatible in all browsers.
-                            svgo: false,
-                            // Disable `calc` optimizations, due to several issues. #16910, #16875, #17890
-                            calc: false,
-                            // Disable CSS rules sorted due to several issues #20693, https://github.com/ionic-team/ionic-framework/issues/23266 and https://github.com/cssnano/cssnano/issues/1054
-                            cssDeclarationSorter: false,
-                        },
-                    ],
-                };
-                const postCssOptions = {
-                    from: file,
-                    map: map && { annotation: false, prev: map },
-                };
-                try {
-                    const output = await new Promise((resolve, reject) => {
-                        // @types/cssnano are not up to date with version 5.
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        cssNano(cssNanoOptions)
-                            .process(content, postCssOptions)
-                            .then(resolve)
-                            .catch((err) => reject(err));
-                    });
-                    for (const { text } of output.warnings()) {
-                        webpack_diagnostics_1.addWarning(compilation, text);
-                    }
-                    let newSource;
-                    if (output.map) {
-                        newSource = new webpack_1.sources.SourceMapSource(output.css, file, output.map.toString(), content, map);
-                    }
-                    else {
-                        newSource = new webpack_1.sources.RawSource(output.css);
-                    }
-                    compilation.assets[file] = newSource;
-                }
-                catch (error) {
-                    webpack_diagnostics_1.addError(compilation, error.message);
-                    return;
-                }
-            });
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            return Promise.all(actions).then(() => { });
-        });
-    }
-}
-exports.OptimizeCssWebpackPlugin = OptimizeCssWebpackPlugin;