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

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

@@ -17,6 +17,7 @@ const typescript_1 = __importDefault(require("typescript"));
 const profiling_1 = require("../../esbuild/profiling");
 const angular_host_1 = require("../angular-host");
 const jit_bootstrap_transformer_1 = require("../transformers/jit-bootstrap-transformer");
+const lazy_routes_transformer_1 = require("../transformers/lazy-routes-transformer");
 const web_worker_transformer_1 = require("../transformers/web-worker-transformer");
 const angular_compilation_1 = require("./angular-compilation");
 const hmr_candidates_1 = require("./hmr-candidates");
@@ -48,7 +49,12 @@ class AngularCompilationState {
     }
 }
 class AotCompilation extends angular_compilation_1.AngularCompilation {
+    browserOnlyBuild;
     #state;
+    constructor(browserOnlyBuild) {
+        super();
+        this.browserOnlyBuild = browserOnlyBuild;
+    }
     async initialize(tsconfig, hostOptions, compilerOptionsTransformer) {
         // Dynamically load the Angular compiler CLI package
         const { NgtscProgram, OptimizeFor } = await angular_compilation_1.AngularCompilation.loadCompilerCli();
@@ -58,22 +64,34 @@ class AotCompilation extends angular_compilation_1.AngularCompilation {
         if (compilerOptions.externalRuntimeStyles) {
             hostOptions.externalStylesheets ??= new Map();
         }
+        // Reuse the package.json cache from the previous compilation
+        const packageJsonCache = this.#state?.compilerHost
+            .getModuleResolutionCache?.()
+            ?.getPackageJsonInfoCache();
         const useHmr = compilerOptions['_enableHmr'] &&
             hostOptions.modifiedFiles &&
             hostOptions.modifiedFiles.size <= HMR_MODIFIED_FILE_LIMIT;
-        // Collect stale source files for HMR analysis of inline component resources
         let staleSourceFiles;
-        if (useHmr && hostOptions.modifiedFiles && this.#state) {
+        let clearPackageJsonCache = false;
+        if (hostOptions.modifiedFiles && this.#state) {
             for (const modifiedFile of hostOptions.modifiedFiles) {
-                const sourceFile = this.#state.typeScriptProgram.getSourceFile(modifiedFile);
-                if (sourceFile) {
-                    staleSourceFiles ??= new Map();
-                    staleSourceFiles.set(modifiedFile, sourceFile);
+                // Clear package.json cache if a node modules file was modified
+                if (!clearPackageJsonCache && modifiedFile.includes('node_modules')) {
+                    clearPackageJsonCache = true;
+                    packageJsonCache?.clear();
+                }
+                // Collect stale source files for HMR analysis of inline component resources
+                if (useHmr) {
+                    const sourceFile = this.#state.typeScriptProgram.getSourceFile(modifiedFile);
+                    if (sourceFile) {
+                        staleSourceFiles ??= new Map();
+                        staleSourceFiles.set(modifiedFile, sourceFile);
+                    }
                 }
             }
         }
         // Create Angular compiler host
-        const host = (0, angular_host_1.createAngularCompilerHost)(typescript_1.default, compilerOptions, hostOptions);
+        const host = (0, angular_host_1.createAngularCompilerHost)(typescript_1.default, compilerOptions, hostOptions, packageJsonCache);
         // Create the Angular specific program that contains the Angular compiler
         const angularProgram = (0, profiling_1.profileSync)('NG_CREATE_PROGRAM', () => new NgtscProgram(rootNames, compilerOptions, host, this.#state?.angularProgram));
         const angularCompiler = angularProgram.compiler;
@@ -99,6 +117,7 @@ class AotCompilation extends angular_compilation_1.AngularCompilation {
                 if (relativePath.startsWith('..')) {
                     relativePath = componentFilename;
                 }
+                relativePath = relativePath.replaceAll('\\', '/');
                 const updateId = encodeURIComponent(`${host.getCanonicalFileName(relativePath)}@${node.name?.text}`);
                 const updateText = angularCompiler.emitHmrUpdateModule(node);
                 if (updateText === null) {
@@ -210,8 +229,10 @@ class AotCompilation extends angular_compilation_1.AngularCompilation {
         };
         const transformers = angularCompiler.prepareEmit().transformers;
         transformers.before ??= [];
-        transformers.before.push((0, jit_bootstrap_transformer_1.replaceBootstrap)(() => typeScriptProgram.getProgram().getTypeChecker()));
-        transformers.before.push(webWorkerTransform);
+        transformers.before.push((0, jit_bootstrap_transformer_1.replaceBootstrap)(() => typeScriptProgram.getProgram().getTypeChecker()), webWorkerTransform);
+        if (!this.browserOnlyBuild) {
+            transformers.before.push((0, lazy_routes_transformer_1.lazyRoutesTransformer)(compilerOptions, compilerHost));
+        }
         // Emit is handled in write file callback when using TypeScript
         if (useTypeScriptTranspilation) {
             // TypeScript will loop until there are no more affected files in the program

package/src/tools/angular/compilation/factory.d.ts

@@ -11,6 +11,7 @@ import type { AngularCompilation } from './angular-compilation';
  * compilation either for AOT or JIT mode. By default a parallel compilation is created
  * that uses a Node.js worker thread.
  * @param jit True, for Angular JIT compilation; False, for Angular AOT compilation.
+ * @param browserOnlyBuild True, for browser only builds; False, for browser and server builds.
  * @returns An instance of an Angular compilation object.
  */
-export declare function createAngularCompilation(jit: boolean): Promise<AngularCompilation>;
+export declare function createAngularCompilation(jit: boolean, browserOnlyBuild: boolean): Promise<AngularCompilation>;

package/src/tools/angular/compilation/factory.js

@@ -47,19 +47,20 @@ const environment_options_1 = require("../../../utils/environment-options");
  * compilation either for AOT or JIT mode. By default a parallel compilation is created
  * that uses a Node.js worker thread.
  * @param jit True, for Angular JIT compilation; False, for Angular AOT compilation.
+ * @param browserOnlyBuild True, for browser only builds; False, for browser and server builds.
  * @returns An instance of an Angular compilation object.
  */
-async function createAngularCompilation(jit) {
+async function createAngularCompilation(jit, browserOnlyBuild) {
     if (environment_options_1.useParallelTs) {
         const { ParallelCompilation } = await Promise.resolve().then(() => __importStar(require('./parallel-compilation')));
-        return new ParallelCompilation(jit);
+        return new ParallelCompilation(jit, browserOnlyBuild);
     }
     if (jit) {
         const { JitCompilation } = await Promise.resolve().then(() => __importStar(require('./jit-compilation')));
-        return new JitCompilation();
+        return new JitCompilation(browserOnlyBuild);
     }
     else {
         const { AotCompilation } = await Promise.resolve().then(() => __importStar(require('./aot-compilation')));
-        return new AotCompilation();
+        return new AotCompilation(browserOnlyBuild);
     }
 }

package/src/tools/angular/compilation/jit-compilation.d.ts

@@ -11,6 +11,8 @@ import { AngularHostOptions } from '../angular-host';
 import { AngularCompilation, DiagnosticModes, EmitFileResult } from './angular-compilation';
 export declare class JitCompilation extends AngularCompilation {
     #private;
+    private readonly browserOnlyBuild;
+    constructor(browserOnlyBuild: boolean);
     initialize(tsconfig: string, hostOptions: AngularHostOptions, compilerOptionsTransformer?: (compilerOptions: ng.CompilerOptions) => ng.CompilerOptions): Promise<{
         affectedFiles: ReadonlySet<ts.SourceFile>;
         compilerOptions: ng.CompilerOptions;

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

@@ -17,6 +17,7 @@ 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");
+const lazy_routes_transformer_1 = require("../transformers/lazy-routes-transformer");
 const web_worker_transformer_1 = require("../transformers/web-worker-transformer");
 const angular_compilation_1 = require("./angular-compilation");
 class JitCompilationState {
@@ -34,7 +35,12 @@ class JitCompilationState {
     }
 }
 class JitCompilation extends angular_compilation_1.AngularCompilation {
+    browserOnlyBuild;
     #state;
+    constructor(browserOnlyBuild) {
+        super();
+        this.browserOnlyBuild = browserOnlyBuild;
+    }
     async initialize(tsconfig, hostOptions, compilerOptionsTransformer) {
         // Dynamically load the Angular compiler CLI package
         const { constructorParametersDownlevelTransform } = await (0, load_esm_1.loadEsmModule)('@angular/compiler-cli/private/tooling');
@@ -42,7 +48,7 @@ class JitCompilation extends angular_compilation_1.AngularCompilation {
         const { options: originalCompilerOptions, rootNames, errors: configurationDiagnostics, } = await this.loadConfiguration(tsconfig);
         const compilerOptions = compilerOptionsTransformer?.(originalCompilerOptions) ?? originalCompilerOptions;
         // Create Angular compiler host
-        const host = (0, angular_host_1.createAngularCompilerHost)(typescript_1.default, compilerOptions, hostOptions);
+        const host = (0, angular_host_1.createAngularCompilerHost)(typescript_1.default, compilerOptions, hostOptions, undefined);
         // Create the TypeScript Program
         const typeScriptProgram = (0, profiling_1.profileSync)('TS_CREATE_PROGRAM', () => typescript_1.default.createEmitAndSemanticDiagnosticsBuilderProgram(rootNames, compilerOptions, host, this.#state?.typeScriptProgram ?? typescript_1.default.readBuilderProgram(compilerOptions, host), configurationDiagnostics));
         const affectedFiles = (0, profiling_1.profileSync)('TS_FIND_AFFECTED', () => findAffectedFiles(typeScriptProgram));
@@ -71,7 +77,8 @@ class JitCompilation extends angular_compilation_1.AngularCompilation {
     emitAffectedFiles() {
         (0, node_assert_1.default)(this.#state, 'Compilation must be initialized prior to emitting files.');
         const { compilerHost, typeScriptProgram, constructorParametersDownlevelTransform, replaceResourcesTransform, webWorkerTransform, } = this.#state;
-        const buildInfoFilename = typeScriptProgram.getCompilerOptions().tsBuildInfoFile ?? '.tsbuildinfo';
+        const compilerOptions = typeScriptProgram.getCompilerOptions();
+        const buildInfoFilename = compilerOptions.tsBuildInfoFile ?? '.tsbuildinfo';
         const emittedFiles = [];
         const writeFileCallback = (filename, contents, _a, _b, sourceFiles) => {
             if (!sourceFiles?.length && filename.endsWith(buildInfoFilename)) {
@@ -89,6 +96,9 @@ class JitCompilation extends angular_compilation_1.AngularCompilation {
                 webWorkerTransform,
             ],
         };
+        if (!this.browserOnlyBuild) {
+            transformers.before.push((0, lazy_routes_transformer_1.lazyRoutesTransformer)(compilerOptions, compilerHost));
+        }
         // TypeScript will loop until there are no more affected files in the program
         while (typeScriptProgram.emitNextAffectedFile(writeFileCallback, undefined, undefined, transformers)) {
             /* empty */

package/src/tools/angular/compilation/parallel-compilation.d.ts

@@ -20,8 +20,9 @@ import { AngularCompilation, DiagnosticModes, EmitFileResult } from './angular-c
  */
 export declare class ParallelCompilation extends AngularCompilation {
     #private;
-    readonly jit: boolean;
-    constructor(jit: boolean);
+    private readonly jit;
+    private readonly browserOnlyBuild;
+    constructor(jit: boolean, browserOnlyBuild: boolean);
     initialize(tsconfig: string, hostOptions: AngularHostOptions, compilerOptionsTransformer?: (compilerOptions: CompilerOptions) => CompilerOptions): Promise<{
         affectedFiles: ReadonlySet<SourceFile>;
         compilerOptions: CompilerOptions;

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

@@ -22,10 +22,12 @@ const angular_compilation_1 = require("./angular-compilation");
  */
 class ParallelCompilation extends angular_compilation_1.AngularCompilation {
     jit;
+    browserOnlyBuild;
     #worker;
-    constructor(jit) {
+    constructor(jit, browserOnlyBuild) {
         super();
         this.jit = jit;
+        this.browserOnlyBuild = browserOnlyBuild;
         // TODO: Convert to import.meta usage during ESM transition
         const localRequire = (0, node_module_1.createRequire)(__filename);
         this.#worker = new worker_pool_1.WorkerPool({
@@ -82,6 +84,7 @@ class ParallelCompilation extends angular_compilation_1.AngularCompilation {
             fileReplacements: hostOptions.fileReplacements,
             tsconfig,
             jit: this.jit,
+            browserOnlyBuild: this.browserOnlyBuild,
             stylesheetPort: stylesheetChannel.port2,
             optionsPort: optionsChannel.port2,
             optionsSignal,

package/src/tools/angular/compilation/parallel-worker.d.ts

@@ -10,6 +10,7 @@ import { type MessagePort } from 'node:worker_threads';
 import type { DiagnosticModes } from './angular-compilation';
 export interface InitRequest {
     jit: boolean;
+    browserOnlyBuild: boolean;
     tsconfig: string;
     fileReplacements?: Record<string, string>;
     stylesheetPort: MessagePort;

package/src/tools/angular/compilation/parallel-worker.js

@@ -23,7 +23,9 @@ const jit_compilation_1 = require("./jit-compilation");
 let compilation;
 const sourceFileCache = new source_file_cache_1.SourceFileCache();
 async function initialize(request) {
-    compilation ??= request.jit ? new jit_compilation_1.JitCompilation() : new aot_compilation_1.AotCompilation();
+    compilation ??= request.jit
+        ? new jit_compilation_1.JitCompilation(request.browserOnlyBuild)
+        : new aot_compilation_1.AotCompilation(request.browserOnlyBuild);
     const stylesheetRequests = new Map();
     request.stylesheetPort.on('message', ({ requestId, value, error }) => {
         if (error) {

package/src/tools/angular/transformers/lazy-routes-transformer.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @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
+ */
+import ts from 'typescript';
+/**
+ * A transformer factory that adds a property to the lazy-loaded route object.
+ * This property is used to allow for the retrieval of the module path during SSR.
+ *
+ * @param compilerOptions The compiler options.
+ * @param compilerHost The compiler host.
+ * @returns A transformer factory.
+ *
+ * @example
+ * **Before:**
+ * ```ts
+ * const routes: Routes = [
+ *   {
+ *     path: 'lazy',
+ *     loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
+ *   }
+ * ];
+ * ```
+ *
+ * **After:**
+ * ```ts
+ * const routes: Routes = [
+ *   {
+ *     path: 'lazy',
+ *     loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule),
+ *     ...(typeof ngServerMode !== "undefined" && ngServerMode ? { ɵentryName: "./lazy/lazy.module.ts" }: {})
+ *   }
+ * ];
+ * ```
+ */
+export declare function lazyRoutesTransformer(compilerOptions: ts.CompilerOptions, compilerHost: ts.CompilerHost): ts.TransformerFactory<ts.SourceFile>;

package/src/tools/angular/transformers/lazy-routes-transformer.js

@@ -0,0 +1,163 @@
+"use strict";
+/**
+ * @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
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lazyRoutesTransformer = lazyRoutesTransformer;
+const node_assert_1 = __importDefault(require("node:assert"));
+const posix_1 = require("node:path/posix");
+const typescript_1 = __importDefault(require("typescript"));
+/**
+ * A transformer factory that adds a property to the lazy-loaded route object.
+ * This property is used to allow for the retrieval of the module path during SSR.
+ *
+ * @param compilerOptions The compiler options.
+ * @param compilerHost The compiler host.
+ * @returns A transformer factory.
+ *
+ * @example
+ * **Before:**
+ * ```ts
+ * const routes: Routes = [
+ *   {
+ *     path: 'lazy',
+ *     loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
+ *   }
+ * ];
+ * ```
+ *
+ * **After:**
+ * ```ts
+ * const routes: Routes = [
+ *   {
+ *     path: 'lazy',
+ *     loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule),
+ *     ...(typeof ngServerMode !== "undefined" && ngServerMode ? { ɵentryName: "./lazy/lazy.module.ts" }: {})
+ *   }
+ * ];
+ * ```
+ */
+function lazyRoutesTransformer(compilerOptions, compilerHost) {
+    const moduleResolutionCache = compilerHost.getModuleResolutionCache?.();
+    (0, node_assert_1.default)(typeof compilerOptions.basePath === 'string', 'compilerOptions.basePath should be a string.');
+    const basePath = compilerOptions.basePath;
+    return (context) => {
+        const factory = context.factory;
+        const visitor = (node) => {
+            if (!typescript_1.default.isObjectLiteralExpression(node)) {
+                // Not an object literal, so skip it.
+                return typescript_1.default.visitEachChild(node, visitor, context);
+            }
+            const loadFunction = getLoadComponentOrChildrenProperty(node)?.initializer;
+            // Check if the initializer is an arrow function or a function expression
+            if (!loadFunction ||
+                (!typescript_1.default.isArrowFunction(loadFunction) && !typescript_1.default.isFunctionExpression(loadFunction))) {
+                return typescript_1.default.visitEachChild(node, visitor, context);
+            }
+            let callExpression;
+            if (typescript_1.default.isArrowFunction(loadFunction)) {
+                // Handle arrow functions: body can either be a block or a direct call expression
+                const body = loadFunction.body;
+                if (typescript_1.default.isBlock(body)) {
+                    // Arrow function with a block: check the first statement for a return call expression
+                    const firstStatement = body.statements[0];
+                    if (firstStatement &&
+                        typescript_1.default.isReturnStatement(firstStatement) &&
+                        firstStatement.expression &&
+                        typescript_1.default.isCallExpression(firstStatement.expression)) {
+                        callExpression = firstStatement.expression;
+                    }
+                }
+                else if (typescript_1.default.isCallExpression(body)) {
+                    // Arrow function with a direct call expression as its body
+                    callExpression = body;
+                }
+            }
+            else if (typescript_1.default.isFunctionExpression(loadFunction)) {
+                // Handle function expressions: check for a return statement with a call expression
+                const returnExpression = loadFunction.body.statements.find(typescript_1.default.isReturnStatement)?.expression;
+                if (returnExpression && typescript_1.default.isCallExpression(returnExpression)) {
+                    callExpression = returnExpression;
+                }
+            }
+            if (!callExpression) {
+                return typescript_1.default.visitEachChild(node, visitor, context);
+            }
+            // Optionally check for the 'then' property access expression
+            const expression = callExpression.expression;
+            if (!typescript_1.default.isCallExpression(expression) &&
+                typescript_1.default.isPropertyAccessExpression(expression) &&
+                expression.name.text !== 'then') {
+                return typescript_1.default.visitEachChild(node, visitor, context);
+            }
+            const importExpression = typescript_1.default.isPropertyAccessExpression(expression)
+                ? expression.expression // Navigate to the underlying expression for 'then'
+                : callExpression;
+            // Ensure the underlying expression is an import call
+            if (!typescript_1.default.isCallExpression(importExpression) ||
+                importExpression.expression.kind !== typescript_1.default.SyntaxKind.ImportKeyword) {
+                return typescript_1.default.visitEachChild(node, visitor, context);
+            }
+            // Check if the argument to the import call is a string literal
+            const callExpressionArgument = importExpression.arguments[0];
+            if (!typescript_1.default.isStringLiteralLike(callExpressionArgument)) {
+                // Not a string literal, so skip it.
+                return typescript_1.default.visitEachChild(node, visitor, context);
+            }
+            const resolvedPath = typescript_1.default.resolveModuleName(callExpressionArgument.text, node.getSourceFile().fileName, compilerOptions, compilerHost, moduleResolutionCache)?.resolvedModule?.resolvedFileName;
+            if (!resolvedPath) {
+                // Could not resolve the module, so skip it.
+                return typescript_1.default.visitEachChild(node, visitor, context);
+            }
+            const resolvedRelativePath = (0, posix_1.relative)(basePath, resolvedPath);
+            // Create the new property
+            // Example: `...(typeof ngServerMode !== "undefined" && ngServerMode ? { ɵentryName: "src/home.ts" }: {})`
+            const newProperty = factory.createSpreadAssignment(factory.createParenthesizedExpression(factory.createConditionalExpression(factory.createBinaryExpression(factory.createBinaryExpression(factory.createTypeOfExpression(factory.createIdentifier('ngServerMode')), factory.createToken(typescript_1.default.SyntaxKind.ExclamationEqualsEqualsToken), factory.createStringLiteral('undefined')), factory.createToken(typescript_1.default.SyntaxKind.AmpersandAmpersandToken), factory.createIdentifier('ngServerMode')), factory.createToken(typescript_1.default.SyntaxKind.QuestionToken), factory.createObjectLiteralExpression([
+                factory.createPropertyAssignment(factory.createIdentifier('ɵentryName'), factory.createStringLiteral(resolvedRelativePath)),
+            ]), factory.createToken(typescript_1.default.SyntaxKind.ColonToken), factory.createObjectLiteralExpression([]))));
+            // Add the new property to the object literal.
+            return factory.updateObjectLiteralExpression(node, [...node.properties, newProperty]);
+        };
+        return (sourceFile) => {
+            const text = sourceFile.text;
+            if (!text.includes('loadC')) {
+                // Fast check for 'loadComponent' and 'loadChildren'.
+                return sourceFile;
+            }
+            return typescript_1.default.visitEachChild(sourceFile, visitor, context);
+        };
+    };
+}
+/**
+ * Retrieves the property assignment for the `loadComponent` or `loadChildren` property of a route object.
+ *
+ * @param node The object literal expression to search.
+ * @returns The property assignment if found, otherwise `undefined`.
+ */
+function getLoadComponentOrChildrenProperty(node) {
+    let hasPathProperty = false;
+    let loadComponentOrChildrenProperty;
+    for (const prop of node.properties) {
+        if (!typescript_1.default.isPropertyAssignment(prop) || !typescript_1.default.isIdentifier(prop.name)) {
+            continue;
+        }
+        const propertyNameText = prop.name.text;
+        if (propertyNameText === 'path') {
+            hasPathProperty = true;
+        }
+        else if (propertyNameText === 'loadComponent' || propertyNameText === 'loadChildren') {
+            loadComponentOrChildrenProperty = prop;
+        }
+        if (hasPathProperty && loadComponentOrChildrenProperty) {
+            break;
+        }
+    }
+    return loadComponentOrChildrenProperty;
+}

package/src/tools/esbuild/angular/compiler-plugin.d.ts

@@ -13,6 +13,7 @@ export interface CompilerPluginOptions {
     sourcemap: boolean | 'external';
     tsconfig: string;
     jit?: boolean;
+    browserOnlyBuild?: boolean;
     /** Skip TypeScript compilation setup. This is useful to re-use the TypeScript compilation from another plugin. */
     noopTypeScriptCompilation?: boolean;
     advancedOptimizations?: boolean;

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

@@ -103,7 +103,7 @@ function createCompilerPlugin(pluginOptions, stylesheetBundler) {
             // Create new reusable compilation for the appropriate mode based on the `jit` plugin option
             const compilation = pluginOptions.noopTypeScriptCompilation
                 ? new compilation_1.NoopCompilation()
-                : await (0, compilation_1.createAngularCompilation)(!!pluginOptions.jit);
+                : await (0, compilation_1.createAngularCompilation)(!!pluginOptions.jit, !!pluginOptions.browserOnlyBuild);
             // Compilation is initially assumed to have errors until emitted
             let hasCompilationErrors = true;
             // Determines if TypeScript should process JavaScript files based on tsconfig `allowJs` option

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

@@ -136,6 +136,15 @@ function createServerPolyfillBundleOptions(options, target, loadResultCache) {
     if (!polyfillBundleOptions) {
         return;
     }
+    const jsBanner = [];
+    if (polyfillBundleOptions.external?.length) {
+        jsBanner.push(`globalThis['ngServerMode'] = true;`);
+    }
+    if (isNodePlatform) {
+        // Note: Needed as esbuild does not provide require shims / proxy from ESModules.
+        // See: https://github.com/evanw/esbuild/issues/1921.
+        jsBanner.push(`import { createRequire } from 'node:module';`, `globalThis['require'] ??= createRequire(import.meta.url);`);
+    }
     const buildOptions = {
         ...polyfillBundleOptions,
         platform: isNodePlatform ? 'node' : 'neutral',
@@ -146,16 +155,9 @@ function createServerPolyfillBundleOptions(options, target, loadResultCache) {
         // More details: https://github.com/angular/angular-cli/issues/25405.
         mainFields: ['es2020', 'es2015', 'module', 'main'],
         entryNames: '[name]',
-        banner: isNodePlatform
-            ? {
-                js: [
-                    // Note: Needed as esbuild does not provide require shims / proxy from ESModules.
-                    // See: https://github.com/evanw/esbuild/issues/1921.
-                    `import { createRequire } from 'node:module';`,
-                    `globalThis['require'] ??= createRequire(import.meta.url);`,
-                ].join('\n'),
-            }
-            : undefined,
+        banner: {
+            js: jsBanner.join('\n'),
+        },
         target,
         entryPoints: {
             'polyfills.server': namespace,
@@ -248,6 +250,8 @@ function createServerMainCodeBundleOptions(options, target, sourceFileCache, sty
               ɵextractRoutesAndCreateRouteTree,
               ɵgetOrCreateAngularServerApp,
             } from '@angular/ssr';`,
+                    // Need for HMR
+                    `export { ɵresetCompiledComponents } from '@angular/core';`,
                     // Re-export all symbols including default export from 'main.server.ts'
                     `export { default } from '${mainServerEntryPointJsImport}';`,
                     `export * from '${mainServerEntryPointJsImport}';`,
@@ -274,19 +278,21 @@ function createSsrEntryCodeBundleOptions(options, target, sourceFileCache, style
         const ssrEntryNamespace = 'angular:ssr-entry';
         const ssrInjectManifestNamespace = 'angular:ssr-entry-inject-manifest';
         const isNodePlatform = options.ssrOptions?.platform !== schema_1.ExperimentalPlatform.Neutral;
+        const jsBanner = [];
+        if (options.externalDependencies?.length) {
+            jsBanner.push(`globalThis['ngServerMode'] = true;`);
+        }
+        if (isNodePlatform) {
+            // Note: Needed as esbuild does not provide require shims / proxy from ESModules.
+            // See: https://github.com/evanw/esbuild/issues/1921.
+            jsBanner.push(`import { createRequire } from 'node:module';`, `globalThis['require'] ??= createRequire(import.meta.url);`);
+        }
         const buildOptions = {
             ...getEsBuildServerCommonOptions(options),
             target,
-            banner: isNodePlatform
-                ? {
-                    js: [
-                        // Note: Needed as esbuild does not provide require shims / proxy from ESModules.
-                        // See: https://github.com/evanw/esbuild/issues/1921.
-                        `import { createRequire } from 'node:module';`,
-                        `globalThis['require'] ??= createRequire(import.meta.url);`,
-                    ].join('\n'),
-                }
-                : undefined,
+            banner: {
+                js: jsBanner.join('\n'),
+            },
             entryPoints: {
                 'server': ssrEntryNamespace,
             },

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

@@ -12,6 +12,7 @@ function createCompilerPluginOptions(options, sourceFileCache, loadResultCache,
     const { sourcemapOptions, tsconfig, fileReplacements, advancedOptimizations, jit, externalRuntimeStyles, instrumentForCoverage, } = options;
     const incremental = !!options.watch;
     return {
+        browserOnlyBuild: !options.serverEntryPoint,
         sourcemap: !!sourcemapOptions.scripts && (sourcemapOptions.hidden ? 'external' : true),
         thirdPartySourcemaps: sourcemapOptions.vendor,
         tsconfig,

package/src/tools/vite/plugins/angular-memory-plugin.d.ts

@@ -10,6 +10,7 @@ import { AngularMemoryOutputFiles } from '../utils';
 interface AngularMemoryPluginOptions {
     virtualProjectRoot: string;
     outputFiles: AngularMemoryOutputFiles;
+    templateUpdates?: ReadonlyMap<string, string>;
     external?: string[];
     skipViteClient?: boolean;
 }

package/src/tools/vite/plugins/angular-memory-plugin.js

@@ -15,6 +15,7 @@ const node_assert_1 = __importDefault(require("node:assert"));
 const promises_1 = require("node:fs/promises");
 const node_path_1 = require("node:path");
 const load_esm_1 = require("../../../utils/load-esm");
+const ANGULAR_PREFIX = '/@ng/';
 async function createAngularMemoryPlugin(options) {
     const { virtualProjectRoot, outputFiles, external } = options;
     const { normalizePath } = await (0, load_esm_1.loadEsmModule)('vite');
@@ -22,7 +23,11 @@ async function createAngularMemoryPlugin(options) {
         name: 'vite:angular-memory',
         // Ensures plugin hooks run before built-in Vite hooks
         enforce: 'pre',
-        async resolveId(source, importer) {
+        async resolveId(source, importer, { ssr }) {
+            // For SSR with component HMR, pass through as a virtual module
+            if (ssr && source.startsWith(ANGULAR_PREFIX)) {
+                return '\0' + source;
+            }
             // Prevent vite from resolving an explicit external dependency (`externalDependencies` option)
             if (external?.includes(source)) {
                 // This is still not ideal since Vite will still transform the import specifier to
@@ -35,13 +40,31 @@ async function createAngularMemoryPlugin(options) {
                     const [importerFile] = importer.split('?', 1);
                     source = '/' + (0, node_path_1.join)((0, node_path_1.dirname)((0, node_path_1.relative)(virtualProjectRoot, importerFile)), source);
                 }
+                else if (!ssr &&
+                    source[0] === '/' &&
+                    importer.endsWith('index.html') &&
+                    normalizePath(importer).startsWith(virtualProjectRoot)) {
+                    // This is only needed when using SSR and `angularSsrMiddleware` (old style) to correctly resolve
+                    // .js files when using lazy-loading.
+                    // Remove query if present
+                    const [importerFile] = importer.split('?', 1);
+                    source =
+                        '/' + (0, node_path_1.join)((0, node_path_1.dirname)((0, node_path_1.relative)(virtualProjectRoot, importerFile)), (0, node_path_1.basename)(source));
+                }
             }
             const [file] = source.split('?', 1);
             if (outputFiles.has(file)) {
                 return (0, node_path_1.join)(virtualProjectRoot, source);
             }
         },
-        load(id) {
+        load(id, loadOptions) {
+            // For SSR component updates, return the component update module or empty if none
+            if (loadOptions?.ssr && id.startsWith(`\0${ANGULAR_PREFIX}`)) {
+                // Extract component identifier (first character is rollup virtual module null)
+                const requestUrl = new URL(id.slice(1), 'http://localhost');
+                const componentId = requestUrl.searchParams.get('c');
+                return (componentId && options.templateUpdates?.get(encodeURIComponent(componentId))) ?? '';
+            }
             const [file] = id.split('?', 1);
             const relativeFile = '/' + normalizePath((0, node_path_1.relative)(virtualProjectRoot, file));
             const codeContents = outputFiles.get(relativeFile)?.contents;

package/src/tools/vite/utils.d.ts

@@ -5,6 +5,8 @@
  * 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 { DepOptimizationConfig } from 'vite';
+import { JavaScriptTransformer } from '../esbuild/javascript-transformer';
 export type AngularMemoryOutputFiles = Map<string, {
     contents: Uint8Array;
     hash: string;
@@ -12,3 +14,15 @@ export type AngularMemoryOutputFiles = Map<string, {
 }>;
 export declare function pathnameWithoutBasePath(url: string, basePath: string): string;
 export declare function lookupMimeTypeFromRequest(url: string): string | undefined;
+export type EsbuildLoaderOption = Exclude<DepOptimizationConfig['esbuildOptions'], undefined>['loader'];
+export declare function getDepOptimizationConfig({ disabled, exclude, include, target, zoneless, prebundleTransformer, ssr, loader, thirdPartySourcemaps, }: {
+    disabled: boolean;
+    exclude: string[];
+    include: string[];
+    target: string[];
+    prebundleTransformer: JavaScriptTransformer;
+    ssr: boolean;
+    zoneless: boolean;
+    loader?: EsbuildLoaderOption;
+    thirdPartySourcemaps: boolean;
+}): DepOptimizationConfig;