@angular-devkit/build-angular 0.1102.2 → 0.1102.6

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "0.1102.2",
+  "version": "0.1102.6",
   "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.2",
-    "@angular-devkit/build-optimizer": "0.1102.2",
-    "@angular-devkit/build-webpack": "0.1102.2",
-    "@angular-devkit/core": "11.2.2",
+    "@angular-devkit/architect": "0.1102.6",
+    "@angular-devkit/build-optimizer": "0.1102.6",
+    "@angular-devkit/build-webpack": "0.1102.6",
+    "@angular-devkit/core": "11.2.6",
     "@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.2",
+    "@ngtools/webpack": "11.2.6",
     "ansi-colors": "4.1.1",
     "autoprefixer": "10.2.4",
     "babel-loader": "8.2.2",

package/src/babel/webpack-loader.js

@@ -49,57 +49,71 @@ exports.default = babel_loader_1.custom(() => {
         compact: false,
         cacheCompression: false,
         sourceType: 'unambiguous',
+        inputSourceMap: false,
     });
     return {
-        async customOptions({ scriptTarget, ...loaderOptions }, { source }) {
+        async customOptions({ i18n, scriptTarget, ...rawOptions }, { source }) {
             // Must process file if plugins are added
-            let shouldProcess = Array.isArray(loaderOptions.plugins) && loaderOptions.plugins.length > 0;
+            let shouldProcess = Array.isArray(rawOptions.plugins) && rawOptions.plugins.length > 0;
+            const customOptions = {
+                forceAsyncTransformation: false,
+                forceES5: false,
+                shouldLink: false,
+                i18n: undefined,
+            };
             // Analyze file for linking
-            let shouldLink = false;
             const { hasLinkerSupport, requiresLinking } = await checkLinking(this.resourcePath, source);
             if (requiresLinking && !hasLinkerSupport) {
                 // Cannot link if there is no linker support
                 this.emitError('File requires the Angular linker. "@angular/compiler-cli" version 11.1.0 or greater is needed.');
             }
             else {
-                shouldLink = requiresLinking;
+                customOptions.shouldLink = requiresLinking;
             }
-            shouldProcess || (shouldProcess = shouldLink);
+            shouldProcess || (shouldProcess = customOptions.shouldLink);
             // Analyze for ES target processing
-            let forceES5 = false;
-            let forceAsyncTransformation = false;
             const esTarget = scriptTarget;
-            if (esTarget < typescript_1.ScriptTarget.ES2015) {
-                // TypeScript files will have already been downlevelled
-                forceES5 = !/\.tsx?$/.test(this.resourcePath);
+            if (esTarget !== undefined) {
+                if (esTarget < typescript_1.ScriptTarget.ES2015) {
+                    // TypeScript files will have already been downlevelled
+                    customOptions.forceES5 = !/\.tsx?$/.test(this.resourcePath);
+                }
+                else if (esTarget >= typescript_1.ScriptTarget.ES2017) {
+                    customOptions.forceAsyncTransformation = !/[\\\/]fesm2015[\\\/]/.test(this.resourcePath) && source.includes('async');
+                }
+                shouldProcess || (shouldProcess = customOptions.forceAsyncTransformation || customOptions.forceES5);
             }
-            else if (esTarget >= typescript_1.ScriptTarget.ES2017) {
-                forceAsyncTransformation = source.includes('async');
+            // Analyze for i18n inlining
+            if (i18n &&
+                !/[\\\/]@angular[\\\/](?:compiler|localize)/.test(this.resourcePath) &&
+                source.includes('$localize')) {
+                customOptions.i18n = i18n;
+                shouldProcess = true;
             }
-            shouldProcess || (shouldProcess = forceAsyncTransformation || forceES5);
             // Add provided loader options to default base options
-            const options = {
+            const loaderOptions = {
                 ...baseOptions,
-                ...loaderOptions,
+                ...rawOptions,
                 cacheIdentifier: JSON.stringify({
                     buildAngular: require('../../package.json').version,
-                    forceAsyncTransformation,
-                    forceES5,
-                    shouldLink,
+                    customOptions,
                     baseOptions,
-                    loaderOptions,
+                    rawOptions,
                 }),
             };
             // Skip babel processing if no actions are needed
             if (!shouldProcess) {
                 // Force the current file to be ignored
-                options.ignore = [() => true];
+                loaderOptions.ignore = [() => true];
             }
-            return { custom: { forceAsyncTransformation, forceES5, shouldLink }, loader: options };
+            return { custom: customOptions, loader: loaderOptions };
         },
         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 || []),
                     [
@@ -108,6 +122,7 @@ exports.default = babel_loader_1.custom(() => {
                             angularLinker: customOptions.shouldLink,
                             forceES5: customOptions.forceES5,
                             forceAsyncTransformation: customOptions.forceAsyncTransformation,
+                            i18n: customOptions.i18n,
                             diagnosticReporter: (type, message) => {
                                 switch (type) {
                                     case 'error':

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

@@ -27,7 +27,6 @@ const package_chunk_sort_1 = require("../utils/package-chunk-sort");
 const read_tsconfig_1 = require("../utils/read-tsconfig");
 const version_1 = require("../utils/version");
 const webpack_browser_config_1 = require("../utils/webpack-browser-config");
-const webpack_diagnostics_1 = require("../utils/webpack-diagnostics");
 const configs_1 = require("../webpack/configs");
 const index_html_webpack_plugin_1 = require("../webpack/plugins/index-html-webpack-plugin");
 const stats_1 = require("../webpack/utils/stats");
@@ -255,7 +254,6 @@ exports.serveWebpackBrowser = serveWebpackBrowser;
 async function setupLocalize(locale, i18n, browserOptions, webpackConfig) {
     var _a;
     const localeDescription = i18n.locales[locale];
-    const i18nDiagnostics = [];
     // Modify main entrypoint to include locale data
     if ((localeDescription === null || localeDescription === void 0 ? void 0 : localeDescription.dataPath) &&
         typeof webpackConfig.entry === 'object' &&
@@ -274,37 +272,24 @@ async function setupLocalize(locale, i18n, browserOptions, webpackConfig) {
         missingTranslationBehavior = 'ignore';
         translation = {};
     }
+    const i18nLoaderOptions = {
+        locale,
+        missingTranslationBehavior,
+        translation: i18n.shouldInline ? translation : undefined,
+    };
     const i18nRule = {
-        test: /\.(?:m?js|ts)$/,
+        test: /\.(?:[cm]?js|ts)$/,
         enforce: 'post',
         use: [
             {
-                loader: require.resolve('babel-loader'),
+                loader: require.resolve('../babel/webpack-loader'),
                 options: {
-                    babelrc: false,
-                    configFile: false,
-                    compact: false,
-                    cacheCompression: false,
-                    cacheDirectory: cache_path_1.findCachePath('babel-loader'),
+                    cacheDirectory: cache_path_1.findCachePath('babel-dev-server-i18n'),
                     cacheIdentifier: JSON.stringify({
-                        buildAngular: require('../../package.json').version,
                         locale,
                         translationIntegrity: localeDescription === null || localeDescription === void 0 ? void 0 : localeDescription.files.map((file) => file.integrity),
                     }),
-                    sourceType: 'unambiguous',
-                    presets: [
-                        [
-                            require.resolve('../babel/presets/application'),
-                            {
-                                i18n: {
-                                    locale,
-                                    translation: i18n.shouldInline ? translation : undefined,
-                                    missingTranslationBehavior,
-                                },
-                                diagnosticReporter: (type, message) => i18nDiagnostics.push({ type, message }),
-                            },
-                        ],
-                    ],
+                    i18n: i18nLoaderOptions,
                 },
             },
         ],
@@ -318,24 +303,5 @@ async function setupLocalize(locale, i18n, browserOptions, webpackConfig) {
         webpackConfig.module.rules = rules;
     }
     rules.push(i18nRule);
-    // Add a plugin to inject the i18n diagnostics
-    // tslint:disable-next-line: no-non-null-assertion
-    webpackConfig.plugins.push({
-        apply: (compiler) => {
-            compiler.hooks.thisCompilation.tap('build-angular', compilation => {
-                compilation.hooks.finishModules.tap('build-angular', () => {
-                    for (const diagnostic of i18nDiagnostics) {
-                        if (diagnostic.type === 'error') {
-                            webpack_diagnostics_1.addError(compilation, diagnostic.message);
-                        }
-                        else {
-                            webpack_diagnostics_1.addWarning(compilation, diagnostic.message);
-                        }
-                    }
-                    i18nDiagnostics.length = 0;
-                });
-            });
-        },
-    });
 }
 exports.default = architect_1.createBuilder(serveWebpackBrowser);

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/index-file/inline-critical-css.js

@@ -27,6 +27,7 @@ class CrittersExtended extends Critters {
             mergeStylesheets: false,
             preload: 'media',
             noscriptFallback: true,
+            inlineFonts: true,
         });
         this.optionsExtended = optionsExtended;
         this.warnings = [];
@@ -48,7 +49,7 @@ class InlineCriticalCssProcessor {
             // Clean up value from value less attributes.
             // This is caused because parse5 always requires attributes to have a string value.
             // nomodule="" defer="" -> nomodule defer.
-            content: content.replace(/(\s[a-z]+)=""/g, '$1'),
+            content: content.replace(/(\s(?:defer|nomodule))=""/g, '$1'),
             errors: critters.errors,
             warnings: critters.warnings,
         };

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();