@angular-devkit/build-angular 15.0.0-next.4 → 15.0.0-next.6

package/package.json

@@ -1,32 +1,32 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "15.0.0-next.4",
+  "version": "15.0.0-next.6",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.2.0",
-    "@angular-devkit/architect": "0.1500.0-next.4",
-    "@angular-devkit/build-webpack": "0.1500.0-next.4",
-    "@angular-devkit/core": "15.0.0-next.4",
+    "@angular-devkit/architect": "0.1500.0-next.6",
+    "@angular-devkit/build-webpack": "0.1500.0-next.6",
+    "@angular-devkit/core": "15.0.0-next.6",
     "@babel/core": "7.19.3",
-    "@babel/generator": "7.19.3",
+    "@babel/generator": "7.19.5",
     "@babel/helper-annotate-as-pure": "7.18.6",
     "@babel/plugin-proposal-async-generator-functions": "7.19.1",
     "@babel/plugin-transform-async-to-generator": "7.18.6",
     "@babel/plugin-transform-runtime": "7.19.1",
-    "@babel/preset-env": "7.19.3",
-    "@babel/runtime": "7.19.0",
+    "@babel/preset-env": "7.19.4",
+    "@babel/runtime": "7.19.4",
     "@babel/template": "7.18.10",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "15.0.0-next.4",
+    "@ngtools/webpack": "15.0.0-next.6",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.12",
     "babel-loader": "8.2.5",
     "babel-plugin-istanbul": "6.1.1",
     "browserslist": "^4.9.1",
-    "cacache": "16.1.3",
+    "cacache": "17.0.0",
     "chokidar": "3.5.3",
     "copy-webpack-plugin": "11.0.0",
     "critters": "0.0.16",
@@ -38,7 +38,7 @@
     "jsonc-parser": "3.2.0",
     "karma-source-map-support": "1.4.0",
     "less": "4.1.3",
-    "less-loader": "11.0.0",
+    "less-loader": "11.1.0",
     "license-webpack-plugin": "4.0.2",
     "loader-utils": "3.2.0",
     "mini-css-extract-plugin": "2.6.1",
@@ -47,16 +47,15 @@
     "ora": "5.4.1",
     "parse5-html-rewriting-stream": "6.0.1",
     "piscina": "3.2.0",
-    "postcss": "8.4.17",
-    "postcss-import": "15.0.0",
+    "postcss": "8.4.18",
     "postcss-loader": "7.0.1",
-    "regenerator-runtime": "0.13.9",
+    "regenerator-runtime": "0.13.10",
     "resolve-url-loader": "5.0.0",
     "rxjs": "6.6.7",
     "sass": "1.55.0",
-    "sass-loader": "13.0.2",
+    "sass-loader": "13.1.0",
     "semver": "7.3.8",
-    "source-map-loader": "4.0.0",
+    "source-map-loader": "4.0.1",
     "source-map-support": "0.5.21",
     "terser": "5.15.1",
     "text-table": "0.2.0",
@@ -74,17 +73,21 @@
   "peerDependencies": {
     "@angular/compiler-cli": "^15.0.0-next",
     "@angular/localize": "^15.0.0-next",
+    "@angular/platform-server": "^15.0.0-next",
     "@angular/service-worker": "^15.0.0-next",
     "karma": "^6.3.0",
     "ng-packagr": "^15.0.0-next",
     "protractor": "^7.0.0",
     "tailwindcss": "^2.0.0 || ^3.0.0",
-    "typescript": ">=4.6.2 <4.9"
+    "typescript": "~4.8.2"
   },
   "peerDependenciesMeta": {
     "@angular/localize": {
       "optional": true
     },
+    "@angular/platform-server": {
+      "optional": true
+    },
     "@angular/service-worker": {
       "optional": true
     },
@@ -113,7 +116,7 @@
     "url": "https://github.com/angular/angular-cli.git"
   },
   "engines": {
-    "node": "^14.20.0 || >=16.10.0",
+    "node": "^14.20.0 || ^16.13.0 || >=18.10.0",
     "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
     "yarn": ">= 1.13.0"
   },

package/src/builders/app-shell/index.js

@@ -34,9 +34,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const architect_1 = require("@angular-devkit/architect");
-const assert_1 = __importDefault(require("assert"));
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
+const piscina_1 = __importDefault(require("piscina"));
 const utils_1 = require("../../utils");
 const error_1 = require("../../utils/error");
 const inline_critical_css_1 = require("../../utils/index-file/inline-critical-css");
