@angular-devkit/build-angular 12.0.1 → 12.0.5

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "12.0.1",
+  "version": "12.0.5",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
-    "@angular-devkit/architect": "0.1200.1",
-    "@angular-devkit/build-optimizer": "0.1200.1",
-    "@angular-devkit/build-webpack": "0.1200.1",
-    "@angular-devkit/core": "12.0.1",
+    "@angular-devkit/architect": "0.1200.5",
+    "@angular-devkit/build-optimizer": "0.1200.5",
+    "@angular-devkit/build-webpack": "0.1200.5",
+    "@angular-devkit/core": "12.0.5",
     "@babel/core": "7.14.3",
     "@babel/generator": "7.14.3",
     "@babel/plugin-transform-async-to-generator": "7.13.0",
@@ -19,7 +19,7 @@
     "@babel/template": "7.12.13",
     "@discoveryjs/json-ext": "0.5.2",
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
-    "@ngtools/webpack": "12.0.1",
+    "@ngtools/webpack": "12.0.5",
     "ansi-colors": "4.1.1",
     "babel-loader": "8.2.2",
     "browserslist": "^4.9.1",
@@ -39,14 +39,14 @@
     "karma-source-map-support": "1.4.0",
     "less": "4.1.1",
     "less-loader": "8.1.1",
-    "license-webpack-plugin": "2.3.17",
+    "license-webpack-plugin": "2.3.19",
     "loader-utils": "2.0.0",
     "mini-css-extract-plugin": "1.5.1",
     "minimatch": "3.0.4",
     "open": "8.0.2",
     "ora": "5.4.0",
     "parse5-html-rewriting-stream": "6.0.1",
-    "postcss": "8.2.14",
+    "postcss": "8.3.0",
     "postcss-import": "14.0.1",
     "postcss-loader": "5.2.0",
     "postcss-preset-env": "6.7.0",
@@ -68,7 +68,7 @@
     "terser-webpack-plugin": "5.1.2",
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
-    "webpack": "5.36.2",
+    "webpack": "5.39.1",
     "webpack-dev-middleware": "4.1.0",
     "webpack-dev-server": "3.11.2",
     "webpack-merge": "5.7.3",
@@ -120,7 +120,7 @@
     "url": "https://github.com/angular/angular-cli.git"
   },
   "engines": {
-    "node": "^12.14.1 || ^14.0.0",
+    "node": "^12.14.1 || >=14.0.0",
     "npm": "^6.11.0 || ^7.5.6",
     "yarn": ">= 1.13.0"
   },

package/src/browser/index.js

