@angular-devkit/build-angular 12.0.0 → 12.0.4

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/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/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/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

@@ -23,10 +23,9 @@ 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;
+    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 = [];
@@ -34,7 +33,30 @@ 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.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];
@@ -42,7 +64,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')];
@@ -162,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({
@@ -200,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)
@@ -234,14 +229,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 +274,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 +282,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,8 +322,9 @@ function getCommonConfig(wco) {
         context: root,
         entry: entryPoints,
         output: {
+            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`;
@@ -374,6 +360,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 +378,10 @@ function getCommonConfig(wco) {
                 ...extraRules,
             ],
         },
+        experiments: {
+            syncWebAssembly: true,
+            asyncWebAssembly: true,
+        },
         cache: !!buildOptions.watch &&
             !environment_options_1.cachingDisabled && {
             type: 'memory',

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

@@ -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,14 @@ 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();
+        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 = [];
@@ -115,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) => ({
@@ -150,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
@@ -232,6 +242,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 +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/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/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) {