@angular-devkit/build-angular 17.0.0-rc.2 → 17.0.0-rc.4

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "17.0.0-rc.2",
+  "version": "17.0.0-rc.4",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.2.1",
-    "@angular-devkit/architect": "0.1700.0-rc.2",
-    "@angular-devkit/build-webpack": "0.1700.0-rc.2",
-    "@angular-devkit/core": "17.0.0-rc.2",
+    "@angular-devkit/architect": "0.1700.0-rc.4",
+    "@angular-devkit/build-webpack": "0.1700.0-rc.4",
+    "@angular-devkit/core": "17.0.0-rc.4",
     "@babel/core": "7.23.2",
     "@babel/generator": "7.23.0",
     "@babel/helper-annotate-as-pure": "7.22.5",
@@ -20,7 +20,7 @@
     "@babel/preset-env": "7.23.2",
     "@babel/runtime": "7.23.2",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "17.0.0-rc.2",
+    "@ngtools/webpack": "17.0.0-rc.4",
     "@vitejs/plugin-basic-ssl": "1.0.1",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.16",
@@ -49,7 +49,7 @@
     "open": "8.4.2",
     "ora": "5.4.1",
     "parse5-html-rewriting-stream": "7.0.0",
-    "picomatch": "2.3.1",
+    "picomatch": "3.0.1",
     "piscina": "4.1.0",
     "postcss": "8.4.31",
     "postcss-loader": "7.3.3",
@@ -60,10 +60,11 @@
     "semver": "7.5.4",
     "source-map-loader": "4.0.1",
     "source-map-support": "0.5.21",
-    "terser": "5.22.0",
+    "terser": "5.24.0",
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
     "tslib": "2.6.2",
+    "undici": "5.27.2",
     "vite": "4.5.0",
     "webpack": "5.89.0",
     "webpack-dev-middleware": "6.1.1",
@@ -128,7 +129,7 @@
     "url": "https://github.com/angular/angular-cli.git"
   },
   "engines": {
-    "node": ">=18.13.0",
+    "node": "^18.13.0 || >=20.9.0",
     "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
     "yarn": ">= 1.13.0"
   },

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