@@ -69,7 +69,7 @@ async function initialize(options, context, differentialLoadingNeeded, webpackCo
     const originalOutputPath = options.outputPath;
     // Assets are processed directly by the builder except when watching
     const adjustedOptions = options.watch ? options : { ...options, assets: [] };
-    const { config, projectRoot, projectSourceRoot, i18n, } = await webpack_browser_config_1.generateI18nBrowserWebpackConfigFromContext(adjustedOptions, context, (wco) => [
+    const { config, projectRoot, projectSourceRoot, i18n } = await webpack_browser_config_1.generateI18nBrowserWebpackConfigFromContext(adjustedOptions, context, (wco) => [
         configs_1.getCommonConfig(wco),
         configs_1.getBrowserConfig(wco),
         configs_1.getStylesConfig(wco),
@@ -544,12 +544,10 @@ function assertNever(input) {
     throw new Error(`Unexpected call to assertNever() with input: ${JSON.stringify(input, null /* replacer */, 4 /* tabSize */)}`);
 }
 function generateBundleInfoStats(bundle, chunk, chunkType) {
-    var _a;
     return stats_1.generateBundleStats({
         size: bundle.size,
         files: bundle.map ? [bundle.filename, bundle.map.filename] : [bundle.filename],
         names: chunk === null || chunk === void 0 ? void 0 : chunk.names,
-        entry: !!((_a = chunk === null || chunk === void 0 ? void 0 : chunk.names) === null || _a === void 0 ? void 0 : _a.includes('runtime')),
         initial: !!(chunk === null || chunk === void 0 ? void 0 : chunk.initial),
         rendered: true,
         chunkType,

package/src/browser/schema.d.ts

@@ -407,7 +407,7 @@ export interface SourceMapClass {
  */
 export interface StylePreprocessorOptions {
     /**
-     * Paths to include. Paths will be resolved to project root.
+     * Paths to include. Paths will be resolved to workspace root.
      */
     includePaths?: string[];
 }

package/src/browser/schema.json

@@ -51,7 +51,7 @@
       "type": "object",
       "properties": {
         "includePaths": {
-          "description": "Paths to include. Paths will be resolved to project root.",
+          "description": "Paths to include. Paths will be resolved to workspace root.",
           "type": "array",
           "items": {
             "type": "string"

package/src/dev-server/index.js

@@ -84,11 +84,47 @@ function serveWebpackBrowser(options, context, transforms = {}) {
             overrides.outputHashing = schema_1.OutputHashing.None;
             logger.warn(`Warning: 'outputHashing' option is disabled when using the dev-server.`);
         }
+        if (options.hmr) {
+            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.disableHostCheck &&
+            options.host &&
+            !/^127\.\d+\.\d+\.\d+/g.test(options.host) &&
+            options.host !== 'localhost') {
+            logger.warn(core_1.tags.stripIndent `
+        Warning: This is a simple server for use in testing or debugging Angular applications
+        locally. It hasn't been reviewed for security issues.
+
+        Binding this server to an open connection can result in compromising your application or
+        computer. Using a different host than the one passed to the "--host" flag might result in
+        websocket connection issues. You might need to use "--disableHostCheck" if that's the
+        case.
+      `);
+        }
+        if (options.disableHostCheck) {
+            logger.warn(core_1.tags.oneLine `
+        Warning: Running a server with --disable-host-check is a security risk.
+        See https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
+        for more information.
+      `);
+        }
         // Webpack's live reload functionality adds the `strip-ansi` package which is commonJS
         (_b = rawBrowserOptions.allowedCommonJsDependencies) !== null && _b !== void 0 ? _b : (rawBrowserOptions.allowedCommonJsDependencies = []);
         rawBrowserOptions.allowedCommonJsDependencies.push('strip-ansi');
         const browserName = await context.getBuilderNameForTarget(browserTarget);
         const browserOptions = (await context.validateOptions({ ...rawBrowserOptions, ...overrides }, browserName));
+        const { styles, scripts } = utils_1.normalizeOptimization(browserOptions.optimization);
+        if (scripts || styles.minify) {
+            logger.error(core_1.tags.stripIndents `
+        ****************************************************************************************
+        This is a simple server for use in testing or debugging Angular applications locally.
+        It hasn't been reviewed for security issues.
+
+        DON'T USE IT FOR PRODUCTION!
+        ****************************************************************************************
+      `);
+        }
         const { config, projectRoot, i18n } = await webpack_browser_config_1.generateI18nBrowserWebpackConfigFromContext(browserOptions, context, (wco) => [
             configs_1.getDevServerConfig(wco),
             configs_1.getCommonConfig(wco),
@@ -129,30 +165,6 @@ function serveWebpackBrowser(options, context, transforms = {}) {
                 }
             }
         }
-        if (options.hmr) {
-            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 &&
-            !/^127\.\d+\.\d+\.\d+/g.test(options.host) &&
-            options.host !== 'localhost') {
-            logger.warn(core_1.tags.stripIndent `
-        Warning: This is a simple server for use in testing or debugging Angular applications
-        locally. It hasn't been reviewed for security issues.
-
-        Binding this server to an open connection can result in compromising your application or
-        computer. Using a different host than the one passed to the "--host" flag might result in
-        websocket connection issues. You might need to use "--disableHostCheck" if that's the
-        case.
-      `);
-        }
-        if (options.disableHostCheck) {
-            logger.warn(core_1.tags.oneLine `
-        Warning: Running a server with --disable-host-check is a security risk.
-        See https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
-        for more information.
-      `);
-        }
         let locale;
         if (i18n.shouldInline) {
             // Dev-server only supports one locale
@@ -185,7 +197,6 @@ function serveWebpackBrowser(options, context, transforms = {}) {
         };
     }
     return rxjs_1.from(setup()).pipe(operators_1.switchMap(({ browserOptions, webpackConfig, projectRoot, locale }) => {
-        const normalizedOptimization = utils_1.normalizeOptimization(browserOptions.optimization);
         if (browserOptions.index) {
             const { scripts = [], styles = [], baseHref, tsConfig } = browserOptions;
             const { options: compilerOptions } = read_tsconfig_1.readTsconfig(tsConfig, workspaceRoot);
@@ -206,24 +217,14 @@ function serveWebpackBrowser(options, context, transforms = {}) {
                 deployUrl: browserOptions.deployUrl,
                 sri: browserOptions.subresourceIntegrity,
                 postTransform: transforms.indexHtml,
-                optimization: normalizedOptimization,
+                optimization: utils_1.normalizeOptimization(browserOptions.optimization),
                 WOFFSupportNeeded: !buildBrowserFeatures.isFeatureSupported('woff2'),
                 crossOrigin: browserOptions.crossOrigin,
                 lang: locale,
             }));
         }
-        if (normalizedOptimization.scripts || normalizedOptimization.styles.minify) {
-            logger.error(core_1.tags.stripIndents `
-          ****************************************************************************************
-          This is a simple server for use in testing or debugging Angular applications locally.
-          It hasn't been reviewed for security issues.
-
-          DON'T USE IT FOR PRODUCTION!
-          ****************************************************************************************
-        `);
-        }
         return build_webpack_1.runWebpackDevServer(webpackConfig, context, {
-            logging: transforms.logging || stats_1.createWebpackLoggingCallback(!!options.verbose, logger),
+            logging: transforms.logging || stats_1.createWebpackLoggingCallback(browserOptions, logger),
             webpackFactory: require('webpack'),
             webpackDevServerFactory: require('webpack-dev-server'),
         }).pipe(operators_1.concatMap(async (buildEvent, index) => {

package/src/extract-i18n/index.js

@@ -118,7 +118,7 @@ async function execute(options, context, transforms) {
     const i18n = i18n_options_1.createI18nOptions(metadata);
     let useLegacyIds = true;
     const ivyMessages = [];
-    const { config, projectRoot } = await webpack_browser_config_1.generateBrowserWebpackConfigFromContext({
+    const builderOptions = {
         ...browserOptions,
         optimization: false,
         sourceMap: {
@@ -138,7 +138,8 @@ async function execute(options, context, transforms) {
         subresourceIntegrity: false,
         outputHashing: schema_1.OutputHashing.None,
         namedChunks: true,
-    }, context, (wco) => {
+    };
+    const { config, projectRoot } = await webpack_browser_config_1.generateBrowserWebpackConfigFromContext(builderOptions, context, (wco) => {
         var _a;
         if (wco.tsConfig.options.enableIvy === false) {
             context.logger.warn('Ivy extraction enabled but application is not Ivy enabled. Extraction may fail.');
@@ -150,6 +151,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,7 +172,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')),
+                new webpack.NormalModuleReplacementPlugin(/^angular-resource:style,/, path.join(__dirname, 'empty-export-default.js')),
             ],
         });
         return partials;
@@ -186,7 +188,7 @@ async function execute(options, context, transforms) {
         };
     }
     const webpackResult = await build_webpack_1.runWebpack((await ((_a = transforms === null || transforms === void 0 ? void 0 : transforms.webpackConfiguration) === null || _a === void 0 ? void 0 : _a.call(transforms, config))) || config, context, {
-        logging: stats_1.createWebpackLoggingCallback(false, context.logger),
+        logging: stats_1.createWebpackLoggingCallback(builderOptions, context.logger),
         webpackFactory: webpack,
     }).toPromise();
     // Set the outputPath to the extraction output location for downstream consumers

package/src/karma/index.js

@@ -40,6 +40,7 @@ async function initialize(options, context, webpackConfigurationTransformer) {
         // https://github.com/webpack/webpack-dev-middleware/blob/698c9ae5e9bb9a013985add6189ff21c1a1ec185/src/index.js#L65
         // https://github.com/webpack/webpack/blob/cde1b73e12eb8a77eb9ba42e7920c9ec5d29c2c9/lib/Compiler.js#L379-L388
         watch: true,
+        extractCss: true,
     }, context, (wco) => [
         configs_1.getCommonConfig(wco),
         configs_1.getStylesConfig(wco),

package/src/karma/schema.d.ts

@@ -167,7 +167,7 @@ export interface SourceMapClass {
  */
 export interface StylePreprocessorOptions {
     /**
-     * Paths to include. Paths will be resolved to project root.
+     * Paths to include. Paths will be resolved to workspace root.
      */
     includePaths?: string[];
 }

package/src/karma/schema.json

@@ -55,7 +55,7 @@
       "type": "object",
       "properties": {
         "includePaths": {
-          "description": "Paths to include. Paths will be resolved to project root.",
+          "description": "Paths to include. Paths will be resolved to workspace root.",
           "type": "array",
           "items": {
             "type": "string"

package/src/karma/tests/setup.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @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 { Schema } from '../schema';
+export { describeBuilder } from '../../testing';
+export declare const KARMA_BUILDER_INFO: Readonly<{
+    name: string;
+    schemaPath: string;
+}>;
+/**
+ * Contains all required karma builder fields.
+ * Also disables progress reporting to minimize logging output.
+ */
+export declare const BASE_OPTIONS: Readonly<Schema>;

package/src/karma/tests/setup.js

@@ -0,0 +1,29 @@
+"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.BASE_OPTIONS = exports.KARMA_BUILDER_INFO = exports.describeBuilder = void 0;
+var testing_1 = require("../../testing");
+Object.defineProperty(exports, "describeBuilder", { enumerable: true, get: function () { return testing_1.describeBuilder; } });
+exports.KARMA_BUILDER_INFO = Object.freeze({
+    name: '@angular-devkit/build-angular:karma',
+    schemaPath: __dirname + '/../schema.json',
+});
+/**
+ * Contains all required karma builder fields.
+ * Also disables progress reporting to minimize logging output.
+ */
+exports.BASE_OPTIONS = Object.freeze({
+    main: 'src/test.ts',
+    polyfills: 'src/polyfills.ts',
+    tsConfig: 'src/tsconfig.spec.json',
+    karmaConfig: 'karma.conf.js',
+    browsers: 'ChromeHeadlessCI',
+    progress: false,
+    watch: false,
+});

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

@@ -41,9 +41,6 @@ export declare class SassWorkerImplementation {
     /**
      * 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;

package/src/sass/sass-service.js

@@ -14,6 +14,14 @@ 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
@@ -79,13 +87,13 @@ class SassWorkerImplementation {
     /**
      * 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();
+            try {
+                void worker.terminate();
+            }
+            catch { }
         }
         this.requests.clear();
     }
@@ -94,9 +102,12 @@ class SassWorkerImplementation {
         const importerSignal = new Int32Array(new SharedArrayBuffer(4));
         const workerPath = require.resolve('./worker');
         const worker = new worker_threads_1.Worker(workerPath, {
-            workerData: { workerImporterPort, importerSignal },
-            transferList: [workerImporterPort],
+            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) {
@@ -143,7 +154,6 @@ class SassWorkerImplementation {
                 Atomics.notify(importerSignal, 0);
             });
         });
-        worker.unref();
         mainImporterPort.unref();
         return worker;
     }

package/src/sass/worker.js

@@ -9,12 +9,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const sass_1 = require("sass");
 const worker_threads_1 = require("worker_threads");
-if (!worker_threads_1.parentPort || !worker_threads_1.workerData) {
+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
-const { workerImporterPort, importerSignal } = worker_threads_1.workerData;
-worker_threads_1.parentPort.on('message', ({ id, hasImporter, options }) => {
+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
@@ -35,6 +42,8 @@ worker_threads_1.parentPort.on('message', ({ id, hasImporter, options }) => {
         worker_threads_1.parentPort === null || worker_threads_1.parentPort === void 0 ? void 0 : worker_threads_1.parentPort.postMessage({ id, result });
     }
     catch (error) {
-        worker_threads_1.parentPort === null || worker_threads_1.parentPort === void 0 ? void 0 : worker_threads_1.parentPort.postMessage({ id, 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/server/schema.d.ts

@@ -198,7 +198,7 @@ export interface SourceMapClass {
  */
 export interface StylePreprocessorOptions {
     /**
-     * Paths to include. Paths will be resolved to project root.
+     * Paths to include. Paths will be resolved to workspace root.
      */
     includePaths?: string[];
 }

package/src/server/schema.json

@@ -24,7 +24,7 @@
       "type": "object",
       "properties": {
         "includePaths": {
-          "description": "Paths to include. Paths will be resolved to project root.",
+          "description": "Paths to include. Paths will be resolved to workspace root.",
           "type": "array",
           "items": {
             "type": "string"

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/utils/spinner.d.ts

@@ -6,11 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 export declare class Spinner {
+    #private;
     private readonly spinner;
     /** When false, only fail messages will be displayed. */
     enabled: boolean;
     constructor(text?: string);
     set text(text: string);
+    get isSpinning(): boolean;
     succeed(text?: string): void;
     fail(text?: string): void;
     stop(): void;

package/src/utils/spinner.js

@@ -6,25 +6,38 @@
  * 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
  */
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
+    if (!privateMap.has(receiver)) {
+        throw new TypeError("attempted to get private field on non-instance");
+    }
+    return privateMap.get(receiver);
+};
+var _isTTY;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Spinner = void 0;
 const ora = require("ora");
 const color_1 = require("./color");
+const tty_1 = require("./tty");
 class Spinner {
     constructor(text) {
         /** When false, only fail messages will be displayed. */
         this.enabled = true;
+        _isTTY.set(this, tty_1.isTTY());
         this.spinner = ora({
             text,
             // The below 2 options are needed because otherwise CTRL+C will be delayed
             // when the underlying process is sync.
             hideCursor: false,
             discardStdin: false,
+            isEnabled: __classPrivateFieldGet(this, _isTTY),
         });
     }
     set text(text) {
         this.spinner.text = text;
     }
+    get isSpinning() {
+        return this.spinner.isSpinning || !__classPrivateFieldGet(this, _isTTY);
+    }
     succeed(text) {
         if (this.enabled) {
             this.spinner.succeed(text);
@@ -43,3 +56,4 @@ class Spinner {
     }
 }
 exports.Spinner = Spinner;
+_isTTY = new WeakMap();

package/src/webpack/configs/common.js

@@ -25,7 +25,7 @@ const helpers_1 = require("../utils/helpers");
 const stats_1 = require("../utils/stats");
 // eslint-disable-next-line max-lines-per-function
 function getCommonConfig(wco) {
-    var _a;
+    var _a, _b;
     const { root, projectRoot, buildOptions, tsConfig } = wco;
     const { platform = 'browser', sourceMap: { styles: stylesSourceMap, scripts: scriptsSourceMap, vendor: vendorSourceMap }, optimization: { styles: stylesOptimization, scripts: scriptsOptimization }, } = buildOptions;
     const extraPlugins = [];
@@ -35,6 +35,28 @@ function getCommonConfig(wco) {
     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.progress) {
+        const spinner = new spinner_1.Spinner();
+        spinner.start(`Generating ${platform} application bundles (phase: setup)...`);
+        extraPlugins.push(new webpack_1.ProgressPlugin({
+            handler: (percentage, message) => {
+                const phase = message ? ` (phase: ${message})` : '';
+                spinner.text = `Generating ${platform} application bundles${phase}...`;
+                switch (percentage) {
+                    case 1:
+                        if (spinner.isSpinning) {
+                            spinner.succeed(`${platform.replace(/^\w/, (s) => s.toUpperCase())} application bundle generation complete.`);
+                        }
+                        break;
+                    case 0:
+                        if (!spinner.isSpinning) {
+                            spinner.start();
+                        }
+                        break;
+                }
+            },
+        }));
+    }
     if (buildOptions.main) {
         const mainPath = path.resolve(root, buildOptions.main);
         entryPoints['main'] = [mainPath];
@@ -161,32 +183,6 @@ function getCommonConfig(wco) {
             patterns: copyWebpackPluginPatterns,
         }));
     }
-    if (buildOptions.progress) {
-        const spinner = new spinner_1.Spinner();
-        let previousPercentage;
-        extraPlugins.push(new webpack_1.ProgressPlugin({
-            handler: (percentage, message) => {
-                if (previousPercentage === 1 && percentage !== 0) {
-                    // In some scenarios in Webpack 5 percentage goes from 1 back to 0.99.
-                    // Ex: 0.99 -> 1 -> 0.99 -> 1
-                    // This causes the "complete" message to be displayed multiple times.
-                    return;
-                }
-                switch (percentage) {
-                    case 0:
-                        spinner.start(`Generating ${platform} application bundles...`);
-                        break;
-                    case 1:
-                        spinner.succeed(`${platform.replace(/^\w/, (s) => s.toUpperCase())} application bundle generation complete.`);
-                        break;
-                    default:
-                        spinner.text = `Generating ${platform} application bundles (phase: ${message})...`;
-                        break;
-                }
-                previousPercentage = percentage;
-            },
-        }));
-    }
     if (buildOptions.showCircularDependencies) {
         const CircularDependencyPlugin = require('circular-dependency-plugin');
         extraPlugins.push(new CircularDependencyPlugin({
@@ -199,7 +195,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)
@@ -233,28 +229,6 @@ function getCommonConfig(wco) {
         ];
     }
     const extraMinimizers = [];
-    if (stylesOptimization.minify) {
-        const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-        extraMinimizers.push(new CssMinimizerPlugin({
-            // component styles retain their original file name
-            test: /\.(?:css|scss|sass|less|styl)$/,
-            parallel: environment_options_1.maxWorkers,
-            minify: [CssMinimizerPlugin.cssnanoMinify],
-            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,
-                    },
-                ],
-            },
-        }));
-    }
     if (scriptsOptimization) {
         const TerserPlugin = require('terser-webpack-plugin');
         const { GLOBAL_DEFS_FOR_TERSER, GLOBAL_DEFS_FOR_TERSER_WITH_AOT, } = require('@angular/compiler-cli');
@@ -348,9 +322,9 @@ function getCommonConfig(wco) {
         context: root,
         entry: entryPoints,
         output: {
-            clean: buildOptions.deleteOutputPath,
+            clean: (_a = buildOptions.deleteOutputPath) !== null && _a !== void 0 ? _a : true,
             path: path.resolve(root, buildOptions.outputPath),
-            publicPath: (_a = buildOptions.deployUrl) !== null && _a !== void 0 ? _a : '',
+            publicPath: (_b = buildOptions.deployUrl) !== null && _b !== void 0 ? _b : '',
             filename: ({ chunk }) => {
                 if ((chunk === null || chunk === void 0 ? void 0 : chunk.name) === 'polyfills-es5') {
                     return `polyfills-es5${hashFormat.chunk}.js`;

package/src/webpack/configs/server.js

@@ -34,6 +34,14 @@ function getServerConfig(wco) {
         output: {
             libraryTarget: 'commonjs',
         },
+        module: {
+            parser: {
+                javascript: {
+                    worker: false,
+                    url: false,
+                },
+            },
+        },
         plugins: [
             // Fixes Critical dependency: the request of a dependency is an expression
             new webpack_1.ContextReplacementPlugin(/@?hapi(\\|\/)/),

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

@@ -13,16 +13,12 @@ export declare function getWebpackStatsConfig(verbose?: boolean): {
     timings: boolean;
     chunks: boolean;
     builtAt: boolean;
-    chunkModules: boolean;
-    children: boolean;
-    modules: boolean;
-    reasons: boolean;
     warnings: boolean;
     errors: boolean;
     assets: boolean;
-    version: boolean;
-    errorDetails: boolean;
-    moduleTrace: boolean;
+    cachedAssets: boolean;
+    ids: boolean;
+    entrypoints: boolean;
 };
 export declare function getStatsConfig(wco: WebpackConfigOptions): {
     stats: {
@@ -32,15 +28,11 @@ export declare function getStatsConfig(wco: WebpackConfigOptions): {
         timings: boolean;
         chunks: boolean;
         builtAt: boolean;
-        chunkModules: boolean;
-        children: boolean;
-        modules: boolean;
-        reasons: boolean;
         warnings: boolean;
         errors: boolean;
         assets: boolean;
-        version: boolean;
-        errorDetails: boolean;
-        moduleTrace: boolean;
+        cachedAssets: boolean;
+        ids: boolean;
+        entrypoints: boolean;
     };
 };

package/src/webpack/configs/stats.js

@@ -15,16 +15,13 @@ const webpackOutputOptions = {
     timings: true,
     chunks: true,
     builtAt: true,
-    chunkModules: false,
-    children: false,
-    modules: false,
-    reasons: false,
     warnings: true,
     errors: true,
     assets: true,
-    version: false,
-    errorDetails: false,
-    moduleTrace: false,
+    cachedAssets: true,
+    // Needed for markAsyncChunksNonInitial.
+    ids: true,
+    entrypoints: true,
 };
 const verboseWebpackOutputOptions = {
     // The verbose output will most likely be piped to a file, so colors just mess it up.
@@ -39,8 +36,8 @@ const verboseWebpackOutputOptions = {
     errorDetails: true,
     moduleTrace: true,
     logging: 'verbose',
+    modulesSpace: Infinity,
 };
-verboseWebpackOutputOptions['modulesSpace'] = Infinity;
 function getWebpackStatsConfig(verbose = false) {
     return verbose
         ? { ...webpackOutputOptions, ...verboseWebpackOutputOptions }

package/src/webpack/configs/styles.js

@@ -12,6 +12,7 @@ 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) {
@@ -80,6 +81,13 @@ function getStylesConfig(wco) {
     }
     catch {
         sassImplementation = new sass_service_1.SassWorkerImplementation();
+        extraPlugins.push({
+            apply(compiler) {
+                compiler.hooks.shutdown.tap('sass-worker', () => {
+                    sassImplementation === null || sassImplementation === void 0 ? void 0 : sassImplementation.close();
+                });
+            },
+        });
     }
     const assetNameTemplate = helpers_1.assetNameTemplateFactory(hashFormat);
     const extraPostcssPlugins = [];
@@ -116,6 +124,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) => ({
@@ -151,11 +164,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
@@ -343,11 +352,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/configs/test.js

@@ -10,9 +10,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTestConfig = void 0;
 const glob = require("glob");
 const path = require("path");
+const typescript_1 = require("typescript");
 const helpers_1 = require("../utils/helpers");
 function getTestConfig(wco) {
-    const { buildOptions: { codeCoverage, codeCoverageExclude, main, sourceMap }, root, sourceRoot, } = wco;
+    const { buildOptions: { codeCoverage, codeCoverageExclude, main, sourceMap, webWorkerTsConfig }, root, sourceRoot, } = wco;
     const extraRules = [];
     const extraPlugins = [];
     if (codeCoverage) {
@@ -38,6 +39,7 @@ function getTestConfig(wco) {
     }
     return {
         mode: 'development',
+        target: wco.tsConfig.options.target === typescript_1.ScriptTarget.ES5 ? ['web', 'es5'] : 'web',
         resolve: {
             mainFields: ['es2015', 'browser', 'module', 'main'],
         },
@@ -47,6 +49,14 @@ function getTestConfig(wco) {
         },
         module: {
             rules: extraRules,
+            parser: webWorkerTsConfig === undefined
+                ? undefined
+                : {
+                    javascript: {
+                        worker: false,
+                        url: false,
+                    },
+                },
         },
         plugins: extraPlugins,
         optimization: {

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/karma/karma-context.html

@@ -9,6 +9,7 @@ Reloaded before every execution run.
     <title></title>
     <base href="/" />
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <link rel="stylesheet" href="_karma_webpack_/styles.css" crossorigin="anonymous" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
@@ -34,7 +35,6 @@ Reloaded before every execution run.
     <script src="_karma_webpack_/polyfills.js" crossorigin="anonymous"></script>
     <!-- Dynamically replaced with <script> tags -->
     %SCRIPTS%
-    <script src="_karma_webpack_/styles.js" crossorigin="anonymous"></script>
     <script src="_karma_webpack_/scripts.js" crossorigin="anonymous"></script>
     <script src="_karma_webpack_/vendor.js" crossorigin="anonymous"></script>
     <script src="_karma_webpack_/main.js" crossorigin="anonymous"></script>

package/src/webpack/plugins/karma/karma-debug.html

@@ -10,6 +10,7 @@ just for immediate execution, without reporting to Karma server.
     <title>Karma DEBUG RUNNER</title>
     <base href="/" />
     <link href="favicon.ico" rel="icon" type="image/x-icon" />
+    <link rel="stylesheet" href="_karma_webpack_/styles.css" crossorigin="anonymous" />
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta
       name="viewport"
@@ -36,7 +37,6 @@ just for immediate execution, without reporting to Karma server.
     <script src="_karma_webpack_/polyfills.js" crossorigin="anonymous"></script>
     <!-- Dynamically replaced with <script> tags -->
     %SCRIPTS%
-    <script src="_karma_webpack_/styles.js" crossorigin="anonymous"></script>
     <script src="_karma_webpack_/scripts.js" crossorigin="anonymous"></script>
     <script src="_karma_webpack_/vendor.js" crossorigin="anonymous"></script>
     <script src="_karma_webpack_/main.js" crossorigin="anonymous"></script>

package/src/webpack/plugins/karma/karma.js

@@ -248,7 +248,7 @@ function fallbackMiddleware() {
                     `/${KARMA_APPLICATION_PATH}/polyfills.js`,
                     `/${KARMA_APPLICATION_PATH}/polyfills-es5.js`,
                     `/${KARMA_APPLICATION_PATH}/scripts.js`,
-                    `/${KARMA_APPLICATION_PATH}/styles.js`,
+                    `/${KARMA_APPLICATION_PATH}/styles.css`,
                     `/${KARMA_APPLICATION_PATH}/vendor.js`,
                 ];
                 if (request.url && alwaysServe.includes(request.url)) {

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

@@ -22,7 +22,7 @@ function markAsyncChunksNonInitial(webpackStats, extraEntryPoints) {
     // **cannot** be loaded in main bundle.
     const asyncChunkIds = extraEntryPoints
         .filter((entryPoint) => !entryPoint.inject)
-        .flatMap((entryPoint) => entryPoints[entryPoint.bundleName].chunks);
+        .flatMap((entryPoint) => { var _a; return (_a = entryPoints[entryPoint.bundleName].chunks) === null || _a === void 0 ? void 0 : _a.filter((n) => n !== 'runtime'); });
     // Find chunks for each ID.
     const asyncChunks = asyncChunkIds.map((chunkId) => {
         const chunk = chunks.find((chunk) => chunk.id === chunkId);
@@ -33,9 +33,13 @@ function markAsyncChunksNonInitial(webpackStats, extraEntryPoints) {
     });
     // 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) => ({
-        ...chunk,
-        initial: chunk.initial && !asyncChunks.find((asyncChunk) => asyncChunk === chunk),
-    }));
+    return chunks.map((chunk) => {
+        return asyncChunks.find((asyncChunk) => asyncChunk === chunk)
+            ? {
+                ...chunk,
+                initial: false,
+            }
+            : chunk;
+    });
 }
 exports.markAsyncChunksNonInitial = markAsyncChunksNonInitial;

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

@@ -8,6 +8,7 @@
 import { WebpackLoggingCallback } from '@angular-devkit/build-webpack';
 import { logging } from '@angular-devkit/core';
 import { Configuration, StatsCompilation } from 'webpack';
+import { Schema as BrowserBuilderOptions } from '../../browser/schema';
 export declare function formatSize(size: number): string;
 export declare type BundleStatsData = [files: string, names: string, size: number | string];
 export declare type ChunkType = 'modern' | 'legacy' | 'unknown';
@@ -20,7 +21,6 @@ export declare function generateBundleStats(info: {
     size?: number;
     files?: string[];
     names?: string[];
-    entry?: boolean;
     initial?: boolean;
     rendered?: boolean;
     chunkType?: ChunkType;
@@ -30,5 +30,5 @@ export declare function statsWarningsToString(json: StatsCompilation, statsConfi
 export declare function statsErrorsToString(json: StatsCompilation, statsConfig: any): string;
 export declare function statsHasErrors(json: StatsCompilation): boolean;
 export declare function statsHasWarnings(json: StatsCompilation): boolean;
-export declare function createWebpackLoggingCallback(verbose: boolean, logger: logging.LoggerApi): WebpackLoggingCallback;
+export declare function createWebpackLoggingCallback(options: BrowserBuilderOptions, logger: logging.LoggerApi): WebpackLoggingCallback;
 export declare function webpackStatsLogger(logger: logging.LoggerApi, json: StatsCompilation, config: Configuration, bundleStats?: BundleStats[]): void;

package/src/webpack/utils/stats.js

@@ -13,6 +13,8 @@ const path = require("path");
 const textTable = require("text-table");
 const color_1 = require("../../utils/color");
 const stats_1 = require("../configs/stats");
+const async_chunks_1 = require("./async-chunks");
+const helpers_1 = require("./helpers");
 function formatSize(size) {
     if (size <= 0) {
         return '0 bytes';
@@ -30,7 +32,7 @@ function generateBundleStats(info) {
     const size = typeof info.size === 'number' ? info.size : '-';
     const files = (_b = (_a = info.files) === null || _a === void 0 ? void 0 : _a.filter((f) => !f.endsWith('.map')).map((f) => path.basename(f)).join(', ')) !== null && _b !== void 0 ? _b : '';
     const names = ((_c = info.names) === null || _c === void 0 ? void 0 : _c.length) ? info.names.join(', ') : '-';
-    const initial = !!(info.entry || info.initial);
+    const initial = !!info.initial;
     const chunkType = info.chunkType || 'unknown';
     return {
         chunkType,
@@ -255,12 +257,22 @@ function statsHasWarnings(json) {
     return !!(((_a = json.warnings) === null || _a === void 0 ? void 0 : _a.length) || ((_b = json.children) === null || _b === void 0 ? void 0 : _b.some((c) => { var _a; return (_a = c.warnings) === null || _a === void 0 ? void 0 : _a.length; })));
 }
 exports.statsHasWarnings = statsHasWarnings;
-function createWebpackLoggingCallback(verbose, logger) {
+function createWebpackLoggingCallback(options, logger) {
+    const { verbose = false, scripts = [], styles = [] } = options;
+    const extraEntryPoints = [
+        ...helpers_1.normalizeExtraEntryPoints(styles, 'styles'),
+        ...helpers_1.normalizeExtraEntryPoints(scripts, 'scripts'),
+    ];
     return (stats, config) => {
         if (verbose) {
             logger.info(stats.toString(config.stats));
         }
-        webpackStatsLogger(logger, stats.toJson(stats_1.getWebpackStatsConfig(false)), config);
+        const rawStats = stats.toJson(stats_1.getWebpackStatsConfig(false));
+        const webpackStats = {
+            ...rawStats,
+            chunks: async_chunks_1.markAsyncChunksNonInitial(rawStats, extraEntryPoints),
+        };
+        webpackStatsLogger(logger, webpackStats, config);
     };
 }
 exports.createWebpackLoggingCallback = createWebpackLoggingCallback;