@angular-devkit/build-angular 12.2.10 → 12.2.14

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "12.2.10",
+  "version": "12.2.14",
   "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.1202.10",
-    "@angular-devkit/build-optimizer": "0.1202.10",
-    "@angular-devkit/build-webpack": "0.1202.10",
-    "@angular-devkit/core": "12.2.10",
+    "@angular-devkit/architect": "0.1202.14",
+    "@angular-devkit/build-optimizer": "0.1202.14",
+    "@angular-devkit/build-webpack": "0.1202.14",
+    "@angular-devkit/core": "12.2.14",
     "@babel/core": "7.14.8",
     "@babel/generator": "7.14.8",
     "@babel/helper-annotate-as-pure": "7.14.5",
@@ -22,7 +22,7 @@
     "@babel/template": "7.14.5",
     "@discoveryjs/json-ext": "0.5.3",
     "@jsdevtools/coverage-istanbul-loader": "3.0.5",
-    "@ngtools/webpack": "12.2.10",
+    "@ngtools/webpack": "12.2.14",
     "ansi-colors": "4.1.1",
     "babel-loader": "8.2.2",
     "browserslist": "^4.9.1",
@@ -31,10 +31,10 @@
     "circular-dependency-plugin": "5.2.2",
     "copy-webpack-plugin": "9.0.1",
     "core-js": "3.16.0",
-    "critters": "0.0.10",
+    "critters": "0.0.12",
     "css-loader": "6.2.0",
     "css-minimizer-webpack-plugin": "3.0.2",
-    "esbuild-wasm": "0.13.4",
+    "esbuild-wasm": "0.13.8",
     "find-cache-dir": "3.3.1",
     "glob": "7.1.7",
     "https-proxy-agent": "5.0.0",
@@ -44,7 +44,7 @@
     "less-loader": "10.0.1",
     "license-webpack-plugin": "2.3.20",
     "loader-utils": "2.0.0",
-    "mini-css-extract-plugin": "2.2.1",
+    "mini-css-extract-plugin": "2.4.2",
     "minimatch": "3.0.4",
     "open": "8.2.1",
     "ora": "5.4.1",
@@ -77,7 +77,7 @@
     "webpack-subresource-integrity": "1.5.2"
   },
   "optionalDependencies": {
-    "esbuild": "0.13.4"
+    "esbuild": "0.13.8"
   },
   "peerDependencies": {
     "@angular/compiler-cli": "^12.0.0",
@@ -126,7 +126,7 @@
   },
   "engines": {
     "node": "^12.14.1 || >=14.0.0",
-    "npm": "^6.11.0 || ^7.5.6",
+    "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
     "yarn": ">= 1.13.0"
   },
   "author": "Angular Authors",

package/src/babel/webpack-loader.js

@@ -157,7 +157,13 @@ exports.default = 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 = remapping_1.default([result.map, inputSourceMap], () => null);
+                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
+                    ...remapping_1.default([result.map, inputSourceMap], () => null),
+                };
             }
             return result;
         },

package/src/browser/index.js