@@ -20,7 +20,7 @@ interface RenderRequest {
     /**
      * An optional URL path that represents the Angular route that should be rendered.
      */
-    url: string | undefined;
+    url: string;
 }
 /**
  * Renders an application based on a provided server bundle path, initial document, and optional URL route.

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

@@ -54,23 +54,30 @@ async function render({ serverBundlePath, document, url }) {
             useValue: 'app-shell',
         },
     ];
+    let renderAppPromise;
     // Render platform server module
     if (isBootstrapFn(bootstrapAppFn)) {
         (0, node_assert_1.default)(renderApplication, `renderApplication was not exported from: ${serverBundlePath}.`);
-        return renderApplication(bootstrapAppFn, {
+        renderAppPromise = renderApplication(bootstrapAppFn, {
             document,
             url,
             platformProviders,
         });
     }
-    (0, node_assert_1.default)(renderModule, `renderModule was not exported from: ${serverBundlePath}.`);
-    const moduleClass = bootstrapAppFn || AppServerModule;
-    (0, node_assert_1.default)(moduleClass, `Neither an AppServerModule nor a bootstrapping function was exported from: ${serverBundlePath}.`);
-    return renderModule(moduleClass, {
-        document,
-        url,
-        extraProviders: platformProviders,
-    });
+    else {
+        (0, node_assert_1.default)(renderModule, `renderModule was not exported from: ${serverBundlePath}.`);
+        const moduleClass = bootstrapAppFn || AppServerModule;
+        (0, node_assert_1.default)(moduleClass, `Neither an AppServerModule nor a bootstrapping function was exported from: ${serverBundlePath}.`);
+        renderAppPromise = renderModule(moduleClass, {
+            document,
+            url,
+            extraProviders: platformProviders,
+        });
+    }
+    // The below should really handled by the framework!!!.
+    let timer;
+    const renderingTimeout = new Promise((_, reject) => (timer = setTimeout(() => reject(new Error(`Page ${new URL(url, 'resolve://').pathname} did not render in 30 seconds.`)), 30000)));
+    return Promise.race([renderAppPromise, renderingTimeout]).finally(() => clearTimeout(timer));
 }
 function isBootstrapFn(value) {
     // We can differentiate between a module and a bootstrap function by reading compiler-generated `ɵmod` static property:

package/src/builders/application/build-action.js

@@ -38,6 +38,7 @@ const promises_1 = __importDefault(require("node:fs/promises"));
 const node_path_1 = __importDefault(require("node:path"));
 const sass_language_1 = require("../../tools/esbuild/stylesheets/sass-language");
 const utils_1 = require("../../tools/esbuild/utils");
+const environment_options_1 = require("../../utils/environment-options");
 const error_1 = require("../../utils/error");
 async function* runEsBuildBuildAction(action, options) {
     const { writeToFileSystemFilter, writeToFileSystem = true, watch, poll, logger, deleteOutputPath, cacheOptions, outputPath, verbose, projectRoot, workspaceRoot, progress, } = options;
@@ -95,8 +96,10 @@ async function* runEsBuildBuildAction(action, options) {
         });
         // Setup abort support
         options.signal?.addEventListener('abort', () => void watcher?.close());
-        // Temporarily watch the entire project
-        watcher.add(projectRoot);
+        // Watch the entire project root if 'NG_BUILD_WATCH_ROOT' environment variable is set
+        if (environment_options_1.shouldWatchRoot) {
+            watcher.add(projectRoot);
+        }
         // Watch workspace for package manager changes
         const packageWatchFiles = [
             // manifest can affect module resolution

package/src/builders/application/execute-build.js

@@ -19,6 +19,7 @@ const global_styles_1 = require("../../tools/esbuild/global-styles");
 const license_extractor_1 = require("../../tools/esbuild/license-extractor");
 const utils_1 = require("../../tools/esbuild/utils");
 const bundle_calculator_1 = require("../../utils/bundle-calculator");
+const color_1 = require("../../utils/color");
 const copy_assets_1 = require("../../utils/copy-assets");
 const supported_browsers_1 = require("../../utils/supported-browsers");
 const execute_post_bundle_1 = require("./execute-post-bundle");
@@ -58,7 +59,7 @@ async function executeBuild(options, context, rebuildState) {
         // Global Scripts
         if (options.globalScripts.length > 0) {
             for (const initial of [true, false]) {
-                const bundleOptions = (0, global_scripts_1.createGlobalScriptsBundleOptions)(options, initial);
+                const bundleOptions = (0, global_scripts_1.createGlobalScriptsBundleOptions)(options, target, initial);
                 if (bundleOptions) {
                     bundlerContexts.push(new bundler_context_1.BundlerContext(workspaceRoot, !!options.watch, bundleOptions, () => initial));
                 }
@@ -68,7 +69,12 @@ async function executeBuild(options, context, rebuildState) {
         if (serverEntryPoint && (prerenderOptions || appShellOptions || ssrOptions)) {
             const nodeTargets = [...target, ...(0, utils_1.getSupportedNodeTargets)()];
             // Server application code
-            bundlerContexts.push(new bundler_context_1.BundlerContext(workspaceRoot, !!options.watch, (0, application_code_bundle_1.createServerCodeBundleOptions)(options, nodeTargets, codeBundleCache), () => false));
+            bundlerContexts.push(new bundler_context_1.BundlerContext(workspaceRoot, !!options.watch, (0, application_code_bundle_1.createServerCodeBundleOptions)({
+                ...options,
+                // Disable external deps for server bundles.
+                // This is because it breaks Vite 'optimizeDeps' for SSR.
+                externalPackages: false,
+            }, nodeTargets, codeBundleCache), () => false));
             // Server polyfills code
             const serverPolyfillBundleOptions = (0, application_code_bundle_1.createServerPolyfillBundleOptions)(options, nodeTargets, codeBundleCache);
             if (serverPolyfillBundleOptions) {
@@ -87,11 +93,33 @@ async function executeBuild(options, context, rebuildState) {
     }
     // Analyze external imports if external options are enabled
     if (options.externalPackages || options.externalDependencies?.length) {
+        const { browser = new Set(), server = new Set() } = bundlingResult.externalImports;
         // TODO: Filter externalImports to generate second argument to support wildcard externalDependency values
-        executionResult.setExternalMetadata([...bundlingResult.externalImports], options.externalDependencies);
+        executionResult.setExternalMetadata([...browser], [...server], options.externalDependencies);
     }
     const { metafile, initialFiles, outputFiles } = bundlingResult;
     executionResult.outputFiles.push(...outputFiles);
+    const changedFiles = rebuildState && executionResult.findChangedFiles(rebuildState.previousOutputHashes);
+    // Analyze files for bundle budget failures if present
+    let budgetFailures;
+    if (options.budgets) {
+        const compatStats = (0, budget_stats_1.generateBudgetStats)(metafile, initialFiles);
+        budgetFailures = [...(0, bundle_calculator_1.checkBudgets)(options.budgets, compatStats, true)];
+        if (budgetFailures.length > 0) {
+            const errors = budgetFailures
+                .filter((failure) => failure.severity === 'error')
+                .map(({ message }) => message);
+            const warnings = budgetFailures
+                .filter((failure) => failure.severity !== 'error')
+                .map(({ message }) => message);
+            await printWarningsAndErrorsToConsoleAndAddToResult(context, executionResult, warnings, errors);
+        }
+    }
+    // Calculate estimated transfer size if scripts are optimized
+    let estimatedTransferSizes;
+    if (optimizationOptions.scripts || optimizationOptions.styles.minify) {
+        estimatedTransferSizes = await (0, utils_1.calculateEstimatedTransferSizes)(executionResult.outputFiles);
+    }
     // Check metafile for CommonJS module usage if optimizing scripts
     if (optimizationOptions.scripts) {
         const messages = (0, commonjs_checker_1.checkCommonJSModules)(metafile, options.allowedCommonJsDependencies);
@@ -107,25 +135,6 @@ async function executeBuild(options, context, rebuildState) {
     if (options.extractLicenses) {
         executionResult.addOutputFile('3rdpartylicenses.txt', await (0, license_extractor_1.extractLicenses)(metafile, workspaceRoot), bundler_context_1.BuildOutputFileType.Root);
     }
-    // Analyze files for bundle budget failures if present
-    let budgetFailures;
-    if (options.budgets) {
-        const compatStats = (0, budget_stats_1.generateBudgetStats)(metafile, initialFiles);
-        budgetFailures = [...(0, bundle_calculator_1.checkBudgets)(options.budgets, compatStats, true)];
-        for (const { severity, message } of budgetFailures) {
-            if (severity === 'error') {
-                context.logger.error(message);
-            }
-            else {
-                context.logger.warn(message);
-            }
-        }
-    }
-    // Calculate estimated transfer size if scripts are optimized
-    let estimatedTransferSizes;
-    if (optimizationOptions.scripts || optimizationOptions.styles.minify) {
-        estimatedTransferSizes = await (0, utils_1.calculateEstimatedTransferSizes)(executionResult.outputFiles);
-    }
     // Perform i18n translation inlining if enabled
     let prerenderedRoutes;
     let errors;
@@ -146,11 +155,19 @@ async function executeBuild(options, context, rebuildState) {
         executionResult.outputFiles.push(...result.additionalOutputFiles);
         executionResult.assetFiles.push(...result.additionalAssets);
     }
+    await printWarningsAndErrorsToConsoleAndAddToResult(context, executionResult, warnings, errors);
     if (prerenderOptions) {
         executionResult.addOutputFile('prerendered-routes.json', JSON.stringify({ routes: prerenderedRoutes.sort((a, b) => a.localeCompare(b)) }, null, 2), bundler_context_1.BuildOutputFileType.Root);
+        let prerenderMsg = `Prerendered ${prerenderedRoutes.length} static route`;
+        if (prerenderedRoutes.length > 1) {
+            prerenderMsg += 's.';
+        }
+        else {
+            prerenderMsg += '.';
+        }
+        context.logger.info(color_1.colors.magenta(prerenderMsg) + '\n');
     }
-    printWarningsAndErrorsToConsole(context, warnings, errors);
-    (0, utils_1.logBuildStats)(context, metafile, initialFiles, budgetFailures, estimatedTransferSizes);
+    (0, utils_1.logBuildStats)(context, metafile, initialFiles, budgetFailures, changedFiles, estimatedTransferSizes);
     // Write metafile if stats option is enabled
     if (options.stats) {
         executionResult.addOutputFile('stats.json', JSON.stringify(metafile, null, 2), bundler_context_1.BuildOutputFileType.Root);
@@ -158,11 +175,13 @@ async function executeBuild(options, context, rebuildState) {
     return executionResult;
 }
 exports.executeBuild = executeBuild;
-function printWarningsAndErrorsToConsole(context, warnings, errors) {
-    for (const error of errors) {
-        context.logger.error(error);
-    }
-    for (const warning of warnings) {
-        context.logger.warn(warning);
+async function printWarningsAndErrorsToConsoleAndAddToResult(context, executionResult, warnings, errors) {
+    const errorMessages = errors.map((text) => ({ text, location: null }));
+    if (errorMessages.length) {
+        executionResult.addErrors(errorMessages);
     }
+    await (0, utils_1.logMessages)(context, {
+        errors: errorMessages,
+        warnings: warnings.map((text) => ({ text, location: null })),
+    });
 }

package/src/builders/dev-server/builder.d.ts

@@ -5,8 +5,10 @@
  * 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
  */
