@angular-devkit/build-angular 13.0.0-rc.1 → 13.1.0-next.0

package/package.json

@@ -1,61 +1,61 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "13.0.0-rc.1",
+  "version": "13.1.0-next.0",
   "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",
-    "@babel/core": "7.15.8",
-    "@babel/generator": "7.15.8",
-    "@babel/helper-annotate-as-pure": "7.15.4",
-    "@babel/plugin-proposal-async-generator-functions": "7.15.8",
-    "@babel/plugin-transform-async-to-generator": "7.14.5",
-    "@babel/plugin-transform-runtime": "7.15.8",
-    "@babel/preset-env": "7.15.8",
-    "@babel/runtime": "7.15.4",
-    "@babel/template": "7.15.4",
+    "@angular-devkit/architect": "0.1301.0-next.0",
+    "@angular-devkit/build-webpack": "0.1301.0-next.0",
+    "@angular-devkit/core": "13.1.0-next.0",
+    "@babel/core": "7.16.0",
+    "@babel/generator": "7.16.0",
+    "@babel/helper-annotate-as-pure": "7.16.0",
+    "@babel/plugin-proposal-async-generator-functions": "7.16.0",
+    "@babel/plugin-transform-async-to-generator": "7.16.0",
+    "@babel/plugin-transform-runtime": "7.16.0",
+    "@babel/preset-env": "7.16.0",
+    "@babel/runtime": "7.16.0",
+    "@babel/template": "7.16.0",
     "@discoveryjs/json-ext": "0.5.5",
-    "@jsdevtools/coverage-istanbul-loader": "3.0.5",
-    "@ngtools/webpack": "13.0.0-rc.1",
+    "@ngtools/webpack": "13.1.0-next.0",
     "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.1",
+    "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.1.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.61.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/index.js

