@angular-devkit/build-angular 0.1102.4 → 0.1102.8

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "0.1102.4",
+  "version": "0.1102.8",
   "description": "Angular Webpack Build Facade",
   "experimental": true,
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
-    "@angular-devkit/architect": "0.1102.4",
-    "@angular-devkit/build-optimizer": "0.1102.4",
-    "@angular-devkit/build-webpack": "0.1102.4",
-    "@angular-devkit/core": "11.2.4",
+    "@angular-devkit/architect": "0.1102.8",
+    "@angular-devkit/build-optimizer": "0.1102.8",
+    "@angular-devkit/build-webpack": "0.1102.8",
+    "@angular-devkit/core": "11.2.8",
     "@babel/core": "7.12.10",
     "@babel/generator": "7.12.11",
     "@babel/plugin-transform-async-to-generator": "7.12.1",
@@ -18,8 +18,9 @@
     "@babel/preset-env": "7.12.11",
     "@babel/runtime": "7.12.5",
     "@babel/template": "7.12.7",
+    "@discoveryjs/json-ext": "0.5.2",
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
-    "@ngtools/webpack": "11.2.4",
+    "@ngtools/webpack": "11.2.8",
     "ansi-colors": "4.1.1",
     "autoprefixer": "10.2.4",
     "babel-loader": "8.2.2",
@@ -31,7 +32,7 @@
     "core-js": "3.8.3",
     "critters": "0.0.7",
     "css-loader": "5.0.1",
-    "cssnano": "4.1.10",
+    "cssnano": "4.1.11",
     "file-loader": "6.2.0",
     "find-cache-dir": "3.3.1",
     "glob": "7.1.6",

package/src/babel/webpack-loader.js