+/// <reference types="node" />
 import type { BuilderContext } from '@angular-devkit/architect';
 import type { Plugin } from 'esbuild';
+import type http from 'node:http';
 import { Observable } from 'rxjs';
 import type { ExecutionTransformer } from '../../transforms';
 import type { IndexHtmlTransform } from '../../utils/index-file/index-html-generator';
@@ -14,10 +16,16 @@ import type { Schema as DevServerBuilderOptions } from './schema';
 import type { DevServerBuilderOutput } from './webpack-server';
 /**
  * A Builder that executes a development server based on the provided browser target option.
+ *
+ * Usage of the `transforms` and/or `extensions` parameters is NOT supported and may cause
+ * unexpected build output or build failures.
+ *
  * @param options Dev Server options.
  * @param context The build context.
  * @param transforms A map of transforms that can be used to hook into some logic (such as
  * transforming webpack configuration before passing it to webpack).
+ * @param extensions An optional object containing an array of build plugins (esbuild-based)
+ * and/or HTTP request middleware.
  *
  * @experimental Direct usage of this function is considered experimental.
  */
@@ -25,4 +33,7 @@ export declare function execute(options: DevServerBuilderOptions, context: Build
     webpackConfiguration?: ExecutionTransformer<import('webpack').Configuration>;
     logging?: import('@angular-devkit/build-webpack').WebpackLoggingCallback;
     indexHtml?: IndexHtmlTransform;
-}, plugins?: Plugin[]): Observable<DevServerBuilderOutput>;
+}, extensions?: {
+    buildPlugins?: Plugin[];
+    middleware?: ((req: http.IncomingMessage, res: http.ServerResponse, next: (err?: unknown) => void) => void)[];
+}): Observable<DevServerBuilderOutput>;

