@angular/build 18.0.0-next.5 → 18.0.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/build",
-  "version": "18.0.0-next.5",
+  "version": "18.0.0-rc.1",
   "description": "Official build system for Angular",
   "keywords": [
     "Angular CLI",
@@ -23,10 +23,10 @@
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.3.0",
-    "@angular-devkit/architect": "0.1800.0-next.5",
-    "@babel/core": "7.24.4",
+    "@angular-devkit/architect": "0.1800.0-rc.1",
+    "@babel/core": "7.24.5",
     "@babel/helper-annotate-as-pure": "7.22.5",
-    "@babel/helper-split-export-declaration": "7.22.6",
+    "@babel/helper-split-export-declaration": "7.24.5",
     "@vitejs/plugin-basic-ssl": "1.1.0",
     "ansi-colors": "4.1.3",
     "browserslist": "^4.23.0",
@@ -34,7 +34,7 @@
     "esbuild": "0.20.2",
     "fast-glob": "3.3.2",
     "https-proxy-agent": "7.0.4",
-    "inquirer": "9.2.19",
+    "inquirer": "9.2.20",
     "magic-string": "0.30.10",
     "mrmime": "2.0.0",
     "ora": "5.4.1",
@@ -42,10 +42,10 @@
     "piscina": "4.4.0",
     "parse5-html-rewriting-stream": "7.0.0",
     "postcss": "8.4.38",
-    "sass": "1.75.0",
+    "sass": "1.76.0",
     "semver": "7.6.0",
-    "undici": "6.14.1",
-    "vite": "5.2.10",
+    "undici": "6.15.0",
+    "vite": "5.2.11",
     "watchpack": "2.4.1"
   },
   "peerDependencies": {
@@ -54,6 +54,7 @@
     "@angular/platform-server": "^18.0.0 || ^18.0.0-next.0",
     "@angular/service-worker": "^18.0.0 || ^18.0.0-next.0",
     "less": "^4.2.0",
+    "postcss": "^8.4.0",
     "tailwindcss": "^2.0.0 || ^3.0.0",
     "typescript": ">=5.4 <5.5"
   },
@@ -70,6 +71,9 @@
     "less": {
       "optional": true
     },
+    "postcss": {
+      "optional": true
+    },
     "tailwindcss": {
       "optional": true
     }

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

@@ -92,6 +92,10 @@ 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);
     }
