@angular-devkit/build-angular 13.0.0-rc.1 → 13.0.1

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "13.0.0-rc.1",
+  "version": "13.0.1",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "1.0.1",
-    "@angular-devkit/architect": "0.1300.0-rc.1",
-    "@angular-devkit/build-webpack": "0.1300.0-rc.1",
-    "@angular-devkit/core": "13.0.0-rc.1",
+    "@angular-devkit/architect": "0.1300.1",
+    "@angular-devkit/build-webpack": "0.1300.1",
+    "@angular-devkit/core": "13.0.1",
     "@babel/core": "7.15.8",
     "@babel/generator": "7.15.8",
     "@babel/helper-annotate-as-pure": "7.15.4",
@@ -20,42 +20,42 @@
     "@babel/runtime": "7.15.4",
     "@babel/template": "7.15.4",
     "@discoveryjs/json-ext": "0.5.5",
-    "@jsdevtools/coverage-istanbul-loader": "3.0.5",
-    "@ngtools/webpack": "13.0.0-rc.1",
+    "@ngtools/webpack": "13.0.1",
     "ansi-colors": "4.1.1",
-    "babel-loader": "8.2.2",
+    "babel-loader": "8.2.3",
+    "babel-plugin-istanbul": "6.1.1",
     "browserslist": "^4.9.1",
     "cacache": "15.3.0",
     "caniuse-lite": "^1.0.30001032",
     "circular-dependency-plugin": "5.2.2",
     "copy-webpack-plugin": "9.0.1",
-    "core-js": "3.18.3",
-    "critters": "0.0.10",
-    "css-loader": "6.4.0",
-    "esbuild-wasm": "0.13.7",
+    "core-js": "3.19.0",
+    "critters": "0.0.14",
+    "css-loader": "6.5.0",
+    "esbuild-wasm": "0.13.12",
     "glob": "7.2.0",
     "https-proxy-agent": "5.0.0",
     "inquirer": "8.2.0",
     "karma-source-map-support": "1.4.0",
     "less": "4.1.2",
-    "less-loader": "10.1.0",
+    "less-loader": "10.2.0",
     "license-webpack-plugin": "3.0.0",
-    "loader-utils": "2.0.0",
-    "mini-css-extract-plugin": "2.4.2",
+    "loader-utils": "3.0.0",
+    "mini-css-extract-plugin": "2.4.3",
     "minimatch": "3.0.4",
-    "open": "8.3.0",
+    "open": "8.4.0",
     "ora": "5.4.1",
     "parse5-html-rewriting-stream": "6.0.1",
     "piscina": "3.1.0",
-    "postcss": "8.3.9",
+    "postcss": "8.3.11",
     "postcss-import": "14.0.2",
     "postcss-loader": "6.2.0",
     "postcss-preset-env": "6.7.0",
     "regenerator-runtime": "0.13.9",
     "resolve-url-loader": "4.0.0",
     "rxjs": "6.6.7",
-    "sass": "1.43.2",
-    "sass-loader": "12.2.0",
+    "sass": "1.43.4",
+    "sass-loader": "12.3.0",
     "semver": "7.3.5",
     "source-map-loader": "3.0.0",
     "source-map-support": "0.5.20",
@@ -65,14 +65,14 @@
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
     "tslib": "2.3.1",
-    "webpack": "5.58.2",
+    "webpack": "5.60.0",
     "webpack-dev-middleware": "5.2.1",