@@ -49,10 +49,9 @@ async function _renderUniversal(options, context, browserResult, serverResult, s
     const rawBrowserOptions = (await context.getTargetOptions(browserTarget));
     const browserBuilderName = await context.getBuilderNameForTarget(browserTarget);
     const browserOptions = await context.validateOptions(rawBrowserOptions, browserBuilderName);
-    // Initialize zone.js
+    // Locate zone.js to load in the render worker
     const root = context.workspaceRoot;
     const zonePackage = require.resolve('zone.js', { paths: [root] });
-    await Promise.resolve().then(() => __importStar(require(zonePackage)));
     const projectName = context.target && context.target.project;
     if (!projectName) {
         throw new Error('The builder requires a target.');
@@ -66,46 +65,46 @@ async function _renderUniversal(options, context, browserResult, serverResult, s
             deployUrl: browserOptions.deployUrl,
         })
         : undefined;
-    for (const { path: outputPath, baseHref } of browserResult.outputs) {
-        const localeDirectory = path.relative(browserResult.baseOutputPath, outputPath);
-        const browserIndexOutputPath = path.join(outputPath, 'index.html');
-        const indexHtml = await fs.promises.readFile(browserIndexOutputPath, 'utf8');
-        const serverBundlePath = await _getServerModuleBundlePath(options, context, serverResult, localeDirectory);
-        const { AppServerModule, renderModule, ɵSERVER_CONTEXT } = (await Promise.resolve().then(() => __importStar(require(serverBundlePath))));
-        (0, assert_1.default)(renderModule, `renderModule was not exported from: ${serverBundlePath}.`);
-        (0, assert_1.default)(AppServerModule, `AppServerModule was not exported from: ${serverBundlePath}.`);
-        (0, assert_1.default)(ɵSERVER_CONTEXT, `ɵSERVER_CONTEXT was not exported from: ${serverBundlePath}.`);
-        // Load platform server module renderer
-        let html = await renderModule(AppServerModule, {
-            document: indexHtml,
-            url: options.route,
-            extraProviders: [
-                {
-                    provide: ɵSERVER_CONTEXT,
-                    useValue: 'app-shell',
-                },
-            ],
-        });
-        // Overwrite the client index file.
-        const outputIndexPath = options.outputIndexPath
-            ? path.join(root, options.outputIndexPath)
-            : browserIndexOutputPath;
-        if (inlineCriticalCssProcessor) {
-            const { content, warnings, errors } = await inlineCriticalCssProcessor.process(html, {
-                outputPath,
+    const renderWorker = new piscina_1.default({
+        filename: require.resolve('./render-worker'),
+        maxThreads: 1,
+        workerData: { zonePackage },
+    });
+    try {
+        for (const { path: outputPath, baseHref } of browserResult.outputs) {
+            const localeDirectory = path.relative(browserResult.baseOutputPath, outputPath);
+            const browserIndexOutputPath = path.join(outputPath, 'index.html');
+            const indexHtml = await fs.promises.readFile(browserIndexOutputPath, 'utf8');
+            const serverBundlePath = await _getServerModuleBundlePath(options, context, serverResult, localeDirectory);
+            let html = await renderWorker.run({
+                serverBundlePath,
+                document: indexHtml,
+                url: options.route,
             });
-            html = content;
-            if (warnings.length || errors.length) {
-                spinner.stop();
-                warnings.forEach((m) => context.logger.warn(m));
-                errors.forEach((m) => context.logger.error(m));
-                spinner.start();
+            // Overwrite the client index file.
+            const outputIndexPath = options.outputIndexPath
+                ? path.join(root, options.outputIndexPath)
+                : browserIndexOutputPath;
+            if (inlineCriticalCssProcessor) {
+                const { content, warnings, errors } = await inlineCriticalCssProcessor.process(html, {
+                    outputPath,
+                });
+                html = content;
+                if (warnings.length || errors.length) {
+                    spinner.stop();
+                    warnings.forEach((m) => context.logger.warn(m));
+                    errors.forEach((m) => context.logger.error(m));
+                    spinner.start();
+                }
+            }
+            await fs.promises.writeFile(outputIndexPath, html);
+            if (browserOptions.serviceWorker) {
+                await (0, service_worker_1.augmentAppWithServiceWorker)(projectRoot, root, outputPath, baseHref !== null && baseHref !== void 0 ? baseHref : '/', browserOptions.ngswConfigPath);
             }
         }
-        await fs.promises.writeFile(outputIndexPath, html);
-        if (browserOptions.serviceWorker) {
-            await (0, service_worker_1.augmentAppWithServiceWorker)(projectRoot, root, outputPath, baseHref !== null && baseHref !== void 0 ? baseHref : '/', browserOptions.ngswConfigPath);
-        }
+    }
+    finally {
+        await renderWorker.destroy();
     }
     return browserResult;
 }

package/src/builders/app-shell/render-worker.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright Google LLC 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
+ */
+/**
+ * A request to render a Server bundle generate by the universal server builder.
+ */
+interface RenderRequest {
+    /**
+     * The path to the server bundle that should be loaded and rendered.
+     */
+    serverBundlePath: string;
+    /**
+     * The existing HTML document as a string that will be augmented with the rendered application.
+     */
+    document: string;
+    /**
+     * An optional URL path that represents the Angular route that should be rendered.
+     */
+    url: string | undefined;
+}
+/**
+ * Renders an application based on a provided server bundle path, initial document, and optional URL route.
+ * @param param0 A request to render a server bundle.
+ * @returns A promise that resolves to the render HTML document for the application.
+ */
+declare function render({ serverBundlePath, document, url }: RenderRequest): Promise<string>;
+/**
+ * The default export will be the promise returned by the initialize function.
+ * This is awaited by piscina prior to using the Worker.
+ */
+declare const _default: Promise<typeof render>;
+export default _default;

package/src/builders/app-shell/render-worker.js

@@ -0,0 +1,82 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC 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
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const node_assert_1 = __importDefault(require("node:assert"));
+const node_worker_threads_1 = require("node:worker_threads");
+/**
+ * The fully resolved path to the zone.js package that will be loaded during worker initialization.
+ * This is passed as workerData when setting up the worker via the `piscina` package.
+ */
+const { zonePackage } = node_worker_threads_1.workerData;
+/**
+ * Renders an application based on a provided server bundle path, initial document, and optional URL route.
+ * @param param0 A request to render a server bundle.
+ * @returns A promise that resolves to the render HTML document for the application.
+ */
+async function render({ serverBundlePath, document, url }) {
+    const { AppServerModule, renderModule, ɵSERVER_CONTEXT } = (await Promise.resolve().then(() => __importStar(require(serverBundlePath))));
+    (0, node_assert_1.default)(renderModule, `renderModule was not exported from: ${serverBundlePath}.`);
+    (0, node_assert_1.default)(AppServerModule, `AppServerModule was not exported from: ${serverBundlePath}.`);
+    (0, node_assert_1.default)(ɵSERVER_CONTEXT, `ɵSERVER_CONTEXT was not exported from: ${serverBundlePath}.`);
+    // Render platform server module
+    const html = await renderModule(AppServerModule, {
+        document,
+        url,
+        extraProviders: [
+            {
+                provide: ɵSERVER_CONTEXT,
+                useValue: 'app-shell',
+            },
+        ],
+    });
+    return html;
+}
+/**
+ * Initializes the worker when it is first created by loading the Zone.js package
+ * into the worker instance.
+ *
+ * @returns A promise resolving to the render function of the worker.
+ */
+async function initialize() {
+    // Setup Zone.js
+    await Promise.resolve().then(() => __importStar(require(zonePackage)));
+    // Return the render function for use
+    return render;
+}
+/**
+ * The default export will be the promise returned by the initialize function.
+ * This is awaited by piscina prior to using the Worker.
+ */
+exports.default = initialize();

package/src/builders/browser/index.d.ts

@@ -11,11 +11,13 @@ import { Observable } from 'rxjs';
 import webpack from 'webpack';
 import { ExecutionTransformer } from '../../transforms';
 import { IndexHtmlTransform } from '../../utils/index-file/index-html-generator';
+import { BuildEventStats } from '../../webpack/utils/stats';
 import { Schema as BrowserBuilderSchema } from './schema';
 /**
  * @experimental Direct usage of this type is considered experimental.
  */
 export declare type BrowserBuilderOutput = BuilderOutput & {
+    stats: BuildEventStats;
     baseOutputPath: string;
     /**
      * @deprecated in version 14. Use 'outputs' instead.

package/src/builders/browser/index.js

@@ -69,7 +69,6 @@ async function initialize(options, context, webpackConfigurationTransform) {
     const { config, projectRoot, projectSourceRoot, i18n } = await (0, webpack_browser_config_1.generateI18nBrowserWebpackConfigFromContext)(adjustedOptions, context, (wco) => [
         (0, configs_1.getCommonConfig)(wco),
         (0, configs_1.getStylesConfig)(wco),
-        (0, configs_1.getAnalyticsConfig)(wco, context),
     ]);
     // 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)) {
@@ -137,7 +136,9 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                         context.logger.info(stats.toString(config.stats));
                     }
                 }),
-        }).pipe((0, operators_1.concatMap)(async (buildEvent) => {
+        }).pipe((0, operators_1.concatMap)(
+        // eslint-disable-next-line max-lines-per-function
+        async (buildEvent) => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             const spinner = new spinner_1.Spinner();
             spinner.enabled = options.progress !== false;
@@ -164,7 +165,10 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                 if ((0, stats_1.statsHasErrors)(webpackStats)) {
                     context.logger.error((0, stats_1.statsErrorsToString)(webpackStats, { colors: true }));
                 }
-                return { success };
+                return {
+                    webpackStats: webpackRawStats,
+                    output: { success: false },
+                };
             }
             else {
                 outputPaths = (0, output_paths_1.ensureOutputPaths)(baseOutputPath, i18n);
@@ -172,7 +176,10 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                 if (i18n.shouldInline) {
                     const success = await (0, i18n_inlining_1.i18nInlineEmittedFiles)(context, emittedFiles, i18n, baseOutputPath, Array.from(outputPaths.values()), scriptsEntryPointName, webpackOutputPath, options.i18nMissingTranslation);
                     if (!success) {
-                        return { success: false };
+                        return {
+                            webpackStats: webpackRawStats,
+                            output: { success: false },
+                        };
                     }
                 }
                 // Check for budget errors and display them to the user.
@@ -205,7 +212,13 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                         catch (err) {
                             spinner.fail(color_1.colors.redBright('Copying of assets failed.'));
                             (0, error_1.assertIsError)(err);
-                            return { success: false, error: 'Unable to copy assets: ' + err.message };
+                            return {
+                                output: {
+                                    success: false,
+                                    error: 'Unable to copy assets: ' + err.message,
+                                },
+                                webpackStats: webpackRawStats,
+                            };
                         }
                     }
                     if (options.index) {
@@ -249,12 +262,19 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                             }
                             catch (error) {
                                 spinner.fail('Index html generation failed.');
-                                return { success: false, error: mapErrorToMessage(error) };
+                                (0, error_1.assertIsError)(error);
+                                return {
+                                    webpackStats: webpackRawStats,
+                                    output: { success: false, error: error.message },
+                                };
                             }
                         }
                         if (hasErrors) {
                             spinner.fail('Index html generation failed.');
-                            return { success: false };
+                            return {
+                                webpackStats: webpackRawStats,
+                                output: { success: false },
+                            };
                         }
                         else {
                             spinner.succeed('Index html generation complete.');
@@ -268,17 +288,25 @@ function buildWebpackBrowser(options, context, transforms = {}) {
                             }
                             catch (error) {
                                 spinner.fail('Service worker generation failed.');
-                                return { success: false, error: mapErrorToMessage(error) };
+                                (0, error_1.assertIsError)(error);
+                                return {
+                                    webpackStats: webpackRawStats,
+                                    output: { success: false, error: error.message },
+                                };
                             }
                         }
                         spinner.succeed('Service worker generation complete.');
                     }
                 }
                 (0, stats_1.webpackStatsLogger)(context.logger, webpackStats, config, budgetFailures);
-                return { success: buildSuccess };
+                return {
+                    webpackStats: webpackRawStats,
+                    output: { success: buildSuccess },
+                };
             }
-        }), (0, operators_1.map)((event) => ({
+        }), (0, operators_1.map)(({ output: event, webpackStats }) => ({
             ...event,
+            stats: (0, stats_1.generateBuildEventStats)(webpackStats, options),
             baseOutputPath,
             outputPath: baseOutputPath,
             outputPaths: (outputPaths && Array.from(outputPaths.values())) || [baseOutputPath],
@@ -305,15 +333,6 @@ function buildWebpackBrowser(options, context, transforms = {}) {
     }
 }
 exports.buildWebpackBrowser = buildWebpackBrowser;
-function mapErrorToMessage(error) {
-    if (error instanceof Error) {
-        return error.message;
-    }
-    if (typeof error === 'string') {
-        return error;
-    }
-    return undefined;
-}
 function assertNever(input) {
     throw new Error(`Unexpected call to assertNever() with input: ${JSON.stringify(input, null /* replacer */, 4 /* tabSize */)}`);
 }

package/src/builders/browser/schema.json

@@ -133,8 +133,8 @@
     },
     "optimization": {
       "description": "Enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code elimination, inlining of critical CSS and fonts inlining. For more information, see https://angular.io/guide/workspace-config#optimization-configuration.",
-      "x-user-analytics": 16,
       "default": true,
+      "x-user-analytics": "ep.ng_optimization",
       "oneOf": [
         {
           "type": "object",
@@ -216,7 +216,7 @@
     "aot": {
       "type": "boolean",
       "description": "Build using Ahead of Time compilation.",
-      "x-user-analytics": 13,
+      "x-user-analytics": "ep.ng_aot",
       "default": true
     },
     "sourceMap": {

package/src/builders/browser-esbuild/compiler-plugin.d.ts

@@ -10,6 +10,7 @@ import ts from 'typescript';
 import { BundleStylesheetOptions } from './stylesheets';
 export declare class SourceFileCache extends Map<string, ts.SourceFile> {
     readonly modifiedFiles: Set<string>;
+    readonly babelFileCache: Map<string, Uint8Array>;
     invalidate(files: Iterable<string>): void;
 }
 export interface CompilerPluginOptions {