@angular-devkit/build-angular 12.0.3 → 12.0.4

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "12.0.3",
+  "version": "12.0.4",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
-    "@angular-devkit/architect": "0.1200.3",
-    "@angular-devkit/build-optimizer": "0.1200.3",
-    "@angular-devkit/build-webpack": "0.1200.3",
-    "@angular-devkit/core": "12.0.3",
+    "@angular-devkit/architect": "0.1200.4",
+    "@angular-devkit/build-optimizer": "0.1200.4",
+    "@angular-devkit/build-webpack": "0.1200.4",
+    "@angular-devkit/core": "12.0.4",
     "@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.3",
+    "@ngtools/webpack": "12.0.4",
     "ansi-colors": "4.1.1",
     "babel-loader": "8.2.2",
     "browserslist": "^4.9.1",

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/dev-server/index.js

@@ -224,7 +224,7 @@ function serveWebpackBrowser(options, context, transforms = {}) {
             }));
         }
         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.');
@@ -187,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/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

@@ -87,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();
     }
@@ -154,7 +154,6 @@ class SassWorkerImplementation {
                 Atomics.notify(importerSignal, 0);
             });
         });
-        worker.unref();
         mainImporterPort.unref();
         return worker;
     }

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 = [];
@@ -38,25 +38,22 @@ function getCommonConfig(wco) {
     if (buildOptions.progress) {
         const spinner = new spinner_1.Spinner();
         spinner.start(`Generating ${platform} application bundles (phase: setup)...`);
-        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;
-                }
+                const phase = message ? ` (phase: ${message})` : '';
+                spinner.text = `Generating ${platform} application bundles${phase}...`;
                 switch (percentage) {
                     case 1:
-                        spinner.succeed(`${platform.replace(/^\w/, (s) => s.toUpperCase())} application bundle generation complete.`);
+                        if (spinner.isSpinning) {
+                            spinner.succeed(`${platform.replace(/^\w/, (s) => s.toUpperCase())} application bundle generation complete.`);
+                        }
                         break;
                     case 0:
-                    default:
-                        spinner.text = `Generating ${platform} application bundles (phase: ${message})...`;
+                        if (!spinner.isSpinning) {
+                            spinner.start();
+                        }
                         break;
                 }
-                previousPercentage = percentage;
             },
         }));
     }
@@ -325,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/stats.d.ts

@@ -16,6 +16,7 @@ export declare function getWebpackStatsConfig(verbose?: boolean): {
     warnings: boolean;
     errors: boolean;
     assets: boolean;
+    cachedAssets: boolean;
     ids: boolean;
     entrypoints: boolean;
 };
@@ -30,6 +31,7 @@ export declare function getStatsConfig(wco: WebpackConfigOptions): {
         warnings: boolean;
         errors: boolean;
         assets: boolean;
+        cachedAssets: boolean;
         ids: boolean;
         entrypoints: boolean;
     };

package/src/webpack/configs/stats.js

@@ -18,6 +18,7 @@ const webpackOutputOptions = {
     warnings: true,
     errors: true,
     assets: true,
+    cachedAssets: true,
     // Needed for markAsyncChunksNonInitial.
     ids: true,
     entrypoints: true,

package/src/webpack/configs/styles.js

@@ -81,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 = [];

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