-    "webpack-dev-server": "4.3.1",
+    "webpack-dev-server": "4.4.0",
     "webpack-merge": "5.8.0",
     "webpack-subresource-integrity": "5.0.0"
   },
   "optionalDependencies": {
-    "esbuild": "0.13.7"
+    "esbuild": "0.13.12"
   },
   "peerDependencies": {
     "@angular/compiler-cli": "^13.0.0 || ^13.0.0-next",

package/src/babel/presets/application.d.ts

@@ -32,6 +32,14 @@ export interface ApplicationPresetOptions {
     };
     forceES5?: boolean;
     forceAsyncTransformation?: boolean;
+    instrumentCode?: {
+        includedBasePath: string;
+    };
+    optimize?: {
+        looseEnums: boolean;
+        pureTopLevel: boolean;
+        wrapDecorators: boolean;
+    };
     diagnosticReporter?: DiagnosticReporter;
 }
 export default function (api: unknown, options: ApplicationPresetOptions): {

package/src/babel/presets/application.js

@@ -145,6 +145,24 @@ function default_1(api, options) {
         plugins.push(require('@babel/plugin-transform-async-to-generator').default, require('@babel/plugin-proposal-async-generator-functions').default);
         needRuntimeTransform = true;
     }
+    if (options.optimize) {
+        if (options.optimize.pureTopLevel) {
+            plugins.push(require('../plugins/pure-toplevel-functions').default);
+        }
+        plugins.push(require('../plugins/elide-angular-metadata').default, [
+            require('../plugins/adjust-typescript-enums').default,
+            { loose: options.optimize.looseEnums },
+        ], [
+            require('../plugins/adjust-static-class-members').default,
+            { wrapDecorators: options.optimize.wrapDecorators },
+        ]);
+    }
+    if (options.instrumentCode) {
+        plugins.push([
+            require('babel-plugin-istanbul').default,
+            { inputSourceMap: false, cwd: options.instrumentCode.includedBasePath },
+        ]);
+    }
     if (needRuntimeTransform) {
         // Babel equivalent to TypeScript's `importHelpers` option
         plugins.push([

package/src/babel/webpack-loader.d.ts

@@ -5,5 +5,14 @@
  * 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 { ApplicationPresetOptions } from './presets/application';
+interface AngularCustomOptions extends Omit<ApplicationPresetOptions, 'instrumentCode'> {
+    instrumentCode?: {
+        /** node_modules and test files are always excluded. */
+        excludedPaths: Set<String>;
+        includedBasePath: string;
+    };
+}
+export declare type AngularBabelLoaderOptions = AngularCustomOptions & Record<string, unknown>;
 declare const _default: any;
 export default _default;

package/src/babel/webpack-loader.js

@@ -51,8 +51,9 @@ exports.default = (0, babel_loader_1.custom)(() => {
         inputSourceMap: false,
     });
     return {
-        async customOptions({ i18n, scriptTarget, aot, optimize, ...rawOptions }, { source }) {
+        async customOptions(options, { source }) {
             var _a, _b;
+            const { i18n, scriptTarget, aot, optimize, instrumentCode, ...rawOptions } = options;
             // Must process file if plugins are added
             let shouldProcess = Array.isArray(rawOptions.plugins) && rawOptions.plugins.length > 0;
             const customOptions = {
@@ -60,6 +61,7 @@ exports.default = (0, babel_loader_1.custom)(() => {
                 forceES5: false,
                 angularLinker: undefined,
                 i18n: undefined,
+                instrumentCode: undefined,
             };
             // Analyze file for linking
             if (await requiresLinking(this.resourcePath, source)) {
@@ -91,7 +93,7 @@ exports.default = (0, babel_loader_1.custom)(() => {
                     customOptions.forceAsyncTransformation =
                         !/[\\/][_f]?esm2015[\\/]/.test(this.resourcePath) && source.includes('async');
                 }
-                shouldProcess || (shouldProcess = customOptions.forceAsyncTransformation || customOptions.forceES5);
+                shouldProcess || (shouldProcess = customOptions.forceAsyncTransformation || customOptions.forceES5 || false);
             }
             // Analyze for i18n inlining
             if (i18n &&
@@ -131,6 +133,16 @@ exports.default = (0, babel_loader_1.custom)(() => {
                 };
                 shouldProcess = true;
             }
+            if (instrumentCode &&
+                !instrumentCode.excludedPaths.has(this.resourcePath) &&
+                !/\.(e2e|spec)\.tsx?$|[\\/]node_modules[\\/]/.test(this.resourcePath) &&
+                this.resourcePath.startsWith(instrumentCode.includedBasePath)) {
+                // `babel-plugin-istanbul` has it's own includes but we do the below so that we avoid running the the loader.
+                customOptions.instrumentCode = {
+                    includedBasePath: instrumentCode.includedBasePath,
+                };
+                shouldProcess = true;
+            }
             // Add provided loader options to default base options
             const loaderOptions = {
                 ...baseOptions,
@@ -150,27 +162,12 @@ exports.default = (0, babel_loader_1.custom)(() => {
             return { custom: customOptions, loader: loaderOptions };
         },
         config(configuration, { customOptions }) {
-            var _a;
-            const plugins = (_a = configuration.options.plugins) !== null && _a !== void 0 ? _a : [];
-            if (customOptions.optimize) {
-                if (customOptions.optimize.pureTopLevel) {
-                    plugins.push(require('./plugins/pure-toplevel-functions').default);
-                }
-                plugins.push(require('./plugins/elide-angular-metadata').default, [
-                    require('./plugins/adjust-typescript-enums').default,
-                    { loose: customOptions.optimize.looseEnums },
-                ], [
-                    require('./plugins/adjust-static-class-members').default,
-                    { wrapDecorators: customOptions.optimize.wrapDecorators },
-                ]);
-            }
             return {
                 ...configuration.options,
                 // Using `false` disables babel from attempting to locate sourcemaps or process any inline maps.
                 // The babel types do not include the false option even though it is valid
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 inputSourceMap: false,
-                plugins,
                 presets: [
                     ...(configuration.options.presets || []),
                     [
@@ -201,13 +198,7 @@ exports.default = (0, babel_loader_1.custom)(() => {
                 // `@ampproject/remapping` source map objects but both are compatible with Webpack.
                 // This method for merging is used because it provides more accurate output
                 // and is faster while using less memory.
-                result.map = {
-                    // Convert the SourceMap back to simple plain object.
-                    // This is needed because otherwise code-coverage will fail with `don't know how to turn this value into a node`
-                    // Which is throw by Babel when it is invoked again from `istanbul-lib-instrument`.
-                    // https://github.com/babel/babel/blob/780aa48d2a34dc55f556843074b6aed45e7eabeb/packages/babel-types/src/converters/valueToNode.ts#L115-L130
-                    ...(0, remapping_1.default)([result.map, inputSourceMap], () => null),
-                };
+                result.map = (0, remapping_1.default)([result.map, inputSourceMap], () => null);
             }
             return result;
         },

package/src/builders/browser/schema.json

@@ -89,7 +89,7 @@
                     "inlineCritical": {
                       "type": "boolean",
                       "description": "Extract and inline critical CSS definitions to improve first paint time.",
-                      "default": false
+                      "default": true
                     }
                   },
                   "additionalProperties": false

package/src/builders/extract-i18n/index.js

@@ -132,6 +132,16 @@ async function execute(options, context, transforms) {
     if (!context.target || !context.target.project) {
         throw new Error('The builder requires a target.');
     }
+    try {
+        require.resolve('@angular/localize');
+    }
+    catch {
+        return {
+            success: false,
+            error: `i18n extraction requires the '@angular/localize' package.`,
+            outputPath: outFile,
+        };
+    }
     const metadata = await context.getProjectMetadata(context.target);
     const i18n = (0, i18n_options_1.createI18nOptions)(metadata);
     let useLegacyIds = true;
@@ -196,16 +206,6 @@ async function execute(options, context, transforms) {
         });
         return partials;
     });
-    try {
-        require.resolve('@angular/localize');
-    }
-    catch {
-        return {
-            success: false,
-            error: `Ivy extraction requires the '@angular/localize' package.`,
-            outputPath: outFile,
-        };
-    }
     // All the localize usages are setup to first try the ESM entry point then fallback to the deep imports.
     // This provides interim compatibility while the framework is transitioned to bundled ESM packages.
     const localizeToolsModule = await (0, load_esm_1.loadEsmModule)('@angular/localize/tools');

package/src/sass/sass-service.js

@@ -48,9 +48,9 @@ class SassWorkerImplementation {
      * @param callback The function to execute when the rendering is complete.
      */
     render(options, callback) {
-        // The `functions` and `importer` options are JavaScript functions that cannot be transferred.
+        // The `functions`, `logger` and `importer` options are JavaScript functions that cannot be transferred.
         // If any additional function options are added in the future, they must be excluded as well.
-        const { functions, importer, ...serializableOptions } = options;
+        const { functions, importer, logger, ...serializableOptions } = options;
         // The CLI's configuration does not use or expose the ability to defined custom Sass functions
         if (functions && Object.keys(functions).length > 0) {
             throw new Error('Sass custom functions are not supported.');

package/src/sass/worker.js

@@ -25,7 +25,6 @@ worker_threads_1.parentPort.on('message', ({ id, hasImporter, options }) => {
             options.importer = function (url, prev) {
                 var _a;
                 Atomics.store(importerSignal, 0, 0);
-                // `this.fromImport` was added in dart-sass in 1.33.0, `@types/sass` doesn't include it yet.
                 const { fromImport } = this;
                 workerImporterPort.postMessage({ id, url, prev, fromImport });
                 Atomics.wait(importerSignal, 0, 0);

package/src/utils/action-executor.js

@@ -40,13 +40,12 @@ class BundleActionExecutor {
         const executions = new Map();
         for (const action of actions) {
             const execution = executor(action);
-            executions.set(execution, execution.then((result) => {
-                executions.delete(execution);
-                return result;
-            }));
+            executions.set(execution, execution.then((result) => [execution, result]));
         }
         while (executions.size > 0) {
-            yield Promise.race(executions.values());
+            const [execution, result] = await Promise.race(executions.values());
+            executions.delete(execution);
+            yield result;
         }
     }
     stop() {

package/src/utils/normalize-optimization.js

@@ -16,8 +16,7 @@ function normalizeOptimization(optimization = true) {
                 ? optimization.styles
                 : {
                     minify: !!optimization.styles,
-                    // inlineCritical is always false unless explictly set.
-                    inlineCritical: false,
+                    inlineCritical: !!optimization.styles,
                 },
             fonts: typeof optimization.fonts === 'object'
                 ? optimization.fonts
@@ -30,8 +29,7 @@ function normalizeOptimization(optimization = true) {
         scripts: optimization,
         styles: {
             minify: optimization,
-            // inlineCritical is always false unless explictly set.
-            inlineCritical: false,
+            inlineCritical: optimization,
         },
         fonts: {
             inline: optimization,

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

@@ -6,5 +6,5 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { Configuration } from 'webpack';
-import { WebpackConfigOptions } from '../../utils/build-options';
-export declare function getCommonConfig(wco: WebpackConfigOptions): Promise<Configuration>;
+import { WebpackConfigOptions, WebpackTestOptions } from '../../utils/build-options';
+export declare function getCommonConfig(wco: WebpackConfigOptions<WebpackTestOptions>): Promise<Configuration>;

package/src/webpack/configs/common.js

@@ -47,8 +47,8 @@ const helpers_1 = require("../utils/helpers");
 // eslint-disable-next-line max-lines-per-function
 async function getCommonConfig(wco) {
     var _a, _b;
-    const { root, projectRoot, buildOptions, tsConfig, projectName } = wco;
-    const { cache, platform = 'browser', sourceMap: { styles: stylesSourceMap, scripts: scriptsSourceMap, vendor: vendorSourceMap }, optimization: { styles: stylesOptimization, scripts: scriptsOptimization }, } = buildOptions;
+    const { root, projectRoot, buildOptions, tsConfig, projectName, sourceRoot } = wco;
+    const { cache, codeCoverage, codeCoverageExclude = [], platform = 'browser', sourceMap: { styles: stylesSourceMap, scripts: scriptsSourceMap, vendor: vendorSourceMap }, optimization: { styles: stylesOptimization, scripts: scriptsOptimization }, } = buildOptions;
     const extraPlugins = [];
     const extraRules = [];
     const entryPoints = {};
@@ -325,6 +325,12 @@ async function getCommonConfig(wco) {
                                 scriptTarget: wco.scriptTarget,
                                 aot: buildOptions.aot,
                                 optimize: buildOptions.buildOptimizer,
+                                instrumentCode: codeCoverage
+                                    ? {
+                                        includedBasePath: sourceRoot,
+                                        excludedPaths: (0, helpers_1.getInstrumentationExcludedPaths)(root, codeCoverageExclude),
+                                    }
+                                    : undefined,
                             },
                         },
                     ],

package/src/webpack/configs/server.js

@@ -28,7 +28,8 @@ function getServerConfig(wco) {
     }
     return {
         resolve: {
-            mainFields: ['es2020', 'es2015', 'main', 'module'],
+            mainFields: ['es2015', 'main', 'module'],
+            conditionNames: ['es2015', '...'],
         },
         output: {
             libraryTarget: 'commonjs',

package/src/webpack/configs/test.js

@@ -27,32 +27,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTestConfig = void 0;
-const glob = __importStar(require("glob"));
 const path = __importStar(require("path"));
 const typescript_1 = require("typescript");
 const helpers_1 = require("../utils/helpers");
 function getTestConfig(wco) {
-    const { buildOptions: { codeCoverage, codeCoverageExclude, main, sourceMap, webWorkerTsConfig }, root, sourceRoot, } = wco;
-    const extraRules = [];
+    const { buildOptions: { main, sourceMap, webWorkerTsConfig }, root, } = wco;
     const extraPlugins = [];
-    if (codeCoverage) {
-        const exclude = [/\.(e2e|spec)\.tsx?$/, /node_modules/];
-        if (codeCoverageExclude) {
-            for (const excludeGlob of codeCoverageExclude) {
-                glob
-                    .sync(path.join(root, excludeGlob), { nodir: true })
-                    .forEach((file) => exclude.push(path.normalize(file)));
-            }
-        }
-        extraRules.push({
-            test: /\.[cm]?[tj]sx?$/,
-            loader: require.resolve('@jsdevtools/coverage-istanbul-loader'),
-            options: { esModules: true },
-            enforce: 'post',
-            exclude,
-            include: sourceRoot,
-        });
-    }
     if (sourceMap.scripts || sourceMap.styles) {
         extraPlugins.push((0, helpers_1.getSourceMapDevTool)(sourceMap.scripts, sourceMap.styles, false, true));
     }
@@ -68,7 +48,6 @@ function getTestConfig(wco) {
             main: path.resolve(root, main),
         },
         module: {
-            rules: extraRules,
             parser: webWorkerTsConfig === undefined
                 ? {
                     javascript: {

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

@@ -20,3 +20,4 @@ export declare function getSourceMapDevTool(scriptsSourceMap: boolean | undefine
 export declare function isPolyfillsEntry(name: string): boolean;
 export declare function getWatchOptions(poll: number | undefined): NonNullable<Configuration['watchOptions']>;
 export declare function assetNameTemplateFactory(hashFormat: HashFormat): (resourcePath: string) => string;
+export declare function getInstrumentationExcludedPaths(sourceRoot: string, excludedPaths: string[]): Set<string>;

package/src/webpack/utils/helpers.js

@@ -25,8 +25,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.assetNameTemplateFactory = exports.getWatchOptions = exports.isPolyfillsEntry = exports.getSourceMapDevTool = exports.normalizeExtraEntryPoints = exports.getOutputHashFormat = void 0;
+exports.getInstrumentationExcludedPaths = exports.assetNameTemplateFactory = exports.getWatchOptions = exports.isPolyfillsEntry = exports.getSourceMapDevTool = exports.normalizeExtraEntryPoints = exports.getOutputHashFormat = void 0;
+const glob_1 = __importDefault(require("glob"));
 const path = __importStar(require("path"));
 const webpack_1 = require("webpack");
 function getOutputHashFormat(option, length = 20) {
@@ -126,3 +130,13 @@ function assetNameTemplateFactory(hashFormat) {
     };
 }
 exports.assetNameTemplateFactory = assetNameTemplateFactory;
+function getInstrumentationExcludedPaths(sourceRoot, excludedPaths) {
+    const excluded = new Set();
+    for (const excludeGlob of excludedPaths) {
+        glob_1.default
+            .sync(path.join(sourceRoot, excludeGlob), { nodir: true })
+            .forEach((p) => excluded.add(path.normalize(p)));
+    }
+    return excluded;
+}
+exports.getInstrumentationExcludedPaths = getInstrumentationExcludedPaths;