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

package/src/tools/vite/utils.js

@@ -9,8 +9,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.pathnameWithoutBasePath = pathnameWithoutBasePath;
 exports.lookupMimeTypeFromRequest = lookupMimeTypeFromRequest;
+exports.getDepOptimizationConfig = getDepOptimizationConfig;
 const mrmime_1 = require("mrmime");
 const node_path_1 = require("node:path");
+const utils_1 = require("../esbuild/utils");
 function pathnameWithoutBasePath(url, basePath) {
     const parsedUrl = new URL(url, 'http://localhost');
     const pathname = decodeURIComponent(parsedUrl.pathname);
@@ -26,3 +28,38 @@ function lookupMimeTypeFromRequest(url) {
     }
     return extension && (0, mrmime_1.lookup)(extension);
 }
+function getDepOptimizationConfig({ disabled, exclude, include, target, zoneless, prebundleTransformer, ssr, loader, thirdPartySourcemaps, }) {
+    const plugins = [
+        {
+            name: `angular-vite-optimize-deps${ssr ? '-ssr' : ''}${thirdPartySourcemaps ? '-vendor-sourcemap' : ''}`,
+            setup(build) {
+                build.onLoad({ filter: /\.[cm]?js$/ }, async (args) => {
+                    return {
+                        contents: await prebundleTransformer.transformFile(args.path),
+                        loader: 'js',
+                    };
+                });
+            },
+        },
+    ];
+    return {
+        // Exclude any explicitly defined dependencies (currently build defined externals)
+        exclude,
+        // NB: to disable the deps optimizer, set optimizeDeps.noDiscovery to true and optimizeDeps.include as undefined.
+        // Include all implict dependencies from the external packages internal option
+        include: disabled ? undefined : include,
+        noDiscovery: disabled,
+        // Add an esbuild plugin to run the Angular linker on dependencies
+        esbuildOptions: {
+            // Set esbuild supported targets.
+            target,
+            supported: (0, utils_1.getFeatureSupport)(target, zoneless),
+            plugins,
+            loader,
+            define: {
+                'ngServerMode': `${ssr}`,
+            },
+            resolveExtensions: ['.mjs', '.js', '.cjs'],
+        },
+    };
+}

package/src/utils/environment-options.js

