@angular/build 18.0.0-next.4 → 18.0.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/build",
-  "version": "18.0.0-next.4",
+  "version": "18.0.0-rc.0",
   "description": "Official build system for Angular",
   "keywords": [
     "Angular CLI",
@@ -23,26 +23,28 @@
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.3.0",
-    "@angular-devkit/architect": "0.1800.0-next.4",
-    "@babel/core": "7.24.4",
+    "@angular-devkit/architect": "0.1800.0-rc.0",
+    "@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",
     "critters": "0.0.22",
     "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",
+    "picomatch": "4.0.2",
     "piscina": "4.4.0",
     "parse5-html-rewriting-stream": "7.0.0",
     "postcss": "8.4.38",
     "sass": "1.75.0",
     "semver": "7.6.0",
-    "undici": "6.14.1",
+    "undici": "6.15.0",
     "vite": "5.2.10",
     "watchpack": "2.4.1"
   },
@@ -52,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"
   },
@@ -68,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-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/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/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.4';
+const VERSION = '18.0.0-rc.0';
 function hasCacheMetadata(value) {
     return (!!value &&
         typeof value === 'object' &&

package/src/utils/version.js

@@ -47,7 +47,13 @@ function assertCompatibleAngularVersion(projectRoot) {
         // repository with the generated development @angular/core npm package which is versioned "0.0.0".
         return;
     }
-    const supportedAngularSemver = projectRequire('@angular-devkit/build-angular/package.json')['peerDependencies']['@angular/compiler-cli'];
+    let supportedAngularSemver;
+    try {
+        supportedAngularSemver = projectRequire('@angular/build/package.json')['peerDependencies']['@angular/compiler-cli'];
+    }
+    catch {
+        supportedAngularSemver = projectRequire('@angular-devkit/build-angular/package.json')['peerDependencies']['@angular/compiler-cli'];
+    }
     const angularVersion = new semver_1.SemVer(angularPkgJson['version']);
     if (!(0, semver_1.satisfies)(angularVersion, supportedAngularSemver, { includePrerelease: true })) {
         console.error(`This version of CLI is only compatible with Angular versions ${supportedAngularSemver},\n` +