@@ -49,6 +49,7 @@ exports.default = babel_loader_1.custom(() => {
         compact: false,
         cacheCompression: false,
         sourceType: 'unambiguous',
+        inputSourceMap: false,
     });
     return {
         async customOptions({ i18n, scriptTarget, ...rawOptions }, { source }) {
@@ -78,7 +79,7 @@ exports.default = babel_loader_1.custom(() => {
                     customOptions.forceES5 = !/\.tsx?$/.test(this.resourcePath);
                 }
                 else if (esTarget >= typescript_1.ScriptTarget.ES2017) {
-                    customOptions.forceAsyncTransformation = source.includes('async');
+                    customOptions.forceAsyncTransformation = !/[\\\/]fesm2015[\\\/]/.test(this.resourcePath) && source.includes('async');
                 }
                 shouldProcess || (shouldProcess = customOptions.forceAsyncTransformation || customOptions.forceES5);
             }
@@ -110,6 +111,9 @@ exports.default = babel_loader_1.custom(() => {
         config(configuration, { customOptions }) {
             return {
                 ...configuration.options,
+                // Workaround for https://github.com/babel/babel-loader/pull/896 is available
+                // Delete once the above PR is released
+                inputSourceMap: (configuration.options.inputSourceMap || false),
                 presets: [
                     ...(configuration.options.presets || []),
                     [

package/src/babel-bazel.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright Google Inc. 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
+ */
+
+// Workaround for https://github.com/bazelbuild/rules_nodejs/issues/1033
+// Alternative approach instead of https://github.com/angular/angular/pull/33226
+declare module '@babel/core' {
+  export * from '@types/babel__core';
+}
+declare module '@babel/generator' {
+  export { default } from '@types/babel__generator';
+}
+declare module '@babel/traverse' {
+  export { default } from '@types/babel__traverse';
+}
+declare module '@babel/template' {
+  export { default } from '@types/babel__template';
+}

package/src/browser/schema.json

@@ -499,6 +499,7 @@
             },
             "bundleName": {
               "type": "string",
+              "pattern": "^[\\w\\-.]*$",
               "description": "The bundle name for this extra entry point."
             },
             "inject": {

package/src/karma/schema.json

@@ -238,6 +238,7 @@
             },
             "bundleName": {
               "type": "string",
+              "pattern": "^[\\w\\-.]*$",
               "description": "The bundle name for this extra entry point."
             },
             "inject": {

package/src/test-utils.js

@@ -47,6 +47,13 @@ async function browserBuild(architect, host, target, overrides, scheduleOptions)
     const run = await architect.scheduleTarget(target, overrides, scheduleOptions);
     const output = (await run.result);
     expect(output.success).toBe(true);
+    if (!output.success) {
+        await run.stop();
+        return {
+            output,
+            files: {},
+        };
+    }
     expect(output.outputPaths[0]).not.toBeUndefined();
     const outputPath = core_1.normalize(output.outputPaths[0]);
     const fileNames = await host.list(outputPath).toPromise();

package/src/typings.d.ts

@@ -5,18 +5,6 @@
  * 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
  */
-
-// Workaround for https://github.com/bazelbuild/rules_nodejs/issues/1033
-// Alternative approach instead of https://github.com/angular/angular/pull/33226
-declare module '@babel/core' {
-  export * from '@types/babel__core';
-}
-declare module '@babel/generator' {
-  export { default } from '@types/babel__generator';
-}
-declare module '@babel/traverse' {
-  export { default } from '@types/babel__traverse';
-}
-declare module '@babel/template' {
-  export { default } from '@types/babel__template';
+declare module '@discoveryjs/json-ext' {
+  export function stringifyStream(value: unknown): import('stream').Readable;
 }

package/src/utils/bundle-calculator.js

@@ -23,9 +23,8 @@ var ThresholdSeverity;
 })(ThresholdSeverity = exports.ThresholdSeverity || (exports.ThresholdSeverity = {}));
 var DifferentialBuildType;
 (function (DifferentialBuildType) {
-    // FIXME: this should match the actual file suffix and not hardcoded.
-    DifferentialBuildType["ORIGINAL"] = "es2015";
-    DifferentialBuildType["DOWNLEVEL"] = "es5";
+    DifferentialBuildType["ORIGINAL"] = "original";
+    DifferentialBuildType["DOWNLEVEL"] = "downlevel";
 })(DifferentialBuildType || (DifferentialBuildType = {}));
 function* calculateThresholds(budget) {
     if (budget.maximumWarning) {
@@ -161,14 +160,15 @@ class BundleCalculator extends Calculator {
         if (!budgetName) {
             return [];
         }
+        const buildTypeLabels = getBuildTypeLabels(this.processResults);
         // The chunk may or may not have differential builds. Compute the size for
         // each then check afterwards if they are all the same.
         const buildSizes = Object.values(DifferentialBuildType).map((buildType) => {
             const size = this.chunks
-                .filter(chunk => chunk.names.indexOf(budgetName) !== -1)
+                .filter(chunk => chunk.names.includes(budgetName))
                 .map(chunk => this.calculateChunkSize(chunk, buildType))
                 .reduce((l, r) => l + r, 0);
-            return { size, label: `bundle ${this.budget.name}-${buildType}` };
+            return { size, label: `bundle ${this.budget.name}-${buildTypeLabels[buildType]}` };
         });
         // If this bundle was not actually generated by a differential build, then
         // merge the results into a single value.
@@ -185,9 +185,10 @@ class BundleCalculator extends Calculator {
  */
 class InitialCalculator extends Calculator {
     calculate() {
+        const buildTypeLabels = getBuildTypeLabels(this.processResults);
         const buildSizes = Object.values(DifferentialBuildType).map((buildType) => {
             return {
-                label: `bundle initial-${buildType}`,
+                label: `bundle initial-${buildTypeLabels[buildType]}`,
                 size: this.chunks
                     .filter(chunk => chunk.initial)
                     .map(chunk => this.calculateChunkSize(chunk, buildType))
@@ -353,3 +354,17 @@ function mergeDifferentialBuildSizes(buildSizes, mergeLabel) {
 function allEquivalent(items) {
     return new Set(items).size < 2;
 }
+function getBuildTypeLabels(processResults) {
+    var _a, _b, _c;
+    const fileNameSuffixRegExp = /\-(es20\d{2}|esnext)\./;
+    const originalFileName = (_b = (_a = processResults
+        .find(({ original }) => (original === null || original === void 0 ? void 0 : original.filename) && fileNameSuffixRegExp.test(original.filename))) === null || _a === void 0 ? void 0 : _a.original) === null || _b === void 0 ? void 0 : _b.filename;
+    let originalSuffix;
+    if (originalFileName) {
+        originalSuffix = (_c = fileNameSuffixRegExp.exec(originalFileName)) === null || _c === void 0 ? void 0 : _c[1];
+    }
+    return {
+        [DifferentialBuildType.DOWNLEVEL]: 'es5',
+        [DifferentialBuildType.ORIGINAL]: originalSuffix || 'es2015',
+    };
+}

package/src/utils/process-bundle.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="packages/angular_devkit/build_angular/src/babel-bazel" />
 /**
  * @license
  * Copyright Google Inc. All Rights Reserved.

package/src/webpack/configs/common.js

@@ -14,12 +14,12 @@ const fs_1 = require("fs");
 const path = require("path");
 const typescript_1 = require("typescript");
 const webpack_1 = require("webpack");
-const webpack_sources_1 = require("webpack-sources");
 const utils_1 = require("../../utils");
 const cache_path_1 = require("../../utils/cache-path");
 const environment_options_1 = require("../../utils/environment-options");
 const find_up_1 = require("../../utils/find-up");
 const spinner_1 = require("../../utils/spinner");
+const webpack_diagnostics_1 = require("../../utils/webpack-diagnostics");
 const webpack_version_1 = require("../../utils/webpack-version");
 const plugins_1 = require("../plugins");
 const helpers_1 = require("../utils/helpers");
@@ -257,9 +257,20 @@ function getCommonConfig(wco) {
     if (buildOptions.statsJson) {
         extraPlugins.push(new (class {
             apply(compiler) {
-                compiler.hooks.emit.tap('angular-cli-stats', compilation => {
-                    const data = JSON.stringify(compilation.getStats().toJson('verbose'), undefined, 2);
-                    compilation.assets['stats.json'] = new webpack_sources_1.RawSource(data);
+                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(stats.compilation.outputOptions.path, 'stats.json');
+                    try {
+                        await fs_1.promises.mkdir(path.dirname(statsOutputPath), { recursive: true });
+                        await new Promise((resolve, reject) => stringifyStream(data)
+                            .pipe(fs_1.createWriteStream(statsOutputPath))
+                            .on('close', resolve)
+                            .on('error', reject));
+                    }
+                    catch (error) {
+                        webpack_diagnostics_1.addError(stats.compilation, `Unable to write stats file: ${error.message || 'unknown error'}`);
+                    }
                 });
             }
         })());

package/src/webpack/plugins/analytics.d.ts

@@ -58,7 +58,7 @@ export declare class NgBuildAnalyticsPlugin {
     protected _checkTsNormalModule(module: NormalModule): void;
     protected _checkNgFactoryNormalModule(module: NormalModule): void;
     protected _collectErrors(stats: Stats): void;
-    protected _collectBundleStats(json: any): void;
+    protected _collectBundleStats(compilation: compilation.Compilation): void;
     /************************************************************************************************
      * The next section is all the different Webpack hooks for this plugin.
      */

package/src/webpack/plugins/analytics.js

@@ -164,15 +164,15 @@ class NgBuildAnalyticsPlugin {
             }
         }
     }
-    // We can safely disable no any here since we know the format of the JSON output from webpack.
-    // tslint:disable-next-line:no-any
-    _collectBundleStats(json) {
-        json.chunks
+    _collectBundleStats(compilation) {
+        // `compilation.chunks` is a Set in Webpack 5
+        const chunks = Array.from(compilation.chunks);
+        chunks
             .filter((chunk) => chunk.rendered)
             .forEach((chunk) => {
-            const asset = json.assets.find((x) => x.name == chunk.files[0]);
-            const size = asset ? asset.size : 0;
-            if (chunk.entry || chunk.initial) {
+            const asset = compilation.assets[chunk.files[0]];
+            const size = asset ? asset.size() : 0;
+            if (chunk.canBeInitial()) {
                 this._stats.initialChunkSize += size;
             }
             else {
@@ -182,23 +182,25 @@ class NgBuildAnalyticsPlugin {
             this._stats.totalChunkCount++;
             this._stats.totalChunkSize += size;
         });
-        json.assets
+        Object.entries(compilation.assets)
             // Filter out chunks. We only count assets that are not JS.
-            .filter((a) => {
-            return json.chunks.every((chunk) => chunk.files[0] != a.name);
+            .filter(([name]) => {
+            return chunks.every((chunk) => chunk.files[0] != name);
         })
-            .forEach((a) => {
-            this._stats.assetSize += (a.size || 0);
+            .forEach(([, asset]) => {
+            this._stats.assetSize += asset.size();
             this._stats.assetCount++;
         });
-        for (const asset of json.assets) {
-            if (asset.name == 'polyfill') {
-                this._stats.polyfillSize += asset.size || 0;
+        for (const [name, asset] of Object.entries(compilation.assets)) {
+            if (name == 'polyfill') {
+                this._stats.polyfillSize += asset.size();
             }
         }
-        for (const chunk of json.chunks) {
+        for (const chunk of compilation.chunks) {
             if (chunk.files[0] && chunk.files[0].endsWith('.css')) {
-                this._stats.cssSize += chunk.size || 0;
+                const asset = compilation.assets[chunk.files[0]];
+                const size = asset ? asset.size() : 0;
+                this._stats.cssSize += size;
             }
         }
     }
@@ -237,7 +239,7 @@ class NgBuildAnalyticsPlugin {
     }
     _done(stats) {
         this._collectErrors(stats);
-        this._collectBundleStats(stats.toJson());
+        this._collectBundleStats(stats.compilation);
         if (this._built) {
             this._reportRebuildMetrics(stats);
         }

package/src/webpack/plugins/karma/karma.js

@@ -164,10 +164,9 @@ const init = (config, emitter) => {
     let lastCompilationHash;
     const statsConfig = stats_2.getWebpackStatsConfig();
     compiler.hooks.done.tap('karma', (stats) => {
-        if (stats.compilation.errors.length > 0) {
-            const json = stats.toJson(config.stats);
+        if (stats.hasErrors()) {
             // Print compilation errors.
-            logger.error(stats_1.statsErrorsToString(json, statsConfig));
+            logger.error(stats_1.statsErrorsToString(stats.compilation, statsConfig));
             lastCompilationHash = undefined;
             // Emit a failure build event if there are compilation errors.
             failureCb();