package/src/builders/dev-server/builder.js

@@ -37,14 +37,20 @@ const purge_cache_1 = require("../../utils/purge-cache");
 const options_1 = require("./options");
 /**
  * A Builder that executes a development server based on the provided browser target option.
+ *
+ * Usage of the `transforms` and/or `extensions` parameters is NOT supported and may cause
+ * unexpected build output or build failures.
+ *
  * @param options Dev Server options.
  * @param context The build context.
  * @param transforms A map of transforms that can be used to hook into some logic (such as
  * transforming webpack configuration before passing it to webpack).
+ * @param extensions An optional object containing an array of build plugins (esbuild-based)
+ * and/or HTTP request middleware.
  *
  * @experimental Direct usage of this function is considered experimental.
  */
-function execute(options, context, transforms = {}, plugins) {
+function execute(options, context, transforms = {}, extensions) {
     // Determine project name from builder context target
     const projectName = context.target?.project;
     if (!projectName) {
@@ -56,14 +62,17 @@ function execute(options, context, transforms = {}, plugins) {
         if (builderName === '@angular-devkit/build-angular:application' ||
             builderName === '@angular-devkit/build-angular:browser-esbuild' ||
             normalizedOptions.forceEsbuild) {
-            if (Object.keys(transforms).length > 0) {
+            if (transforms?.logging || transforms?.webpackConfiguration) {
                 throw new Error('The `application` and `browser-esbuild` builders do not support Webpack transforms.');
             }
-            return (0, rxjs_1.defer)(() => Promise.resolve().then(() => __importStar(require('./vite-server')))).pipe((0, rxjs_1.switchMap)(({ serveWithVite }) => serveWithVite(normalizedOptions, builderName, context, plugins)));
+            return (0, rxjs_1.defer)(() => Promise.resolve().then(() => __importStar(require('./vite-server')))).pipe((0, rxjs_1.switchMap)(({ serveWithVite }) => serveWithVite(normalizedOptions, builderName, context, transforms, extensions)));
         }
-        if (plugins?.length) {
+        if (extensions?.buildPlugins?.length) {
             throw new Error('Only the `application` and `browser-esbuild` builders support plugins.');
         }
+        if (extensions?.middleware?.length) {
+            throw new Error('Only the `application` and `browser-esbuild` builders support middleware.');
+        }
         // Use Webpack for all other browser targets
         return (0, rxjs_1.defer)(() => Promise.resolve().then(() => __importStar(require('./webpack-server')))).pipe((0, rxjs_1.switchMap)(({ serveWebpackBrowser }) => serveWebpackBrowser(normalizedOptions, builderName, context, transforms)));
     }));

package/src/builders/dev-server/vite-server.d.ts

@@ -7,7 +7,8 @@
  */
 import type { BuilderContext } from '@angular-devkit/architect';
 import type { Plugin } from 'esbuild';
-import type { InlineConfig } from 'vite';
+import type { Connect, InlineConfig } from 'vite';
+import { ExternalResultMetadata } from '../../tools/esbuild/bundler-execution-result';
 import { JavaScriptTransformer } from '../../tools/esbuild/javascript-transformer';
 import type { NormalizedDevServerOptions } from './options';
 import type { DevServerBuilderOutput } from './webpack-server';
@@ -18,9 +19,11 @@ interface OutputFileRecord {
     updated: boolean;
     servable: boolean;
 }
-export declare function serveWithVite(serverOptions: NormalizedDevServerOptions, builderName: string, context: BuilderContext, plugins?: Plugin[]): AsyncIterableIterator<DevServerBuilderOutput>;
-export declare function setupServer(serverOptions: NormalizedDevServerOptions, outputFiles: Map<string, OutputFileRecord>, assets: Map<string, string>, preserveSymlinks: boolean | undefined, externalMetadata: {
-    implicit: string[];
-    explicit: string[];
-}, ssr: boolean, prebundleTransformer: JavaScriptTransformer, target: string[]): Promise<InlineConfig>;
+export declare function serveWithVite(serverOptions: NormalizedDevServerOptions, builderName: string, context: BuilderContext, transformers?: {
+    indexHtml?: (content: string) => Promise<string>;
+}, extensions?: {
+    middleware?: Connect.NextHandleFunction[];
+    buildPlugins?: Plugin[];
+}): AsyncIterableIterator<DevServerBuilderOutput>;
+export declare function setupServer(serverOptions: NormalizedDevServerOptions, outputFiles: Map<string, OutputFileRecord>, assets: Map<string, string>, preserveSymlinks: boolean | undefined, externalMetadata: ExternalResultMetadata, ssr: boolean, prebundleTransformer: JavaScriptTransformer, target: string[], extensionMiddleware?: Connect.NextHandleFunction[], indexHtmlTransformer?: (content: string) => Promise<string>): Promise<InlineConfig>;
 export {};