@angular/build 18.0.0-rc.0 → 18.0.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/build",
-  "version": "18.0.0-rc.0",
+  "version": "18.0.0-rc.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.1800.0-rc.0",
+    "@angular-devkit/architect": "0.1800.0-rc.2",
     "@babel/core": "7.24.5",
     "@babel/helper-annotate-as-pure": "7.22.5",
     "@babel/helper-split-export-declaration": "7.24.5",
@@ -31,7 +31,7 @@
     "ansi-colors": "4.1.3",
     "browserslist": "^4.23.0",
     "critters": "0.0.22",
-    "esbuild": "0.20.2",
+    "esbuild": "0.21.1",
     "fast-glob": "3.3.2",
     "https-proxy-agent": "7.0.4",
     "inquirer": "9.2.20",
@@ -42,10 +42,10 @@
     "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.15.0",
-    "vite": "5.2.10",
+    "sass": "1.77.0",
+    "semver": "7.6.1",
+    "undici": "6.16.0",
+    "vite": "5.2.11",
     "watchpack": "2.4.1"
   },
   "peerDependencies": {

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/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/sass/rebasing-importer.js

@@ -15,6 +15,7 @@ const magic_string_1 = __importDefault(require("magic-string"));
 const node_fs_1 = require("node:fs");
 const node_path_1 = require("node:path");
 const node_url_1 = require("node:url");
+const error_1 = require("../../utils/error");
 const lexer_1 = require("./lexer");
 /**
  * Ensures that a bare specifier URL path that is intended to be treated as
@@ -195,8 +196,15 @@ class RelativeUrlRebasingImporter extends UrlRebasingImporter {
             try {
                 entries = (0, node_fs_1.readdirSync)(directory, { withFileTypes: true });
             }
-            catch {
-                return null;
+            catch (error) {
+                (0, error_1.assertIsError)(error);
+                // If the containing directory does not exist return null to indicate it cannot be resolved
+                if (error.code === 'ENOENT') {
+                    return null;
+                }
+                throw new Error(`Error reading directory ["${directory}"] while resolving Sass import`, {
+                    cause: error,
+                });
             }
             foundDefaults = [];
             foundImports = [];
@@ -205,7 +213,7 @@ class RelativeUrlRebasingImporter extends UrlRebasingImporter {
                 let isDirectory;
                 let isFile;
                 if (entry.isSymbolicLink()) {
-                    const stats = (0, node_fs_1.statSync)((0, node_path_1.join)(entry.path, entry.name));
+                    const stats = (0, node_fs_1.statSync)((0, node_path_1.join)(directory, entry.name));
                     isDirectory = stats.isDirectory();
                     isFile = stats.isFile();
                 }

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/format-bytes.js

@@ -13,8 +13,8 @@ function formatSize(size) {
         return '0 bytes';
     }
     const abbreviations = ['bytes', 'kB', 'MB', 'GB'];
-    const index = Math.floor(Math.log(size) / Math.log(1024));
-    const roundedSize = size / Math.pow(1024, index);
+    const index = Math.floor(Math.log(size) / Math.log(1000));
+    const roundedSize = size / Math.pow(1000, index);
     // bytes don't have a fraction
     const fractionDigits = index === 0 ? 0 : 2;
     return `${roundedSize.toFixed(fractionDigits)} ${abbreviations[index]}`;

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-rc.0';
+const VERSION = '18.0.0-rc.2';
 function hasCacheMetadata(value) {
     return (!!value &&
         typeof value === 'object' &&

package/src/utils/server-rendering/fetch-patch.js

@@ -36,7 +36,8 @@ function patchFetchToLoadInMemoryAssets() {
         else {
             return originalFetch(input, init);
         }
-        const { pathname, protocol } = url;
+        const { protocol } = url;
+        const pathname = decodeURIComponent(url.pathname);
         if (protocol !== RESOLVE_PROTOCOL || !assetFiles[pathname]) {
             // Only handle relative requests or files that are in assets.
             return originalFetch(input, init);

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({