@@ -131,7 +131,7 @@ function buildWebpackBrowser(options, context, transforms = {}) {
         }).pipe(
         // eslint-disable-next-line max-lines-per-function
         operators_1.concatMap(async (buildEvent) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             const spinner = new spinner_1.Spinner();
             spinner.enabled = options.progress !== false;
             const { success, emittedFiles = [], outputPath: webpackOutputPath } = buildEvent;
@@ -241,7 +241,7 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                         if (actionOptions.sourceMaps) {
                             try {
                                 map = fs.readFileSync(filename + '.map', 'utf8');
-                                if (es5Polyfills) {
+                                if (es5Polyfills || i18n.shouldInline) {
                                     fs.unlinkSync(filename + '.map');
                                 }
                             }
@@ -251,6 +251,11 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                             fs.unlinkSync(filename);
                             filename = filename.replace(/\-es20\d{2}/, '');
                         }
+                        else if (i18n.shouldInline) {
+                            // Original files must be deleted with i18n to avoid the original files from
+                            // being copied over the translated files when copying the project assets.
+                            fs.unlinkSync(filename);
+                        }
                         const es2015Polyfills = file.file.startsWith('polyfills-es20');
                         // Record the bundle processing action
                         // The runtime chunk gets special processing for lazy loaded files
@@ -265,6 +270,8 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                             runtime: file.file.startsWith('runtime'),
                             ignoreOriginal: es5Polyfills,
                             optimizeOnly: es2015Polyfills,
+                            // When using i18n, file results are kept in memory for further processing
+                            memoryMode: i18n.shouldInline,
                         });
                         // ES2015 polyfills are only optimized; optimization check was performed above
                         if (es2015Polyfills) {
@@ -279,6 +286,9 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                     const processActions = [];
                     let processRuntimeAction;
                     for (const action of actions) {
+                        if (options.verbose) {
+                            context.logger.info(`[${new Date().toISOString()}] Differential loading file queued: ${action.filename}`);
+                        }
                         // If SRI is enabled always process the runtime bundle
                         // Lazy route integrity values are stored in the runtime bundle
                         if (action.integrityAlgorithm && action.runtime) {
@@ -288,109 +298,124 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                             processActions.push({ replacements: workerReplacements, ...action });
                         }
                     }
-                    const executor = new action_executor_1.BundleActionExecutor({ cachePath: cacheDownlevelPath, i18n }, options.subresourceIntegrity ? 'sha384' : undefined);
+                    const differentialLoadingExecutor = new action_executor_1.BundleActionExecutor({ cachePath: cacheDownlevelPath, i18n }, options.subresourceIntegrity ? 'sha384' : undefined);
                     // Execute the bundle processing actions
                     try {
                         spinner.start('Generating ES5 bundles for differential loading...');
-                        for await (const result of executor.processAll(processActions)) {
-                            processResults.push(result);
-                        }
-                        // Runtime must be processed after all other files
-                        if (processRuntimeAction) {
-                            const runtimeOptions = {
-                                ...processRuntimeAction,
-                                runtimeData: processResults,
-                                supportedBrowsers: buildBrowserFeatures.supportedBrowsers,
-                            };
-                            processResults.push(await Promise.resolve().then(() => __importStar(require('../utils/process-bundle'))).then((m) => m.process(runtimeOptions)));
-                        }
-                        spinner.succeed('ES5 bundle generation complete.');
-                        if (i18n.shouldInline) {
-                            spinner.start('Generating localized bundles...');
-                            const inlineActions = [];
-                            const processedFiles = new Set();
-                            for (const result of processResults) {
+                        for await (const result of differentialLoadingExecutor.processAll(processActions)) {
+                            if (options.verbose) {
                                 if (result.original) {
-                                    inlineActions.push({
-                                        filename: path.basename(result.original.filename),
-                                        code: fs.readFileSync(result.original.filename, 'utf8'),
-                                        map: result.original.map &&
-                                            fs.readFileSync(result.original.map.filename, 'utf8'),
-                                        outputPath: baseOutputPath,
-                                        es5: false,
-                                        missingTranslation: options.i18nMissingTranslation,
-                                        setLocale: result.name === mainChunkId,
-                                    });
-                                    processedFiles.add(result.original.filename);
-                                    if (result.original.map) {
-                                        processedFiles.add(result.original.map.filename);
-                                    }
+                                    context.logger.info(`[${new Date().toISOString()}] Differential loading file processed: ${result.original.filename}`);
                                 }
                                 if (result.downlevel) {
-                                    inlineActions.push({
-                                        filename: path.basename(result.downlevel.filename),
-                                        code: fs.readFileSync(result.downlevel.filename, 'utf8'),
-                                        map: result.downlevel.map &&
-                                            fs.readFileSync(result.downlevel.map.filename, 'utf8'),
-                                        outputPath: baseOutputPath,
-                                        es5: true,
-                                        missingTranslation: options.i18nMissingTranslation,
-                                        setLocale: result.name === mainChunkId,
-                                    });
-                                    processedFiles.add(result.downlevel.filename);
-                                    if (result.downlevel.map) {
-                                        processedFiles.add(result.downlevel.map.filename);
-                                    }
+                                    context.logger.info(`[${new Date().toISOString()}] Differential loading file processed: ${result.downlevel.filename}`);
                                 }
                             }
-                            let hasErrors = false;
-                            try {
-                                for await (const result of executor.inlineAll(inlineActions)) {
-                                    if (options.verbose) {
-                                        context.logger.info(`Localized "${result.file}" [${result.count} translation(s)].`);
-                                    }
-                                    for (const diagnostic of result.diagnostics) {
-                                        spinner.stop();
-                                        if (diagnostic.type === 'error') {
-                                            hasErrors = true;
-                                            context.logger.error(diagnostic.message);
-                                        }
-                                        else {
-                                            context.logger.warn(diagnostic.message);
-                                        }
-                                        spinner.start();
-                                    }
+                            processResults.push(result);
+                        }
+                    }
+                    finally {
+                        differentialLoadingExecutor.stop();
+                    }
+                    // Runtime must be processed after all other files
+                    if (processRuntimeAction) {
+                        const runtimeOptions = {
+                            ...processRuntimeAction,
+                            runtimeData: processResults,
+                            supportedBrowsers: buildBrowserFeatures.supportedBrowsers,
+                        };
+                        processResults.push(await Promise.resolve().then(() => __importStar(require('../utils/process-bundle'))).then((m) => m.process(runtimeOptions)));
+                    }
+                    if (options.verbose) {
+                        context.logger.info(`[${new Date().toISOString()}] Differential loading processing complete.`);
+                    }
+                    spinner.succeed('ES5 bundle generation complete.');
+                    if (i18n.shouldInline) {
+                        spinner.start('Generating localized bundles...');
+                        const inlineActions = [];
+                        for (const result of processResults) {
+                            if (result.original) {
+                                if (options.verbose) {
+                                    context.logger.info(`[${new Date().toISOString()}] i18n localize file queued: ${result.original.filename}`);
                                 }
-                                // Copy any non-processed files into the output locations
-                                await copy_assets_1.copyAssets([
-                                    {
-                                        glob: '**/*',
-                                        input: webpackOutputPath,
-                                        output: '',
-                                        ignore: [...processedFiles].map((f) => path.relative(webpackOutputPath, f)),
-                                    },
-                                ], Array.from(outputPaths.values()), '');
-                            }
-                            catch (err) {
-                                spinner.fail('Localized bundle generation failed.');
-                                return { success: false, error: mapErrorToMessage(err) };
-                            }
-                            if (hasErrors) {
-                                spinner.fail('Localized bundle generation failed.');
+                                inlineActions.push({
+                                    filename: path.basename(result.original.filename),
+                                    // Memory mode is always enabled for i18n
+                                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                                    code: result.original.content,
+                                    map: (_a = result.original.map) === null || _a === void 0 ? void 0 : _a.content,
+                                    outputPath: baseOutputPath,
+                                    es5: false,
+                                    missingTranslation: options.i18nMissingTranslation,
+                                    setLocale: result.name === mainChunkId,
+                                });
                             }
-                            else {
-                                spinner.succeed('Localized bundle generation complete.');
+                            if (result.downlevel) {
+                                if (options.verbose) {
+                                    context.logger.info(`[${new Date().toISOString()}] i18n localize file queued: ${result.downlevel.filename}`);
+                                }
+                                inlineActions.push({
+                                    filename: path.basename(result.downlevel.filename),
+                                    // Memory mode is always enabled for i18n
+                                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                                    code: result.downlevel.content,
+                                    map: (_b = result.downlevel.map) === null || _b === void 0 ? void 0 : _b.content,
+                                    outputPath: baseOutputPath,
+                                    es5: true,
+                                    missingTranslation: options.i18nMissingTranslation,
+                                    setLocale: result.name === mainChunkId,
+                                });
                             }
-                            if (hasErrors) {
-                                return { success: false };
+                        }
+                        let hasErrors = false;
+                        const i18nExecutor = new action_executor_1.BundleActionExecutor({ i18n }, options.subresourceIntegrity ? 'sha384' : undefined);
+                        try {
+                            let localizedCount = 0;
+                            for await (const result of i18nExecutor.inlineAll(inlineActions)) {
+                                localizedCount++;
+                                if (options.verbose) {
+                                    context.logger.info(`[${new Date().toISOString()}] (${localizedCount}/${inlineActions.length}) Localized "${result.file}" [${result.count} translation(s)].`);
+                                }
+                                for (const diagnostic of result.diagnostics) {
+                                    spinner.stop();
+                                    if (diagnostic.type === 'error') {
+                                        hasErrors = true;
+                                        context.logger.error(diagnostic.message);
+                                    }
+                                    else {
+                                        context.logger.warn(diagnostic.message);
+                                    }
+                                    spinner.start();
+                                }
                             }
+                            // Copy any non-processed files into the output locations
+                            await copy_assets_1.copyAssets([
+                                {
+                                    glob: '**/*',
+                                    input: webpackOutputPath,
+                                    output: '',
+                                },
+                            ], Array.from(outputPaths.values()), '');
+                        }
+                        catch (err) {
+                            spinner.fail('Localized bundle generation failed.');
+                            return { success: false, error: mapErrorToMessage(err) };
+                        }
+                        finally {
+                            i18nExecutor.stop();
+                        }
+                        if (hasErrors) {
+                            spinner.fail('Localized bundle generation failed.');
+                        }
+                        else {
+                            spinner.succeed('Localized bundle generation complete.');
+                        }
+                        if (hasErrors) {
+                            return { success: false };
                         }
-                    }
-                    finally {
-                        executor.stop();
                     }
                     for (const result of processResults) {
-                        const chunk = (_a = webpackStats.chunks) === null || _a === void 0 ? void 0 : _a.find((chunk) => { var _a; return ((_a = chunk.id) === null || _a === void 0 ? void 0 : _a.toString()) === result.name; });
+                        const chunk = (_c = webpackStats.chunks) === null || _c === void 0 ? void 0 : _c.find((chunk) => { var _a; return ((_a = chunk.id) === null || _a === void 0 ? void 0 : _a.toString()) === result.name; });
                         if (result.original) {
                             bundleInfoStats.push(generateBundleInfoStats(result.original, chunk, 'modern'));
                         }
@@ -398,9 +423,9 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                             bundleInfoStats.push(generateBundleInfoStats(result.downlevel, chunk, 'legacy'));
                         }
                     }
-                    const unprocessedChunks = ((_b = webpackStats.chunks) === null || _b === void 0 ? void 0 : _b.filter((chunk) => !processResults.find((result) => { var _a; return ((_a = chunk.id) === null || _a === void 0 ? void 0 : _a.toString()) === result.name; }))) || [];
+                    const unprocessedChunks = ((_d = webpackStats.chunks) === null || _d === void 0 ? void 0 : _d.filter((chunk) => !processResults.find((result) => { var _a; return ((_a = chunk.id) === null || _a === void 0 ? void 0 : _a.toString()) === result.name; }))) || [];
                     for (const chunk of unprocessedChunks) {
-                        const asset = (_c = webpackStats.assets) === null || _c === void 0 ? void 0 : _c.find((a) => { var _a; return a.name === ((_a = chunk.files) === null || _a === void 0 ? void 0 : _a[0]); });
+                        const asset = (_e = webpackStats.assets) === null || _e === void 0 ? void 0 : _e.find((a) => { var _a; return a.name === ((_a = chunk.files) === null || _a === void 0 ? void 0 : _a[0]); });
                         bundleInfoStats.push(stats_1.generateBundleStats({ ...chunk, size: asset === null || asset === void 0 ? void 0 : asset.size }));
                     }
                 }
@@ -421,10 +446,10 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                     for (const { severity, message } of budgetFailures) {
                         switch (severity) {
                             case bundle_calculator_1.ThresholdSeverity.Warning:
-                                (_d = webpackStats.warnings) === null || _d === void 0 ? void 0 : _d.push({ message });
+                                (_f = webpackStats.warnings) === null || _f === void 0 ? void 0 : _f.push({ message });
                                 break;
                             case bundle_calculator_1.ThresholdSeverity.Error:
-                                (_e = webpackStats.errors) === null || _e === void 0 ? void 0 : _e.push({ message });
+                                (_g = webpackStats.errors) === null || _g === void 0 ? void 0 : _g.push({ message });
                                 break;
                             default:
                                 assertNever(severity);
@@ -434,7 +459,7 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                 const buildSuccess = success && !stats_1.statsHasErrors(webpackStats);
                 if (buildSuccess) {
                     // Copy assets
-                    if (!options.watch && ((_f = options.assets) === null || _f === void 0 ? void 0 : _f.length)) {
+                    if (!options.watch && ((_h = options.assets) === null || _h === void 0 ? void 0 : _h.length)) {
                         spinner.start('Copying assets...');
                         try {
                             await copy_assets_1.copyAssets(utils_1.normalizeAssetPatterns(options.assets, root, core_1.normalize(projectRoot), projectSourceRoot === undefined ? undefined : core_1.normalize(projectSourceRoot)), Array.from(outputPaths.values()), context.workspaceRoot);
@@ -449,8 +474,8 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                         spinner.start('Generating index html...');
                         const WOFFSupportNeeded = !buildBrowserFeatures.isFeatureSupported('woff2');
                         const entrypoints = package_chunk_sort_1.generateEntryPoints({
-                            scripts: (_g = options.scripts) !== null && _g !== void 0 ? _g : [],
-                            styles: (_h = options.styles) !== null && _h !== void 0 ? _h : [],
+                            scripts: (_j = options.scripts) !== null && _j !== void 0 ? _j : [],
+                            styles: (_k = options.styles) !== null && _k !== void 0 ? _k : [],
                         });
                         const indexHtmlGenerator = new index_html_generator_1.IndexHtmlGenerator({
                             indexPath: path.join(context.workspaceRoot, webpack_browser_config_1.getIndexInputFile(options.index)),

package/src/dev-server/index.js

@@ -274,6 +274,9 @@ function serveWebpackBrowser(options, context, transforms = {}) {
             if (buildEvent.success) {
                 logger.info(`\n${color_1.colors.greenBright(color_1.colors.symbols.check)} Compiled successfully.`);
             }
+            else {
+                logger.info(`\n${color_1.colors.redBright(color_1.colors.symbols.cross)} Failed to compile.`);
+            }
             return { ...buildEvent, baseUrl: serverAddress };
         }));
     }));

package/src/utils/action-executor.js

@@ -62,13 +62,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/process-bundle.d.ts

@@ -24,6 +24,7 @@ export interface ProcessBundleOptions {
     runtimeData?: ProcessBundleResult[];
     replacements?: [string, string][];
     supportedBrowsers?: string[] | Record<string, string>;
+    memoryMode?: boolean;
 }
 export interface ProcessBundleResult {
     name: string;
@@ -35,9 +36,11 @@ export interface ProcessBundleFile {
     filename: string;
     size: number;
     integrity?: string;
+    content?: string;
     map?: {
         filename: string;
         size: number;
+        content?: string;
     };
 }
 export declare const enum CacheKey {

package/src/utils/process-bundle.js

@@ -134,7 +134,7 @@ async function process(options) {
 }
 exports.process = process;
 async function processBundle(options) {
-    const { optimize, isOriginal, code, map, downlevelMap, filename: filepath, hiddenSourceMaps, cacheKeys = [], integrityAlgorithm, } = options;
+    const { optimize, isOriginal, code, map, downlevelMap, filename: filepath, hiddenSourceMaps, cacheKeys = [], integrityAlgorithm, memoryMode, } = options;
     const filename = path.basename(filepath);
     let resultCode = code;
     let optimizeResult;
@@ -168,11 +168,15 @@ async function processBundle(options) {
             mapContent = map;
         }
         await cachePut(mapContent, cacheKeys[isOriginal ? 1 /* OriginalMap */ : 3 /* DownlevelMap */]);
-        fs.writeFileSync(filepath + '.map', mapContent);
+        if (!memoryMode) {
+            fs.writeFileSync(filepath + '.map', mapContent);
+        }
     }
-    const fileResult = createFileEntry(filepath, resultCode, mapContent, integrityAlgorithm);
+    const fileResult = createFileEntry(filepath, resultCode, mapContent, memoryMode, integrityAlgorithm);
     await cachePut(resultCode, cacheKeys[isOriginal ? 0 /* OriginalCode */ : 2 /* DownlevelCode */], fileResult.integrity);
-    fs.writeFileSync(filepath, resultCode);
+    if (!memoryMode) {
+        fs.writeFileSync(filepath, resultCode);
+    }
     return fileResult;
 }
 async function terserMangle(code, options = {}) {
@@ -200,16 +204,18 @@ async function terserMangle(code, options = {}) {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     return { code: minifyOutput.code, map: minifyOutput.map };
 }
-function createFileEntry(filename, code, map, integrityAlgorithm) {
+function createFileEntry(filename, code, map, memoryMode, integrityAlgorithm) {
     return {
         filename: filename,
         size: Buffer.byteLength(code),
         integrity: integrityAlgorithm && generateIntegrityValue(integrityAlgorithm, code),
+        content: memoryMode ? code : undefined,
         map: !map
             ? undefined
             : {
                 filename: filename + '.map',
                 size: Buffer.byteLength(map),
+                content: memoryMode ? map : undefined,
             },
     };
 }