+    // Watch input index HTML file if configured
+    if (options.indexHtmlOptions) {
+        executionResult.extraWatchFiles.push(options.indexHtmlOptions.input);
+    }
     // Perform i18n translation inlining if enabled
     if (i18nOptions.shouldInline) {
         const result = await (0, i18n_1.inlineI18n)(options, executionResult, initialFiles);

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

@@ -39,5 +39,5 @@ export declare function normalizeOptions(context: BuilderContext, projectName: s
     ssl: boolean | undefined;
     sslCert: string | undefined;
     sslKey: string | undefined;
-    prebundle: import("./schema").PrebundleUnion;
+    prebundle: import("./schema").PrebundleUnion | undefined;
 }>;

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

@@ -13,6 +13,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeOptions = void 0;
 const architect_1 = require("@angular-devkit/architect");
 const node_path_1 = __importDefault(require("node:path"));
+const utils_1 = require("../../utils");
 const normalize_cache_1 = require("../../utils/normalize-cache");
 /**
  * Normalize the user provided options by creating full paths for all path based options
@@ -25,13 +26,28 @@ const normalize_cache_1 = require("../../utils/normalize-cache");
  * @returns An object containing normalized options required to perform the build.
  */
 async function normalizeOptions(context, projectName, options) {
-    const workspaceRoot = context.workspaceRoot;
+    const { workspaceRoot, logger } = context;
     const projectMetadata = await context.getProjectMetadata(projectName);
     const projectRoot = node_path_1.default.join(workspaceRoot, projectMetadata.root ?? '');
     const cacheOptions = (0, normalize_cache_1.normalizeCacheOptions)(projectMetadata, workspaceRoot);
     // Target specifier defaults to the current project's build target using a development configuration
     const buildTargetSpecifier = options.buildTarget ?? `::development`;
     const buildTarget = (0, architect_1.targetFromTargetString)(buildTargetSpecifier, projectName, 'build');
+    // Get the application builder options.
+    const browserBuilderName = await context.getBuilderNameForTarget(buildTarget);
+    const rawBuildOptions = await context.getTargetOptions(buildTarget);
+    const buildOptions = (await context.validateOptions(rawBuildOptions, browserBuilderName));
+    const optimization = (0, utils_1.normalizeOptimization)(buildOptions.optimization);
+    if (options.prebundle) {
+        if (!cacheOptions.enabled) {
+            // Warn if the initial options provided by the user enable prebundling but caching is disabled
+            logger.warn('Prebundling has been configured but will not be used because caching has been disabled.');
+        }
+        else if (optimization.scripts) {
+            // Warn if the initial options provided by the user enable prebundling but script optimization is enabled.
+            logger.warn('Prebundling has been configured but will not be used because scripts optimization is enabled.');
+        }
+    }
     // Initial options to keep
     const { host, port, poll, open, verbose, watch, liveReload, hmr, headers, proxyConfig, servePath, ssl, sslCert, sslKey, prebundle, } = options;
     // Return all the normalized options
@@ -55,7 +71,7 @@ async function normalizeOptions(context, projectName, options) {
         sslCert,
         sslKey,
         // Prebundling defaults to true but requires caching to function
-        prebundle: cacheOptions.enabled && (prebundle ?? true),
+        prebundle: cacheOptions.enabled && !optimization.scripts && prebundle,
     };
 }
 exports.normalizeOptions = normalizeOptions;

package/src/builders/dev-server/schema.json

@@ -81,6 +81,7 @@
     },
     "prebundle": {
       "description": "Enable and control the Vite-based development server's prebundling capabilities. To enable prebundling, the Angular CLI cache must also be enabled.",
+      "default": true,
       "oneOf": [
         { "type": "boolean" },
         {

package/src/builders/extract-i18n/schema.d.ts

@@ -7,7 +7,7 @@ export interface Schema {
      * `project:target[:configuration]`. You can also pass in more than one configuration name
      * as a comma-separated list. Example: `project:target:production,staging`.
      */
-    buildTarget: string;
+    buildTarget?: string;
     /**
      * Output format for the generated file.
      */

package/src/builders/extract-i18n/schema.json

@@ -29,6 +29,5 @@
       "description": "Name of the file to output."
     }
   },
-  "additionalProperties": false,
-  "required": ["buildTarget"]
+  "additionalProperties": false
 }

package/src/private.d.ts

@@ -19,6 +19,9 @@ export { ExternalResultMetadata } from './tools/esbuild/bundler-execution-result
 export { emitFilesToDisk } from './tools/esbuild/utils';
 export { transformSupportedBrowsersToTargets } from './tools/esbuild/utils';
 export { SassWorkerImplementation } from './tools/sass/sass-service';
+export { SourceFileCache } from './tools/esbuild/angular/source-file-cache';
+export { createJitResourceTransformer } from './tools/esbuild/angular/jit-resource-transformer';
+export { JavaScriptTransformer } from './tools/esbuild/javascript-transformer';
 export * from './utils/bundle-calculator';
 export { checkPort } from './utils/check-port';
 export { deleteOutputDir } from './utils/delete-output-dir';

package/src/private.js

@@ -21,7 +21,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.assertCompatibleAngularVersion = exports.getSupportedBrowsers = exports.generateBuildStatsTable = exports.augmentAppWithServiceWorker = exports.purgeStaleBuildCache = exports.createTranslationLoader = exports.loadProxyConfiguration = exports.InlineCriticalCssProcessor = exports.IndexHtmlGenerator = exports.loadTranslations = exports.createI18nOptions = exports.deleteOutputDir = exports.checkPort = exports.SassWorkerImplementation = exports.transformSupportedBrowsersToTargets = exports.emitFilesToDisk = exports.serveWithVite = exports.buildApplicationInternal = void 0;
+exports.assertCompatibleAngularVersion = exports.getSupportedBrowsers = exports.generateBuildStatsTable = exports.augmentAppWithServiceWorker = exports.purgeStaleBuildCache = exports.createTranslationLoader = exports.loadProxyConfiguration = exports.InlineCriticalCssProcessor = exports.IndexHtmlGenerator = exports.loadTranslations = exports.createI18nOptions = exports.deleteOutputDir = exports.checkPort = exports.JavaScriptTransformer = exports.createJitResourceTransformer = exports.SourceFileCache = exports.SassWorkerImplementation = exports.transformSupportedBrowsersToTargets = exports.emitFilesToDisk = exports.serveWithVite = exports.buildApplicationInternal = void 0;
 /**
  * @fileoverview
  * Private exports intended only for use with the @angular-devkit/build-angular package.
@@ -41,6 +41,12 @@ var utils_2 = require("./tools/esbuild/utils");
 Object.defineProperty(exports, "transformSupportedBrowsersToTargets", { enumerable: true, get: function () { return utils_2.transformSupportedBrowsersToTargets; } });
 var sass_service_1 = require("./tools/sass/sass-service");
 Object.defineProperty(exports, "SassWorkerImplementation", { enumerable: true, get: function () { return sass_service_1.SassWorkerImplementation; } });
+var source_file_cache_1 = require("./tools/esbuild/angular/source-file-cache");
+Object.defineProperty(exports, "SourceFileCache", { enumerable: true, get: function () { return source_file_cache_1.SourceFileCache; } });
+var jit_resource_transformer_1 = require("./tools/esbuild/angular/jit-resource-transformer");
+Object.defineProperty(exports, "createJitResourceTransformer", { enumerable: true, get: function () { return jit_resource_transformer_1.createJitResourceTransformer; } });
+var javascript_transformer_1 = require("./tools/esbuild/javascript-transformer");
+Object.defineProperty(exports, "JavaScriptTransformer", { enumerable: true, get: function () { return javascript_transformer_1.JavaScriptTransformer; } });
 // Utilities
 __exportStar(require("./utils/bundle-calculator"), exports);
 var check_port_1 = require("./utils/check-port");

package/src/tools/esbuild/bundler-context.d.ts

@@ -28,6 +28,7 @@ export interface InitialFileRecord {
     type: 'script' | 'style';
     external?: boolean;
     serverFile: boolean;
+    depth: number;
 }
 export declare enum BuildOutputFileType {
     Browser = 1,

package/src/tools/esbuild/bundler-context.js

@@ -233,6 +233,7 @@ class BundlerContext {
                         type,
                         entrypoint: true,
                         serverFile: this.#platformIsServer,
+                        depth: 0,
                     };
                     if (!this.initialFilter || this.initialFilter(record)) {
                         initialFiles.set(relativeFilePath, record);
@@ -241,10 +242,17 @@ class BundlerContext {
             }
         }
         // Analyze for transitive initial files
-        const files = [...initialFiles.keys()];
-        for (const file of files) {
-            for (const initialImport of result.metafile.outputs[file].imports) {
-                if (initialFiles.has(initialImport.path)) {
+        const entriesToAnalyze = [...initialFiles];
+        let currentEntry;
+        while ((currentEntry = entriesToAnalyze.pop())) {
+            const [entryPath, entryRecord] = currentEntry;
+            for (const initialImport of result.metafile.outputs[entryPath].imports) {
+                const existingRecord = initialFiles.get(initialImport.path);
+                if (existingRecord) {
+                    // Store the smallest value depth
+                    if (existingRecord.depth > entryRecord.depth + 1) {
+                        existingRecord.depth = entryRecord.depth + 1;
+                    }
                     continue;
                 }
                 if (initialImport.kind === 'import-statement' || initialImport.kind === 'import-rule') {
@@ -253,12 +261,13 @@ class BundlerContext {
                         entrypoint: false,
                         external: initialImport.external,
                         serverFile: this.#platformIsServer,
+                        depth: entryRecord.depth + 1,
                     };
                     if (!this.initialFilter || this.initialFilter(record)) {
                         initialFiles.set(initialImport.path, record);
                     }
                     if (!initialImport.external) {
-                        files.push(initialImport.path);
+                        entriesToAnalyze.push([initialImport.path, record]);
                     }
                 }
             }

package/src/tools/esbuild/bundler-execution-result.d.ts

@@ -37,6 +37,7 @@ export declare class ExecutionResult {
     warnings: (Message | PartialMessage)[];
     logs: string[];
     externalMetadata?: ExternalResultMetadata;
+    extraWatchFiles: string[];
     constructor(rebuildContexts: BundlerContext[], codeBundleCache?: SourceFileCache | undefined);
     addOutputFile(path: string, content: string, type: BuildOutputFileType): void;
     addAssets(assets: BuildOutputAsset[]): void;

package/src/tools/esbuild/bundler-execution-result.js

@@ -23,6 +23,7 @@ class ExecutionResult {
     warnings = [];
     logs = [];
     externalMetadata;
+    extraWatchFiles = [];
     constructor(rebuildContexts, codeBundleCache) {
         this.rebuildContexts = rebuildContexts;
         this.codeBundleCache = codeBundleCache;
@@ -103,7 +104,7 @@ class ExecutionResult {
             // Load result caches internally normalize file dependencies
             files.push(...this.codeBundleCache.loadResultCache.watchFiles);
         }
-        return files;
+        return files.concat(this.extraWatchFiles);
     }
     createRebuildState(fileChanges) {
         this.codeBundleCache?.invalidate([...fileChanges.modified, ...fileChanges.removed]);

package/src/tools/esbuild/index-html-generator.js

@@ -15,6 +15,11 @@ const node_assert_1 = __importDefault(require("node:assert"));
 const node_path_1 = __importDefault(require("node:path"));
 const index_html_generator_1 = require("../../utils/index-file/index-html-generator");
 const bundler_context_1 = require("./bundler-context");
+/**
+ * The maximum number of module preload link elements that should be added for
+ * initial scripts.
+ */
+const MODULE_PRELOAD_MAX = 3;
 async function generateIndexHtml(initialFiles, outputFiles, buildOptions, lang) {
     // Analyze metafile for initial link-based hints.
     // Skip if the internal externalPackages option is enabled since this option requires
@@ -23,12 +28,18 @@ async function generateIndexHtml(initialFiles, outputFiles, buildOptions, lang)
     const { indexHtmlOptions, externalPackages, optimizationOptions, crossOrigin, subresourceIntegrity, baseHref, } = buildOptions;
     (0, node_assert_1.default)(indexHtmlOptions, 'indexHtmlOptions cannot be undefined.');
     if (!externalPackages && indexHtmlOptions.preloadInitial) {
+        let modulePreloadCount = 0;
         for (const [key, value] of initialFiles) {
             if (value.entrypoint || value.serverFile) {
                 // Entry points are already referenced in the HTML
                 continue;
             }
-            if (value.type === 'script') {
+            // Only add shallow preloads
+            if (value.depth > 1) {
+                continue;
+            }
+            if (value.type === 'script' && modulePreloadCount < MODULE_PRELOAD_MAX) {
+                modulePreloadCount++;
                 hints.push({ url: key, mode: 'modulepreload' });
             }
             else if (value.type === 'style') {

package/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js

@@ -61,7 +61,7 @@ const TAILWIND_KEYWORDS = [
 /**
  * Cached postcss instances that can be re-used between various StylesheetPluginFactory instances.
  */
-const postcssProcessor = new Map();
+const postcssProcessors = new Map();
 class StylesheetPluginFactory {
     options;
     cache;
@@ -88,7 +88,7 @@ class StylesheetPluginFactory {
             }
             if (options.postcssConfiguration) {
                 const postCssInstanceKey = JSON.stringify(options.postcssConfiguration);
-                this.postcssProcessor = postcssProcessor.get(postCssInstanceKey)?.deref();
+                this.postcssProcessor = postcssProcessors.get(postCssInstanceKey)?.deref();
                 if (!this.postcssProcessor) {
                     postcss ??= (await Promise.resolve().then(() => __importStar(require('postcss')))).default;
                     this.postcssProcessor = postcss();
@@ -99,18 +99,18 @@ class StylesheetPluginFactory {
                         }
                         this.postcssProcessor.use(plugin(pluginOptions));
                     }
-                    postcssProcessor.set(postCssInstanceKey, new WeakRef(this.postcssProcessor));
+                    postcssProcessors.set(postCssInstanceKey, new WeakRef(this.postcssProcessor));
                 }
             }
             else if (options.tailwindConfiguration) {
                 const { package: tailwindPackage, file: config } = options.tailwindConfiguration;
                 const postCssInstanceKey = tailwindPackage + ':' + config;
-                this.postcssProcessor = postcssProcessor.get(postCssInstanceKey)?.deref();
+                this.postcssProcessor = postcssProcessors.get(postCssInstanceKey)?.deref();
                 if (!this.postcssProcessor) {
                     postcss ??= (await Promise.resolve().then(() => __importStar(require('postcss')))).default;
                     const tailwind = await Promise.resolve(`${tailwindPackage}`).then(s => __importStar(require(s)));
                     this.postcssProcessor = postcss().use(tailwind.default({ config }));
-                    postcssProcessor.set(postCssInstanceKey, new WeakRef(this.postcssProcessor));
+                    postcssProcessors.set(postCssInstanceKey, new WeakRef(this.postcssProcessor));
                 }
             }
             return this.postcssProcessor;
@@ -119,7 +119,28 @@ class StylesheetPluginFactory {
             name: 'angular-' + language.name,
             async setup(build) {
                 // Setup postcss if needed
-                const postcssProcessor = await setupPostcss();
+                let postcssProcessor;
+                build.onStart(async () => {
+                    try {
+                        postcssProcessor = await setupPostcss();
+                    }
+                    catch {
+                        return {
+                            errors: [
+                                {
+                                    text: 'Unable to load the "postcss" stylesheet processor.',
+                                    location: null,
+                                    notes: [
+                                        {
+                                            text: 'Ensure that the "postcss" Node.js package is installed within the project. ' +
+                                                "If not present, installation via the project's package manager should resolve the error.",
+                                        },
+                                    ],
+                                },
+                            ],
+                        };
+                    }
+                });
                 // Add a load callback to support inline Component styles
                 build.onLoad({ filter: language.componentFilter, namespace: 'angular:styles/component' }, (0, load_result_cache_1.createCachedLoad)(cache, (args) => {
                     const data = options.inlineComponentData?.[args.path];

package/src/tools/sass/worker.js

@@ -38,14 +38,14 @@ node_worker_threads_1.parentPort.on('message', (message) => {
             // functions combined with the shared memory `importSignal` and the Node.js
             // `receiveMessageOnPort` function are used to ensure synchronous behavior.
             const proxyImporter = {
-                findFileUrl: (url, options) => {
+                findFileUrl: (url, { fromImport, containingUrl }) => {
                     Atomics.store(importerSignal, 0, 0);
                     workerImporterPort.postMessage({
                         id,
                         url,
                         options: {
-                            ...options,
-                            containingUrl: options.containingUrl ? (0, node_url_1.fileURLToPath)(options.containingUrl) : null,
+                            fromImport,
+                            containingUrl: containingUrl ? (0, node_url_1.fileURLToPath)(containingUrl) : null,
                         },
                     });
                     Atomics.wait(importerSignal, 0, 0);

package/src/utils/normalize-cache.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeCacheOptions = void 0;
 const node_path_1 = require("node:path");
 /** Version placeholder is replaced during the build process with actual package version */
-const VERSION = '18.0.0-next.5';
+const VERSION = '18.0.0-rc.1';
 function hasCacheMetadata(value) {
     return (!!value &&
         typeof value === 'object' &&

package/src/utils/server-rendering/render-page.js

@@ -68,22 +68,27 @@ async function renderPage({ route, serverContext, document, inlineCriticalCss, o
             },
         },
     ];
-    let html;
     (0, node_assert_1.default)(bootstrapAppFnOrModule, 'The file "./main.server.mjs" does not have a default export for an AppServerModule or a bootstrapping function.');
+    let renderAppPromise;
     if (isBootstrapFn(bootstrapAppFnOrModule)) {
-        html = await renderApplication(bootstrapAppFnOrModule, {
+        renderAppPromise = renderApplication(bootstrapAppFnOrModule, {
             document,
             url: route,
             platformProviders,
         });
     }
     else {
-        html = await renderModule(bootstrapAppFnOrModule, {
+        renderAppPromise = renderModule(bootstrapAppFnOrModule, {
             document,
             url: route,
             extraProviders: platformProviders,
         });
     }
+    // The below should really handled by the framework!!!.
+    // See: https://github.com/angular/angular/issues/51549
+    let timer;
+    const renderingTimeout = new Promise((_, reject) => (timer = setTimeout(() => reject(new Error(`Page ${new URL(route, 'resolve://').pathname} did not render in 30 seconds.`)), 30_000)));
+    const html = await Promise.race([renderAppPromise, renderingTimeout]).finally(() => clearTimeout(timer));
     if (inlineCriticalCss) {
         const { InlineCriticalCssProcessor } = await Promise.resolve().then(() => __importStar(require('../../utils/index-file/inline-critical-css')));
         const inlineCriticalCssProcessor = new InlineCriticalCssProcessor({