@@ -85,6 +85,6 @@ exports.shouldOptimizeChunks = isPresent(optimizeChunksVariable) && isEnabled(op
 const hmrComponentStylesVariable = process.env['NG_HMR_CSTYLES'];
 exports.useComponentStyleHmr = !isPresent(hmrComponentStylesVariable) || !isDisabled(hmrComponentStylesVariable);
 const hmrComponentTemplateVariable = process.env['NG_HMR_TEMPLATES'];
-exports.useComponentTemplateHmr = isPresent(hmrComponentTemplateVariable) && isEnabled(hmrComponentTemplateVariable);
+exports.useComponentTemplateHmr = !isPresent(hmrComponentTemplateVariable) || !isDisabled(hmrComponentTemplateVariable);
 const partialSsrBuildVariable = process.env['NG_BUILD_PARTIAL_SSR'];
 exports.usePartialSsrBuild = isPresent(partialSsrBuildVariable) && isEnabled(partialSsrBuildVariable);

package/src/utils/i18n-options.d.ts

@@ -15,6 +15,7 @@ export interface LocaleDescription {
     translation?: Record<string, unknown>;
     dataPath?: string;
     baseHref?: string;
+    subPath: string;
 }
 export interface I18nOptions {
     inlineLocales: Set<string>;
@@ -26,7 +27,9 @@ export interface I18nOptions {
 }
 export declare function createI18nOptions(projectMetadata: {
     i18n?: unknown;
-}, inline?: boolean | string[]): I18nOptions;
+}, inline?: boolean | string[], logger?: {
+    warn(message: string): void;
+}): I18nOptions;
 export declare function loadTranslations(locale: string, desc: LocaleDescription, workspaceRoot: string, loader: TranslationLoader, logger: {
     warn: (message: string) => void;
     error: (message: string) => void;

package/src/utils/i18n-options.js

@@ -31,15 +31,21 @@ function normalizeTranslationFileOption(option, locale, expectObjectInError) {
 }
 function ensureObject(value, name) {
     if (!value || typeof value !== 'object' || Array.isArray(value)) {
-        throw new Error(`Project ${name} field is malformed. Expected an object.`);
+        throw new Error(`Project field '${name}' is malformed. Expected an object.`);
     }
 }
 function ensureString(value, name) {
     if (typeof value !== 'string') {
-        throw new Error(`Project ${name} field is malformed. Expected a string.`);
+        throw new Error(`Project field '${name}' is malformed. Expected a string.`);
     }
 }
-function createI18nOptions(projectMetadata, inline) {
+function ensureValidsubPath(value, name) {
+    ensureString(value, name);
+    if (!/^[\w-]*$/.test(value)) {
+        throw new Error(`Project field '${name}' is invalid. It can only contain letters, numbers, hyphens, and underscores.`);
+    }
+}
+function createI18nOptions(projectMetadata, inline, logger) {
     const { i18n: metadata = {} } = projectMetadata;
     ensureObject(metadata, 'i18n');
     const i18n = {
@@ -53,19 +59,31 @@ function createI18nOptions(projectMetadata, inline) {
     };
     let rawSourceLocale;
     let rawSourceLocaleBaseHref;
+    let rawsubPath;
     if (typeof metadata.sourceLocale === 'string') {
         rawSourceLocale = metadata.sourceLocale;
     }
     else if (metadata.sourceLocale !== undefined) {
-        ensureObject(metadata.sourceLocale, 'i18n sourceLocale');
+        ensureObject(metadata.sourceLocale, 'i18n.sourceLocale');
         if (metadata.sourceLocale.code !== undefined) {
-            ensureString(metadata.sourceLocale.code, 'i18n sourceLocale code');
+            ensureString(metadata.sourceLocale.code, 'i18n.sourceLocale.code');
             rawSourceLocale = metadata.sourceLocale.code;
         }
         if (metadata.sourceLocale.baseHref !== undefined) {
-            ensureString(metadata.sourceLocale.baseHref, 'i18n sourceLocale baseHref');
+            ensureString(metadata.sourceLocale.baseHref, 'i18n.sourceLocale.baseHref');
+            logger?.warn(`The 'baseHref' field under 'i18n.sourceLocale' is deprecated and will be removed in future versions. ` +
+                `Please use 'subPath' instead.\nNote: 'subPath' defines the URL segment for the locale, acting ` +
+                `as both the HTML base HREF and the directory name for output.\nBy default, ` +
+                `if not specified, 'subPath' uses the locale code.`);
             rawSourceLocaleBaseHref = metadata.sourceLocale.baseHref;
         }
+        if (metadata.sourceLocale.subPath !== undefined) {
+            ensureValidsubPath(metadata.sourceLocale.subPath, 'i18n.sourceLocale.subPath');
+            rawsubPath = metadata.sourceLocale.subPath;
+        }
+        if (rawsubPath !== undefined && rawSourceLocaleBaseHref !== undefined) {
+            throw new Error(`'i18n.sourceLocale.subPath' and 'i18n.sourceLocale.baseHref' cannot be used together.`);
+        }
     }
     if (rawSourceLocale !== undefined) {
         i18n.sourceLocale = rawSourceLocale;
@@ -74,18 +92,31 @@ function createI18nOptions(projectMetadata, inline) {
     i18n.locales[i18n.sourceLocale] = {
         files: [],
         baseHref: rawSourceLocaleBaseHref,
+        subPath: rawsubPath ?? i18n.sourceLocale,
     };
     if (metadata.locales !== undefined) {
         ensureObject(metadata.locales, 'i18n locales');
         for (const [locale, options] of Object.entries(metadata.locales)) {
             let translationFiles;
             let baseHref;
+            let subPath;
             if (options && typeof options === 'object' && 'translation' in options) {
                 translationFiles = normalizeTranslationFileOption(options.translation, locale, false);
                 if ('baseHref' in options) {
-                    ensureString(options.baseHref, `i18n locales ${locale} baseHref`);
+                    ensureString(options.baseHref, `i18n.locales.${locale}.baseHref`);
+                    logger?.warn(`The 'baseHref' field under 'i18n.locales.${locale}' is deprecated and will be removed in future versions. ` +
+                        `Please use 'subPath' instead.\nNote: 'subPath' defines the URL segment for the locale, acting ` +
+                        `as both the HTML base HREF and the directory name for output.\nBy default, ` +
+                        `if not specified, 'subPath' uses the locale code.`);
                     baseHref = options.baseHref;
                 }
+                if ('subPath' in options) {
+                    ensureString(options.subPath, `i18n.locales.${locale}.subPath`);
+                    subPath = options.subPath;
+                }
+                if (subPath !== undefined && baseHref !== undefined) {
+                    throw new Error(`'i18n.locales.${locale}.subPath' and 'i18n.locales.${locale}.baseHref' cannot be used together.`);
+                }
             }
             else {
                 translationFiles = normalizeTranslationFileOption(options, locale, true);
@@ -96,9 +127,21 @@ function createI18nOptions(projectMetadata, inline) {
             i18n.locales[locale] = {
                 files: translationFiles.map((file) => ({ path: file })),
                 baseHref,
+                subPath: subPath ?? locale,
             };
         }
     }
+    // Check that subPaths are unique.
+    const localesData = Object.entries(i18n.locales);
+    for (let i = 0; i < localesData.length; i++) {
+        const [localeA, { subPath: subPathA }] = localesData[i];
+        for (let j = i + 1; j < localesData.length; j++) {
+            const [localeB, { subPath: subPathB }] = localesData[j];
+            if (subPathA === subPathB) {
+                throw new Error(`Invalid i18n configuration: Locales '${localeA}' and '${localeB}' cannot have the same subPath: '${subPathB}'.`);
+            }
+        }
+    }
     if (inline === true) {
         i18n.inlineLocales.add(i18n.sourceLocale);
         Object.keys(i18n.locales).forEach((locale) => i18n.inlineLocales.add(locale));

package/src/utils/index-file/auto-csp.js

@@ -107,7 +107,7 @@ async function autoCsp(html, unsafeEval = false) {
      * loader script to the collection of hashes to add to the <meta> tag CSP.
      */
     function emitLoaderScript() {
-        const loaderScript = createLoaderScript(scriptContent);
+        const loaderScript = createLoaderScript(scriptContent, /* enableTrustedTypes = */ false);
         hashes.push(hashTextContent(loaderScript));
         rewriter.emitRaw(`<script>${loaderScript}</script>`);
         scriptContent = [];
@@ -161,7 +161,7 @@ async function autoCsp(html, unsafeEval = false) {
                 return;
             }
         }
-        if (tag.tagName === 'body' || tag.tagName === 'html') {
+        if (tag.tagName === 'head' || tag.tagName === 'body' || tag.tagName === 'html') {
             // Write the loader script if a string of <script>s were the last opening tag of the document.
             if (scriptContent.length > 0) {
                 emitLoaderScript();
@@ -259,7 +259,7 @@ function createLoaderScript(srcList, enableTrustedTypes = false) {
         // URI encoding means value can't escape string, JS, or HTML context.
         const srcAttr = encodeURI(s.src).replaceAll("'", "\\'");
         // Can only be 'module' or a JS MIME type or an empty string.
-        const typeAttr = s.type ? "'" + s.type + "'" : undefined;
+        const typeAttr = s.type ? "'" + s.type + "'" : "''";
         const asyncAttr = s.async ? 'true' : 'false';
         const deferAttr = s.defer ? 'true' : 'false';
         return `['${srcAttr}', ${typeAttr}, ${asyncAttr}, ${deferAttr}]`;
@@ -278,7 +278,7 @@ function createLoaderScript(srcList, enableTrustedTypes = false) {
     s.type = scriptUrl[1];
     s.async = !!scriptUrl[2];
     s.defer = !!scriptUrl[3];
-    document.body.appendChild(s);
+    document.lastElementChild.appendChild(s);
   });\n`
         : `
   var scripts = [${srcListFormatted}];
@@ -288,6 +288,6 @@ function createLoaderScript(srcList, enableTrustedTypes = false) {
     s.type = scriptUrl[1];
     s.async = !!scriptUrl[2];
     s.defer = !!scriptUrl[3];
-    document.body.appendChild(s);
+    document.lastElementChild.appendChild(s);
   });\n`;
 }

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

package/src/utils/server-rendering/esm-in-memory-loader/loader-hooks.js

@@ -19,6 +19,10 @@ const node_path_1 = require("node:path");
 const node_url_1 = require("node:url");
 const url_1 = require("url");
 const javascript_transformer_1 = require("../../../tools/esbuild/javascript-transformer");
+/**
+ * @note For some unknown reason, setting `globalThis.ngServerMode = true` does not work when using ESM loader hooks.
+ */
+const NG_SERVER_MODE_INIT_BYTES = new TextEncoder().encode('var ngServerMode=true;');
 /**
  * Node.js ESM loader to redirect imports to in memory files.
  * @see: https://nodejs.org/api/esm.html#loaders for more information about loaders.
@@ -107,7 +111,11 @@ async function load(url, context, nextLoad) {
     // need linking are ESM only.
     if (format === 'module' && isFileProtocol(url)) {
         const filePath = (0, url_1.fileURLToPath)(url);
-        const source = await javascriptTransformer.transformFile(filePath);
+        let source = await javascriptTransformer.transformFile(filePath);
+        if (filePath.includes('@angular/')) {
+            // Prepend 'var ngServerMode=true;' to the source.
+            source = Buffer.concat([NG_SERVER_MODE_INIT_BYTES, source]);
+        }
         return {
             format,
             shortCircuit: true,

package/src/utils/server-rendering/manifest.d.ts

@@ -5,6 +5,7 @@
  * 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
  */
+import type { Metafile } from 'esbuild';
 import { NormalizedApplicationBuildOptions } from '../../builders/application/options';
 import { type BuildOutputFile } from '../../tools/esbuild/bundler-context';
 export declare const SERVER_APP_MANIFEST_FILENAME = "angular-app-manifest.mjs";
@@ -42,12 +43,15 @@ export declare function generateAngularServerAppEngineManifest(i18nOptions: Norm
  * the application, helping with localization and rendering content specific to the locale.
  * @param baseHref - The base HREF for the application. This is used to set the base URL
  * for all relative URLs in the application.
+ * @param initialFiles - A list of initial files that preload tags have already been added for.
+ * @param metafile - An esbuild metafile object.
+ * @param publicPath - The configured public path.
  *
  * @returns An object containing:
  * - `manifestContent`: A string of the SSR manifest content.
  * - `serverAssetsChunks`: An array of build output files containing the generated assets for the server.
  */
-export declare function generateAngularServerAppManifest(additionalHtmlOutputFiles: Map<string, BuildOutputFile>, outputFiles: BuildOutputFile[], inlineCriticalCss: boolean, routes: readonly unknown[] | undefined, locale: string | undefined, baseHref: string): {
+export declare function generateAngularServerAppManifest(additionalHtmlOutputFiles: Map<string, BuildOutputFile>, outputFiles: BuildOutputFile[], inlineCriticalCss: boolean, routes: readonly unknown[] | undefined, locale: string | undefined, baseHref: string, initialFiles: Set<string>, metafile: Metafile, publicPath: string | undefined): {
     manifestContent: string;
     serverAssetsChunks: BuildOutputFile[];
 };

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

@@ -11,9 +11,9 @@ exports.SERVER_APP_ENGINE_MANIFEST_FILENAME = exports.SERVER_APP_MANIFEST_FILENA
 exports.generateAngularServerAppEngineManifest = generateAngularServerAppEngineManifest;
 exports.generateAngularServerAppManifest = generateAngularServerAppManifest;
 const node_path_1 = require("node:path");
-const options_1 = require("../../builders/application/options");
 const bundler_context_1 = require("../../tools/esbuild/bundler-context");
 const utils_1 = require("../../tools/esbuild/utils");
+const environment_options_1 = require("../environment-options");
 exports.SERVER_APP_MANIFEST_FILENAME = 'angular-app-manifest.mjs';
 exports.SERVER_APP_ENGINE_MANIFEST_FILENAME = 'angular-app-engine-manifest.mjs';
 const MAIN_SERVER_OUTPUT_FILENAME = 'main.server.mjs';
@@ -49,23 +49,28 @@ function escapeUnsafeChars(str) {
  */
 function generateAngularServerAppEngineManifest(i18nOptions, baseHref) {
     const entryPoints = {};
-    if (i18nOptions.shouldInline) {
+    const supportedLocales = {};
+    if (i18nOptions.shouldInline && !i18nOptions.flatOutput) {
         for (const locale of i18nOptions.inlineLocales) {
-            const importPath = './' + (i18nOptions.flatOutput ? '' : locale + '/') + MAIN_SERVER_OUTPUT_FILENAME;
-            let localeWithBaseHref = (0, options_1.getLocaleBaseHref)('', i18nOptions, locale) || '/';
-            // Remove leading and trailing slashes.
-            const start = localeWithBaseHref[0] === '/' ? 1 : 0;
-            const end = localeWithBaseHref[localeWithBaseHref.length - 1] === '/' ? -1 : undefined;
-            localeWithBaseHref = localeWithBaseHref.slice(start, end);
-            entryPoints[localeWithBaseHref] = `() => import('${importPath}')`;
+            const { subPath } = i18nOptions.locales[locale];
+            const importPath = `${subPath ? `${subPath}/` : ''}${MAIN_SERVER_OUTPUT_FILENAME}`;
+            entryPoints[subPath] = `() => import('./${importPath}')`;
+            supportedLocales[locale] = subPath;
         }
     }
     else {
         entryPoints[''] = `() => import('./${MAIN_SERVER_OUTPUT_FILENAME}')`;
+        supportedLocales[i18nOptions.sourceLocale] = '';
+    }
+    // Remove trailing slash but retain leading slash.
+    let basePath = baseHref || '/';
+    if (basePath.length > 1 && basePath[basePath.length - 1] === '/') {
+        basePath = basePath.slice(0, -1);
     }
     const manifestContent = `
 export default {
-  basePath: '${baseHref ?? '/'}',
+  basePath: '${basePath}',
+  supportedLocales: ${JSON.stringify(supportedLocales, undefined, 2)},
   entryPoints: {
     ${Object.entries(entryPoints)
         .map(([key, value]) => `'${key}': ${value}`)
@@ -95,12 +100,15 @@ export default {
  * the application, helping with localization and rendering content specific to the locale.
  * @param baseHref - The base HREF for the application. This is used to set the base URL
  * for all relative URLs in the application.
+ * @param initialFiles - A list of initial files that preload tags have already been added for.
+ * @param metafile - An esbuild metafile object.
+ * @param publicPath - The configured public path.
  *
  * @returns An object containing:
  * - `manifestContent`: A string of the SSR manifest content.
  * - `serverAssetsChunks`: An array of build output files containing the generated assets for the server.
  */
-function generateAngularServerAppManifest(additionalHtmlOutputFiles, outputFiles, inlineCriticalCss, routes, locale, baseHref) {
+function generateAngularServerAppManifest(additionalHtmlOutputFiles, outputFiles, inlineCriticalCss, routes, locale, baseHref, initialFiles, metafile, publicPath) {
     const serverAssetsChunks = [];
     const serverAssets = {};
     for (const file of [...additionalHtmlOutputFiles.values(), ...outputFiles]) {
@@ -112,6 +120,11 @@ function generateAngularServerAppManifest(additionalHtmlOutputFiles, outputFiles
                 `{size: ${file.size}, hash: '${file.hash}', text: () => import('./${jsChunkFilePath}').then(m => m.default)}`;
         }
     }
+    // When routes have been extracted, mappings are no longer needed, as preloads will be included in the metadata.
+    // When shouldOptimizeChunks is enabled the metadata is no longer correct and thus we cannot generate the mappings.
+    const entryPointToBrowserMapping = routes?.length || environment_options_1.shouldOptimizeChunks
+        ? undefined
+        : generateLazyLoadedFilesMappings(metafile, initialFiles, publicPath);
     const manifestContent = `
 export default {
   bootstrap: () => import('./main.server.mjs').then(m => m.default),
@@ -119,6 +132,7 @@ export default {
   baseHref: '${baseHref}',
   locale: ${JSON.stringify(locale)},
   routes: ${JSON.stringify(routes, undefined, 2)},
+  entryPointToBrowserMapping: ${JSON.stringify(entryPointToBrowserMapping, undefined, 2)},
   assets: {
     ${Object.entries(serverAssets)
         .map(([key, value]) => `'${key}': ${value}`)
@@ -128,3 +142,38 @@ export default {
 `;
     return { manifestContent, serverAssetsChunks };
 }
+/**
+ * Maps entry points to their corresponding browser bundles for lazy loading.
+ *
+ * This function processes a metafile's outputs to generate a mapping between browser-side entry points
+ * and the associated JavaScript files that should be loaded in the browser. It includes the entry-point's
+ * own path and any valid imports while excluding initial files or external resources.
+ */
+function generateLazyLoadedFilesMappings(metafile, initialFiles, publicPath = '') {
+    const entryPointToBundles = {};
+    for (const [fileName, { entryPoint, exports, imports }] of Object.entries(metafile.outputs)) {
+        // Skip files that don't have an entryPoint, no exports, or are not .js
+        if (!entryPoint || exports?.length < 1 || !fileName.endsWith('.js')) {
+            continue;
+        }
+        const importedPaths = [
+            {
+                path: `${publicPath}${fileName}`,
+                dynamicImport: false,
+            },
+        ];
+        for (const { kind, external, path } of imports) {
+            if (external ||
+                initialFiles.has(path) ||
+                (kind !== 'dynamic-import' && kind !== 'import-statement')) {
+                continue;
+            }
+            importedPaths.push({
+                path: `${publicPath}${path}`,
+                dynamicImport: kind === 'dynamic-import',
+            });
+        }
+        entryPointToBundles[entryPoint] = importedPaths;
+    }
+    return entryPointToBundles;
+}

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

@@ -122,7 +122,7 @@ async function renderPages(baseHref, sourcemap, serializableRouteTreeNode, maxTh
         const renderingPromises = [];
         const appShellRouteWithLeadingSlash = appShellRoute && addLeadingSlash(appShellRoute);
         const baseHrefWithLeadingSlash = addLeadingSlash(baseHref);
-        for (const { route, redirectTo, renderMode } of serializableRouteTreeNode) {
+        for (const { route, redirectTo } of serializableRouteTreeNode) {
             // Remove the base href from the file output path.
             const routeWithoutBaseHref = addTrailingSlash(route).startsWith(baseHrefWithLeadingSlash)
                 ? addLeadingSlash(route.slice(baseHrefWithLeadingSlash.length))

package/tsconfig-build.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": ["node"]
+  }
+}