@angular-devkit/build-angular 12.0.1 → 12.0.2

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "12.0.1",
+  "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.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.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",
@@ -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.2",
     "ansi-colors": "4.1.1",
     "babel-loader": "8.2.2",
     "browserslist": "^4.9.1",
@@ -46,7 +46,7 @@
     "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",

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

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
@@ -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) {

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

@@ -199,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)
@@ -233,28 +233,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');

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) {
@@ -116,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) => ({
@@ -151,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
@@ -343,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/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) {