@angular/build 19.0.0-next.0 → 19.0.0-next.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/build",
-  "version": "19.0.0-next.0",
+  "version": "19.0.0-next.2",
   "description": "Official build system for Angular",
   "keywords": [
     "Angular CLI",
@@ -23,7 +23,7 @@
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.3.0",
-    "@angular-devkit/architect": "0.1900.0-next.0",
+    "@angular-devkit/architect": "0.1900.0-next.2",
     "@babel/core": "7.25.2",
     "@babel/helper-annotate-as-pure": "7.24.7",
     "@babel/helper-split-export-declaration": "7.24.7",
@@ -32,20 +32,20 @@
     "@vitejs/plugin-basic-ssl": "1.1.0",
     "browserslist": "^4.23.0",
     "critters": "0.0.24",
-    "esbuild": "0.23.0",
+    "esbuild": "0.23.1",
     "fast-glob": "3.3.2",
     "https-proxy-agent": "7.0.5",
     "listr2": "8.2.4",
-    "lmdb": "3.0.13",
+    "lmdb": "3.0.14",
     "magic-string": "0.30.11",
     "mrmime": "2.0.0",
     "parse5-html-rewriting-stream": "7.0.0",
     "picomatch": "4.0.2",
     "piscina": "4.6.1",
-    "rollup": "4.20.0",
+    "rollup": "4.21.1",
     "sass": "1.77.8",
     "semver": "7.6.3",
-    "vite": "5.4.0",
+    "vite": "5.4.2",
     "watchpack": "2.4.2"
   },
   "peerDependencies": {
@@ -53,7 +53,7 @@
     "@angular/localize": "^19.0.0-next.0",
     "@angular/platform-server": "^19.0.0-next.0",
     "@angular/service-worker": "^19.0.0-next.0",
-    "@angular/ssr": "^19.0.0-next.0",
+    "@angular/ssr": "^19.0.0-next.2",
     "less": "^4.2.0",
     "postcss": "^8.4.0",
     "tailwindcss": "^2.0.0 || ^3.0.0",

package/src/builders/extract-i18n/application-extraction.js

@@ -11,6 +11,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.extractMessages = extractMessages;
+const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
 const application_1 = require("../application");
 const results_1 = require("../application/results");
@@ -72,6 +73,9 @@ function setupLocalizeExtractor(extractorConstructor, files, context) {
             if (file?.origin === 'memory') {
                 content = textDecoder.decode(file.contents);
             }
+            else if (file?.origin === 'disk') {
+                content = (0, node_fs_1.readFileSync)(file.inputPath, 'utf-8');
+            }
             if (content === undefined) {
                 throw new Error('Unknown file requested: ' + requestedPath);
             }

package/src/tools/angular/compilation/jit-compilation.js

@@ -13,6 +13,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.JitCompilation = void 0;
 const node_assert_1 = __importDefault(require("node:assert"));
 const typescript_1 = __importDefault(require("typescript"));
+const load_esm_1 = require("../../../utils/load-esm");
 const profiling_1 = require("../../esbuild/profiling");
 const angular_host_1 = require("../angular-host");
 const jit_resource_transformer_1 = require("../transformers/jit-resource-transformer");
@@ -36,7 +37,7 @@ class JitCompilation extends angular_compilation_1.AngularCompilation {
     #state;
     async initialize(tsconfig, hostOptions, compilerOptionsTransformer) {
         // Dynamically load the Angular compiler CLI package
-        const { constructorParametersDownlevelTransform } = await angular_compilation_1.AngularCompilation.loadCompilerCli();
+        const { constructorParametersDownlevelTransform } = await (0, load_esm_1.loadEsmModule)('@angular/compiler-cli/private/tooling');
         // Load the compiler configuration and transform as needed
         const { options: originalCompilerOptions, rootNames, errors: configurationDiagnostics, } = await this.loadConfiguration(tsconfig);
         const compilerOptions = compilerOptionsTransformer?.(originalCompilerOptions) ?? originalCompilerOptions;

package/src/tools/esbuild/angular/compiler-plugin.js

@@ -145,7 +145,9 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                             stylesheetResult = await stylesheetBundler.bundleFile(stylesheetFile);
                         }
                         else {
-                            stylesheetResult = await stylesheetBundler.bundleInline(data, containingFile, styleOptions.inlineStyleLanguage);
+                            stylesheetResult = await stylesheetBundler.bundleInline(data, containingFile, 
+                            // Inline stylesheets from a template style element are always CSS
+                            containingFile.endsWith('.html') ? 'css' : styleOptions.inlineStyleLanguage);
                         }
                         const { contents, outputFiles, metafile, referencedFiles, errors, warnings } = stylesheetResult;
                         if (errors) {

package/src/tools/esbuild/application-code-bundle.js

@@ -322,12 +322,10 @@ function getEsBuildCommonPolyfillsOptions(options, namespace, tryToResolvePolyfi
         namespace,
         cache: sourceFileCache?.loadResultCache,
         loadContent: async (_, build) => {
-            let hasLocalizePolyfill = false;
             let polyfillPaths = polyfills;
             let warnings;
             if (tryToResolvePolyfillsAsRelative) {
                 polyfillPaths = await Promise.all(polyfills.map(async (path) => {
-                    hasLocalizePolyfill ||= path.startsWith('@angular/localize');
                     if (path.startsWith('zone.js') || !(0, node_path_1.extname)(path)) {
                         return path;
                     }
@@ -339,29 +337,6 @@ function getEsBuildCommonPolyfillsOptions(options, namespace, tryToResolvePolyfi
                     return result.path ? potentialPathRelative : path;
                 }));
             }
-            else {
-                hasLocalizePolyfill = polyfills.some((p) => p.startsWith('@angular/localize'));
-            }
-            // Add localize polyfill if needed.
-            // TODO: remove in version 19 or later.
-            if (!i18nOptions.shouldInline && !hasLocalizePolyfill) {
-                const result = await build.resolve('@angular/localize', {
-                    kind: 'import-statement',
-                    resolveDir: workspaceRoot,
-                });
-                if (result.path) {
-                    polyfillPaths.push('@angular/localize/init');
-                    (warnings ??= []).push({
-                        text: 'Polyfill for "@angular/localize/init" was added automatically.',
-                        notes: [
-                            {
-                                text: 'In the future, this functionality will be removed. ' +
-                                    'Please add this polyfill in the "polyfills" section of your "angular.json" instead.',
-                            },
-                        ],
-                    });
-                }
-            }
             // Generate module contents with an import statement per defined polyfill
             let contents = polyfillPaths
                 .map((file) => `import '${file.replace(/\\/g, '/')}';`)

package/src/typings.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @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.dev/license
+ */
+
+// The `bundled_critters` causes issues with module mappings in Bazel,
+// leading to unexpected behavior with esbuild. Specifically, the problem occurs
+// when esbuild resolves to a different module or version than expected, due to
+// how Bazel handles module mappings.
+//
+// This change aims to resolve esbuild types correctly and maintain consistency
+// in the Bazel build process.
+
+declare module 'esbuild' {
+  export * from 'esbuild-wasm';
+}

package/src/utils/index-file/inline-critical-css.js

@@ -22,38 +22,53 @@ const MEDIA_SET_HANDLER_PATTERN = /^this\.media=["'](.*)["'];?$/;
  */
 const CSP_MEDIA_ATTR = 'ngCspMedia';
 /**
- * Script text used to change the media value of the link tags.
+ * Script that dynamically updates the `media` attribute of `<link>` tags based on a custom attribute (`CSP_MEDIA_ATTR`).
  *
  * NOTE:
  * We do not use `document.querySelectorAll('link').forEach((s) => s.addEventListener('load', ...)`
- * because this does not always fire on Chome.
+ * because load events are not always triggered reliably on Chrome.
  * See: https://github.com/angular/angular-cli/issues/26932 and https://crbug.com/1521256
+ *
+ * The script:
+ * - Ensures the event target is a `<link>` tag with the `CSP_MEDIA_ATTR` attribute.
+ * - Updates the `media` attribute with the value of `CSP_MEDIA_ATTR` and then removes the attribute.
+ * - Removes the event listener when all relevant `<link>` tags have been processed.
+ * - Uses event capturing (the `true` parameter) since load events do not bubble up the DOM.
  */
-const LINK_LOAD_SCRIPT_CONTENT = [
-    '(() => {',
-    `  const CSP_MEDIA_ATTR = '${CSP_MEDIA_ATTR}';`,
-    '  const documentElement = document.documentElement;',
-    '  const listener = (e) => {',
-    '    const target = e.target;',
-    `    if (!target || target.tagName !== 'LINK' || !target.hasAttribute(CSP_MEDIA_ATTR)) {`,
-    '     return;',
-    '    }',
-    '    target.media = target.getAttribute(CSP_MEDIA_ATTR);',
-    '    target.removeAttribute(CSP_MEDIA_ATTR);',
-    // Remove onload listener when there are no longer styles that need to be loaded.
-    '    if (!document.head.querySelector(`link[${CSP_MEDIA_ATTR}]`)) {',
-    `      documentElement.removeEventListener('load', listener);`,
-    '    }',
-    '  };',
-    //  We use an event with capturing (the true parameter) because load events don't bubble.
-    `  documentElement.addEventListener('load', listener, true);`,
-    '})();',
-].join('\n');
-class CrittersExtended extends critters_1.default {
+const LINK_LOAD_SCRIPT_CONTENT = `
+(() => {
+  const CSP_MEDIA_ATTR = '${CSP_MEDIA_ATTR}';
+  const documentElement = document.documentElement;
+
+  // Listener for load events on link tags.
+  const listener = (e) => {
+    const target = e.target;
+    if (
+      !target ||
+      target.tagName !== 'LINK' ||
+      !target.hasAttribute(CSP_MEDIA_ATTR)
+    ) {
+      return;
+    }
+
+    target.media = target.getAttribute(CSP_MEDIA_ATTR);
+    target.removeAttribute(CSP_MEDIA_ATTR);
+
+    if (!document.head.querySelector(\`link[\${CSP_MEDIA_ATTR}]\`)) {
+      documentElement.removeEventListener('load', listener);
+    }
+  };
+
+  documentElement.addEventListener('load', listener, true);
+})();
+`.trim();
+class CrittersBase extends critters_1.default {
+}
+/* eslint-enable @typescript-eslint/no-unsafe-declaration-merging */
+class CrittersExtended extends CrittersBase {
     optionsExtended;
     warnings = [];
     errors = [];
-    initialEmbedLinkedStylesheet;
     addedCspScriptsDocuments = new WeakSet();
     documentNonces = new WeakMap();
     constructor(optionsExtended) {
@@ -71,17 +86,12 @@ class CrittersExtended extends critters_1.default {
             reduceInlineStyles: false,
             mergeStylesheets: false,
             // Note: if `preload` changes to anything other than `media`, the logic in
-            // `embedLinkedStylesheetOverride` will have to be updated.
+            // `embedLinkedStylesheet` will have to be updated.
             preload: 'media',
             noscriptFallback: true,
             inlineFonts: true,
         });
         this.optionsExtended = optionsExtended;
-        // We can't use inheritance to override `embedLinkedStylesheet`, because it's not declared in
-        // the `Critters` .d.ts which means that we can't call the `super` implementation. TS doesn't
-        // allow for `super` to be cast to a different type.
-        this.initialEmbedLinkedStylesheet = this.embedLinkedStylesheet;
-        this.embedLinkedStylesheet = this.embedLinkedStylesheetOverride;
     }
     readFile(path) {
         const readAsset = this.optionsExtended.readAsset;
@@ -91,7 +101,7 @@ class CrittersExtended extends critters_1.default {
      * Override of the Critters `embedLinkedStylesheet` method
      * that makes it work with Angular's CSP APIs.
      */
-    embedLinkedStylesheetOverride = async (link, document) => {
+    async embedLinkedStylesheet(link, document) {
         if (link.getAttribute('media') === 'print' && link.next?.name === 'noscript') {
             // Workaround for https://github.com/GoogleChromeLabs/critters/issues/64
             // NB: this is only needed for the webpack based builders.
@@ -102,7 +112,7 @@ class CrittersExtended extends critters_1.default {
                 link?.next?.remove();
             }
         }
-        const returnValue = await this.initialEmbedLinkedStylesheet(link, document);
+        const returnValue = await super.embedLinkedStylesheet(link, document);
         const cspNonce = this.findCspNonce(document);
         if (cspNonce) {
             const crittersMedia = link.getAttribute('onload')?.match(MEDIA_SET_HANDLER_PATTERN);
@@ -126,7 +136,7 @@ class CrittersExtended extends critters_1.default {
             });
         }
         return returnValue;
-    };
+    }
     /**
      * Finds the CSP nonce for a specific document.
      */

package/src/utils/normalize-cache.js

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

package/src/utils/server-rendering/prerender.js

@@ -49,11 +49,14 @@ async function prerenderPages(workspaceRoot, appShellOptions = {}, prerenderOpti
         assetsReversed[addLeadingSlash(destination.replace(/\\/g, node_path_1.posix.sep))] = source;
     }
     // Get routes to prerender
-    const { routes: allRoutes, warnings: routesWarnings } = await getAllRoutes(workspaceRoot, outputFilesForWorker, assetsReversed, document, appShellOptions, prerenderOptions, sourcemap, verbose);
+    const { routes: allRoutes, warnings: routesWarnings, errors: routesErrors, } = await getAllRoutes(workspaceRoot, outputFilesForWorker, assetsReversed, document, appShellOptions, prerenderOptions, sourcemap, verbose);
+    if (routesErrors?.length) {
+        errors.push(...routesErrors);
+    }
     if (routesWarnings?.length) {
         warnings.push(...routesWarnings);
     }
-    if (allRoutes.size < 1) {
+    if (allRoutes.size < 1 || errors.length > 0) {
         return {
             errors,
             warnings,
@@ -109,7 +112,8 @@ async function renderPages(sourcemap, allRoutes, maxThreads, workspaceRoot, outp
             const isAppShellRoute = appShellRoute === route;
             const serverContext = isAppShellRoute ? 'app-shell' : 'ssg';
             const render = renderWorker.run({ route, serverContext });
-            const renderResult = render.then(({ content, warnings, errors }) => {
+            const renderResult = render
+                .then(({ content, warnings, errors }) => {
                 if (content !== undefined) {
                     const outPath = isAppShellRoute
                         ? 'index.html'
@@ -122,6 +126,10 @@ async function renderPages(sourcemap, allRoutes, maxThreads, workspaceRoot, outp
                 if (errors) {
                     errors.push(...errors);
                 }
+            })
+                .catch((err) => {
+                errors.push(`An error occurred while prerendering route '${route}'.\n\n${err.stack}`);
+                void renderWorker.destroy();
             });
             renderingPromises.push(renderResult);
         }
@@ -173,15 +181,19 @@ async function getAllRoutes(workspaceRoot, outputFilesForWorker, assetFilesForWo
         execArgv: workerExecArgv,
         recordTiming: false,
     });
+    const errors = [];
     const { routes: extractedRoutes, warnings } = await renderWorker
         .run({})
+        .catch((err) => {
+        errors.push(`An error occurred while extracting routes.\n\n${err.stack}`);
+    })
         .finally(() => {
         void renderWorker.destroy();
     });
     for (const route of extractedRoutes) {
         routes.add(route);
     }
-    return { routes, warnings };
+    return { routes, warnings, errors };
 }
 function addLeadingSlash(value) {
     return value.charAt(0) === '/' ? value : '/' + value;