@@ -59,12 +59,8 @@ async function initialize(options, context, webpackConfigurationTransform) {
     const adjustedOptions = options.watch ? options : { ...options, assets: [] };
     const { config, projectRoot, projectSourceRoot, i18n, target } = await (0, webpack_browser_config_1.generateI18nBrowserWebpackConfigFromContext)(adjustedOptions, context, (wco) => [
         (0, configs_1.getCommonConfig)(wco),
-        (0, configs_1.getBrowserConfig)(wco),
         (0, configs_1.getStylesConfig)(wco),
-        (0, configs_1.getStatsConfig)(wco),
         (0, configs_1.getAnalyticsConfig)(wco, context),
-        (0, configs_1.getTypeScriptConfig)(wco),
-        wco.buildOptions.webWorkerTsConfig ? (0, configs_1.getWorkerConfig)(wco) : {},
     ]);
     // Validate asset option values if processed directly
     if (((_a = options.assets) === null || _a === void 0 ? void 0 : _a.length) && !((_b = adjustedOptions.assets) === null || _b === void 0 ? void 0 : _b.length)) {

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

@@ -124,12 +124,8 @@ function serveWebpackBrowser(options, context, transforms = {}) {
         const { config, projectRoot, i18n } = await (0, webpack_browser_config_1.generateI18nBrowserWebpackConfigFromContext)(browserOptions, context, (wco) => [
             (0, configs_1.getDevServerConfig)(wco),
             (0, configs_1.getCommonConfig)(wco),
-            (0, configs_1.getBrowserConfig)(wco),
             (0, configs_1.getStylesConfig)(wco),
-            (0, configs_1.getStatsConfig)(wco),
             (0, configs_1.getAnalyticsConfig)(wco, context),
-            (0, configs_1.getTypeScriptConfig)(wco),
-            browserOptions.webWorkerTsConfig ? (0, configs_1.getWorkerConfig)(wco) : {},
         ], options);
         if (!config.devServer) {
             throw new Error('Webpack Dev Server configuration was not set.');

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;
@@ -156,6 +166,7 @@ async function execute(options, context, transforms) {
         subresourceIntegrity: false,
         outputHashing: schema_1.OutputHashing.None,
         namedChunks: true,
+        allowedCommonJsDependencies: undefined,
     };
     const { config, projectRoot } = await (0, webpack_browser_config_1.generateBrowserWebpackConfigFromContext)(builderOptions, context, (wco) => {
         var _a;
@@ -164,10 +175,6 @@ async function execute(options, context, transforms) {
         const partials = [
             { plugins: [new NoEmitPlugin()] },
             (0, configs_1.getCommonConfig)(wco),
-            (0, configs_1.getBrowserConfig)(wco),
-            (0, configs_1.getTypeScriptConfig)(wco),
-            (0, configs_1.getWorkerConfig)(wco),
-            (0, configs_1.getStatsConfig)(wco),
         ];
         // Add Ivy application file extractor support
         partials.unshift({
@@ -196,16 +203,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/builders/karma/index.d.ts

@@ -8,7 +8,7 @@
 import { BuilderContext, BuilderOutput } from '@angular-devkit/architect';
 import { ConfigOptions } from 'karma';
 import { Observable } from 'rxjs';
-import * as webpack from 'webpack';
+import { Configuration } from 'webpack';
 import { ExecutionTransformer } from '../../transforms';
 import { Schema as KarmaBuilderOptions } from './schema';
 export declare type KarmaConfigOptions = ConfigOptions & {
@@ -19,7 +19,7 @@ export declare type KarmaConfigOptions = ConfigOptions & {
  * @experimental Direct usage of this function is considered experimental.
  */
 export declare function execute(options: KarmaBuilderOptions, context: BuilderContext, transforms?: {
-    webpackConfiguration?: ExecutionTransformer<webpack.Configuration>;
+    webpackConfiguration?: ExecutionTransformer<Configuration>;
     karmaOptions?: (options: KarmaConfigOptions) => KarmaConfigOptions;
 }): Observable<BuilderOutput>;
 export { KarmaBuilderOptions };

package/src/builders/karma/index.js

@@ -59,13 +59,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,
-    }, context, (wco) => [
-        (0, configs_1.getCommonConfig)(wco),
-        (0, configs_1.getStylesConfig)(wco),
-        (0, configs_1.getTypeScriptConfig)(wco),
-        (0, configs_1.getTestConfig)(wco),
-        (0, configs_1.getWorkerConfig)(wco),
-    ]);
+    }, context, (wco) => [(0, configs_1.getCommonConfig)(wco), (0, configs_1.getStylesConfig)(wco)]);
     const karma = await Promise.resolve().then(() => __importStar(require('karma')));
     return [
         karma,

package/src/builders/server/index.js

@@ -109,13 +109,7 @@ async function initialize(options, context, webpackConfigurationTransform) {
         buildOptimizer: false,
         aot: true,
         platform: 'server',
-    }, context, (wco) => [
-        (0, configs_1.getCommonConfig)(wco),
-        (0, configs_1.getServerConfig)(wco),
-        (0, configs_1.getStylesConfig)(wco),
-        (0, configs_1.getStatsConfig)(wco),
-        (0, configs_1.getTypeScriptConfig)(wco),
-    ]);
+    }, context, (wco) => [(0, configs_1.getCommonConfig)(wco), (0, configs_1.getStylesConfig)(wco)]);
     let transformedConfig;
     if (webpackConfigurationTransform) {
         transformedConfig = await webpackConfigurationTransform(config);

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/build-options.d.ts

@@ -59,8 +59,6 @@ export interface BuildOptions {
     inlineStyleLanguage?: InlineStyleLanguage;
     allowedCommonJsDependencies?: string[];
     cache: NormalizedCachedOptions;
-}
-export interface WebpackTestOptions extends BuildOptions {
     codeCoverage?: boolean;
     codeCoverageExclude?: string[];
 }

package/src/utils/i18n-inlining.js

@@ -32,7 +32,7 @@ const path = __importStar(require("path"));
 const action_executor_1 = require("./action-executor");
 const copy_assets_1 = require("./copy-assets");
 const spinner_1 = require("./spinner");
-function emittedFilesToInlineOptions(emittedFiles, scriptsEntryPointName, emittedPath, outputPath, es5, missingTranslation) {
+function emittedFilesToInlineOptions(emittedFiles, scriptsEntryPointName, emittedPath, outputPath, es5, missingTranslation, context) {
     const options = [];
     const originalFiles = [];
     for (const emittedFile of emittedFiles) {
@@ -51,16 +51,31 @@ function emittedFilesToInlineOptions(emittedFiles, scriptsEntryPointName, emitte
             setLocale: emittedFile.name === 'main' || emittedFile.name === 'vendor',
         };
         originalFiles.push(originalPath);
+        // Remove temporary original file as the content has now been read
+        try {
+            fs.unlinkSync(originalPath);
+        }
+        catch (e) {
+            context.logger.debug(`Unable to delete i18n temporary file [${originalPath}]: ${e.toString()}`);
+        }
         try {
             const originalMapPath = originalPath + '.map';
             action.map = fs.readFileSync(originalMapPath, 'utf8');
             originalFiles.push(originalMapPath);
+            // Remove temporary original map file as the content has now been read
+            try {
+                fs.unlinkSync(originalMapPath);
+            }
+            catch (e) {
+                context.logger.debug(`Unable to delete i18n temporary file [${originalMapPath}]: ${e.toString()}`);
+            }
         }
         catch (err) {
             if (err.code !== 'ENOENT') {
                 throw err;
             }
         }
+        context.logger.debug(`i18n file queued for processing: ${action.filename}`);
         options.push(action);
     }
     return { options, originalFiles };
@@ -71,8 +86,9 @@ async function i18nInlineEmittedFiles(context, emittedFiles, i18n, baseOutputPat
     const spinner = new spinner_1.Spinner();
     spinner.start('Generating localized bundles...');
     try {
-        const { options, originalFiles: processedFiles } = emittedFilesToInlineOptions(emittedFiles, scriptsEntryPointName, emittedPath, baseOutputPath, es5, missingTranslation);
+        const { options, originalFiles: processedFiles } = emittedFilesToInlineOptions(emittedFiles, scriptsEntryPointName, emittedPath, baseOutputPath, es5, missingTranslation, context);
         for await (const result of executor.inlineAll(options)) {
+            context.logger.debug(`i18n file processed: ${result.file}`);
             for (const diagnostic of result.diagnostics) {
                 spinner.stop();
                 if (diagnostic.type === 'error') {

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,