@angular-devkit/build-angular 12.2.11 → 12.2.15

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "12.2.11",
+  "version": "12.2.15",
   "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.11",
-    "@angular-devkit/build-optimizer": "0.1202.11",
-    "@angular-devkit/build-webpack": "0.1202.11",
-    "@angular-devkit/core": "12.2.11",
+    "@angular-devkit/architect": "0.1202.15",
+    "@angular-devkit/build-optimizer": "0.1202.15",
+    "@angular-devkit/build-webpack": "0.1202.15",
+    "@angular-devkit/core": "12.2.15",
     "@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.11",
+    "@ngtools/webpack": "12.2.15",
     "ansi-colors": "4.1.1",
     "babel-loader": "8.2.2",
     "browserslist": "^4.9.1",
@@ -31,7 +31,7 @@
     "circular-dependency-plugin": "5.2.2",
     "copy-webpack-plugin": "9.0.1",
     "core-js": "3.16.0",
-    "critters": "0.0.11",
+    "critters": "0.0.12",
     "css-loader": "6.2.0",
     "css-minimizer-webpack-plugin": "3.0.2",
     "esbuild-wasm": "0.13.8",
@@ -72,7 +72,7 @@
     "tslib": "2.3.0",
     "webpack": "5.50.0",
     "webpack-dev-middleware": "5.0.0",
-    "webpack-dev-server": "3.11.2",
+    "webpack-dev-server": "3.11.3",
     "webpack-merge": "5.8.0",
     "webpack-subresource-integrity": "1.5.2"
   },

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) {
@@ -293,6 +303,14 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                     try {
                         spinner.start('Generating ES5 bundles for differential loading...');
                         for await (const result of differentialLoadingExecutor.processAll(processActions)) {
+                            if (options.verbose) {
+                                if (result.original) {
+                                    context.logger.info(`[${new Date().toISOString()}] Differential loading file processed: ${result.original.filename}`);
+                                }
+                                if (result.downlevel) {
+                                    context.logger.info(`[${new Date().toISOString()}] Differential loading file processed: ${result.downlevel.filename}`);
+                                }
+                            }
                             processResults.push(result);
                         }
                     }
@@ -308,51 +326,55 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                         };
                         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 = [];
-                        const processedFiles = new Set();
                         for (const result of processResults) {
                             if (result.original) {
+                                if (options.verbose) {
+                                    context.logger.info(`[${new Date().toISOString()}] i18n localize file queued: ${result.original.filename}`);
+                                }
                                 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'),
+                                    // 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,
                                 });
-                                processedFiles.add(result.original.filename);
-                                if (result.original.map) {
-                                    processedFiles.add(result.original.map.filename);
-                                }
                             }
                             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),
-                                    code: fs.readFileSync(result.downlevel.filename, 'utf8'),
-                                    map: result.downlevel.map &&
-                                        fs.readFileSync(result.downlevel.map.filename, 'utf8'),
+                                    // 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,
                                 });
-                                processedFiles.add(result.downlevel.filename);
-                                if (result.downlevel.map) {
-                                    processedFiles.add(result.downlevel.map.filename);
-                                }
                             }
                         }
                         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(`Localized "${result.file}" [${result.count} translation(s)].`);
+                                    context.logger.info(`[${new Date().toISOString()}] (${localizedCount}/${inlineActions.length}) Localized "${result.file}" [${result.count} translation(s)].`);
                                 }
                                 for (const diagnostic of result.diagnostics) {
                                     spinner.stop();
@@ -372,7 +394,6 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                                     glob: '**/*',
                                     input: webpackOutputPath,
                                     output: '',
-                                    ignore: [...processedFiles].map((f) => path.relative(webpackOutputPath, f)),
                                 },
                             ], Array.from(outputPaths.values()), '');
                         }
@@ -394,7 +415,7 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                         }
                     }
                     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'));
                         }
@@ -402,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 }));
                     }
                 }
@@ -425,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);
@@ -438,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);
@@ -453,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/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,
             },
     };
 }