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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/build",
-  "version": "18.0.0-rc.0",
+  "version": "18.0.0-rc.1",
   "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.1",
     "@babel/core": "7.24.5",
     "@babel/helper-annotate-as-pure": "7.22.5",
     "@babel/helper-split-export-declaration": "7.24.5",
@@ -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.15.0",
-    "vite": "5.2.10",
+    "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/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-rc.0';
+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({