@nx/angular 21.2.0-canary.20250523-560a53e → 21.2.0-canary.20250527-4a94841

package/src/generators/setup-ssr/files/v20+/application-builder/server/__serverFileName__

@@ -0,0 +1,66 @@
+import {
+  AngularNodeAppEngine,
+  createNodeRequestHandler,
+  isMainModule,
+  writeResponseToNodeResponse,
+} from '@angular/ssr/node';
+import express from 'express';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+const browserDistFolder = resolve(serverDistFolder, '../<%= browserDistDirectory %>');
+
+const app = express();
+const angularApp = new AngularNodeAppEngine();
+
+/**
+ * Example Express Rest API endpoints can be defined here.
+ * Uncomment and define endpoints as necessary.
+ *
+ * Example:
+ * ```ts
+ * app.get('/api/**', (req, res) => {
+ *   // Handle API request
+ * });
+ * ```
+ */
+
+/**
+ * Serve static files from /<%= browserDistDirectory %>
+ */
+app.use(
+  express.static(browserDistFolder, {
+    maxAge: '1y',
+    index: false,
+    redirect: false,
+  })
+);
+
+/**
+ * Handle all other requests by rendering the Angular application.
+ */
+app.use('/**', (req, res, next) => {
+  angularApp
+    .handle(req)
+    .then((response) =>
+      response ? writeResponseToNodeResponse(response, res) : next()
+    )
+    .catch(next);
+});
+
+/**
+ * Start the server if this module is the main entry point.
+ * The server listens on the port defined by the `PORT` environment variable, or defaults to <%= serverPort %>.
+ */
+if (isMainModule(import.meta.url)) {
+  const port = process.env['PORT'] || <%= serverPort %>;
+  app.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+/**
+ * Request handler used by the Angular CLI (for dev-server and during build) or Firebase Cloud Functions.
+ */
+export const reqHandler = createNodeRequestHandler(app);

package/src/generators/setup-ssr/files/v20+/application-builder/standalone-src/__main__

@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { <%= appSymbolName %> } from './app/<%= appFileName %>';
+import { config } from './app/app.config.server';
+
+const bootstrap = () => bootstrapApplication(<%= appSymbolName %>, config);
+
+export default bootstrap;

package/src/generators/setup-ssr/files/v20+/application-builder/standalone-src/app/app.config.server.ts__tpl__

@@ -0,0 +1,12 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering, withRoutes } from '@angular/ssr';
+import { appConfig } from './app.config';
+import { serverRoutes } from './app.routes.server';
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering(withRoutes(serverRoutes))
+  ]
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);

package/src/generators/setup-ssr/files/v20+/application-builder/standalone-src/app/app.routes.server.ts__tpl__

@@ -0,0 +1,8 @@
+import { RenderMode, ServerRoute } from '@angular/ssr';
+
+export const serverRoutes: ServerRoute[] = [
+  {
+    path: '**',
+    renderMode: RenderMode.Prerender
+  }
+];

package/src/generators/setup-ssr/files/v20+/server-builder/ngmodule-src/__main__

@@ -0,0 +1 @@
+export { <%= rootModuleClassName %> as default } from './app/<%= rootModuleFileName.slice(0, -3) %>';

package/src/generators/setup-ssr/files/v20+/server-builder/ngmodule-src/app/__rootModuleFileName__

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { ServerModule } from '@angular/platform-server';
+
+import { AppModule } from './app<%= moduleTypeSeparator %>module';
+import { <%= appSymbolName %> } from './<%= appFileName %>';
+
+@NgModule({
+  imports: [
+    AppModule,
+    ServerModule,
+  ],
+  bootstrap: [<%= appSymbolName %>],
+})
+export class <%= rootModuleClassName %> {}

package/src/generators/setup-ssr/files/v20+/server-builder/root/tsconfig.server.json.template

@@ -0,0 +1,18 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "outDir": "<%= rootOffset %>out-tsc/server",
+    "module": "commonjs",
+    "moduleResolution": "node10",
+    "types": [
+      "node"<% if (hasLocalizePackage) { %>,
+      "@angular/localize"<% } %>
+    ]
+  },
+  "files": [
+    "src/<%= main %>",
+    "src/server.ts"
+  ]
+}

package/src/generators/setup-ssr/files/v20+/server-builder/server/__serverFileName__

@@ -0,0 +1,69 @@
+import 'zone.js/node';
+
+import { APP_BASE_HREF } from '@angular/common';
+import { CommonEngine } from '@angular/ssr/node';
+import * as express from 'express';
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+import <% if (standalone) { %>bootstrap<% } else { %><%= rootModuleClassName %><% } %> from './<%= main.slice(0, -3) %>';
+
+// The Express app is exported so that it can be used by serverless Functions.
+export function app(): express.Express {
+  const server = express();
+  const distFolder = join(process.cwd(), '<%= browserDistDirectory %>');
+  const indexHtml = existsSync(join(distFolder, 'index.original.html'))
+    ? join(distFolder, 'index.original.html')
+    : join(distFolder, 'index.html');
+
+  const commonEngine = new CommonEngine();
+
+  server.set('view engine', 'html');
+  server.set('views', distFolder);
+
+  // Example Express Rest API endpoints
+  // server.get('/api/**', (req, res) => { });
+  // Serve static files from /browser
+  server.get('*.*', express.static(distFolder, {
+    maxAge: '1y'
+  }));
+
+  // All regular routes use the Angular engine
+  server.get('*', (req, res, next) => {
+    const { protocol, originalUrl, baseUrl, headers } = req;
+
+    commonEngine
+      .render({
+        bootstrap<% if (!standalone) { %>: <%= rootModuleClassName %><% } %>,
+        documentFilePath: indexHtml,
+        url: `${protocol}://${headers.host}${originalUrl}`,
+        publicPath: distFolder,
+        providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
+      })
+      .then((html) => res.send(html))
+      .catch((err) => next(err));
+  });
+
+  return server;
+}
+
+function run(): void {
+  const port = process.env['PORT'] || <%= serverPort %>;
+
+  // Start up the Node server
+  const server = app();
+  server.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+// Webpack will replace 'require' with '__webpack_require__'
+// '__non_webpack_require__' is a proxy to Node 'require'
+// The below code is to ensure that the server is run only when not requiring the bundle.
+declare const __non_webpack_require__: NodeRequire;
+const mainModule = __non_webpack_require__.main;
+const moduleFilename = mainModule && mainModule.filename || '';
+if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
+  run();
+}
+
+export default <% if (standalone) { %>bootstrap<% } else { %><%= rootModuleClassName %><% } %>;

package/src/generators/setup-ssr/files/v20+/server-builder/standalone-src/__main__

@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { <%= appSymbolName %> } from './app/<%= appFileName %>';
+import { config } from './app/app.config.server';
+
+const bootstrap = () => bootstrapApplication(<%= appSymbolName %>, config);
+
+export default bootstrap;

package/src/generators/setup-ssr/files/v20+/server-builder/standalone-src/app/app.config.server.ts.template

@@ -0,0 +1,11 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/ssr';
+import { appConfig } from './app.config';
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering()
+  ]
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);

package/src/generators/setup-ssr/lib/add-dependencies.js

@@ -2,24 +2,27 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addDependencies = addDependencies;
 const devkit_1 = require("@nx/devkit");
-const semver_1 = require("semver");
 const version_utils_1 = require("../../utils/version-utils");
 function addDependencies(tree, isUsingApplicationBuilder) {
     const pkgVersions = (0, version_utils_1.versions)(tree);
-    const { version: angularVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
     const dependencies = {
-        '@angular/platform-server': (0, version_utils_1.getInstalledPackageVersionInfo)(tree, '@angular/platform-server')
-            ?.version ?? pkgVersions.angularVersion,
+        '@angular/platform-server': (0, version_utils_1.getInstalledPackageVersion)(tree, '@angular/platform-server') ??
+            pkgVersions.angularVersion,
         express: pkgVersions.expressVersion,
     };
     const devDependencies = {
         '@types/express': pkgVersions.typesExpressVersion,
     };
-    dependencies['@angular/ssr'] =
-        (0, version_utils_1.getInstalledPackageVersionInfo)(tree, '@angular-devkit/build-angular')
-            ?.version ?? pkgVersions.angularDevkitVersion;
-    if (!isUsingApplicationBuilder && (0, semver_1.gte)(angularVersion, '17.1.0')) {
+    const angularDevkitVersion = (0, version_utils_1.getInstalledAngularDevkitVersion)(tree) ?? pkgVersions.angularDevkitVersion;
+    dependencies['@angular/ssr'] = angularDevkitVersion;
+    if (!isUsingApplicationBuilder) {
         devDependencies['browser-sync'] = pkgVersions.browserSyncVersion;
     }
+    else {
+        const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+        if (angularMajorVersion >= 20) {
+            dependencies['@angular-devkit/build-angular'] = angularDevkitVersion;
+        }
+    }
     (0, devkit_1.addDependenciesToPackageJson)(tree, dependencies, devDependencies);
 }

package/src/generators/setup-ssr/lib/add-hydration.js

@@ -14,9 +14,16 @@ function addHydration(tree, options) {
         tsModule = (0, ensure_typescript_1.ensureTypescript)();
         tsquery = require('@phenomnomnominal/tsquery').tsquery;
     }
-    const pathToClientConfigFile = options.standalone
-        ? (0, devkit_1.joinPathFragments)(projectConfig.sourceRoot, 'app/app.config.ts')
-        : (0, devkit_1.joinPathFragments)(projectConfig.sourceRoot, 'app/app.module.ts');
+    let pathToClientConfigFile;
+    if (options.standalone) {
+        pathToClientConfigFile = (0, devkit_1.joinPathFragments)(projectConfig.sourceRoot, 'app/app.config.ts');
+    }
+    else {
+        pathToClientConfigFile = (0, devkit_1.joinPathFragments)(projectConfig.sourceRoot, 'app/app.module.ts');
+        if (!tree.exists(pathToClientConfigFile)) {
+            pathToClientConfigFile = (0, devkit_1.joinPathFragments)(projectConfig.sourceRoot, 'app/app-module.ts');
+        }
+    }
     const sourceText = tree.read(pathToClientConfigFile, 'utf-8');
     let sourceFile = tsModule.createSourceFile(pathToClientConfigFile, sourceText, tsModule.ScriptTarget.Latest, true);
     const provideClientHydrationCallExpression = tsquery(sourceFile, 'ObjectLiteralExpression PropertyAssignment:has(Identifier[name=providers]) ArrayLiteralExpression CallExpression:has(Identifier[name=provideClientHydration])')[0];

package/src/generators/setup-ssr/lib/add-server-file.js

@@ -14,8 +14,13 @@ function addServerFile(tree, options) {
     const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
     const baseFilesPath = (0, path_1.join)(__dirname, '..', 'files');
     let pathToFiles;
-    if (angularMajorVersion >= 19) {
-        pathToFiles = (0, path_1.join)(baseFilesPath, 'v19+', options.isUsingApplicationBuilder
+    if (angularMajorVersion >= 20) {
+        pathToFiles = (0, path_1.join)(baseFilesPath, 'v20+', options.isUsingApplicationBuilder
+            ? 'application-builder'
+            : 'server-builder', 'server');
+    }
+    else if (angularMajorVersion === 19) {
+        pathToFiles = (0, path_1.join)(baseFilesPath, 'v19', options.isUsingApplicationBuilder
             ? 'application-builder' +
                 (options.serverRouting ? '' : '-common-engine')
             : 'server-builder', 'server');

package/src/generators/setup-ssr/lib/generate-files.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateSSRFiles = generateSSRFiles;
 const devkit_1 = require("@nx/devkit");
 const path_1 = require("path");
-const version_utils_1 = require("../../utils/version-utils");
 const semver_1 = require("semver");
+const app_components_info_1 = require("../../utils/app-components-info");
+const artifact_types_1 = require("../../utils/artifact-types");
+const version_utils_1 = require("../../utils/version-utils");
 function generateSSRFiles(tree, options) {
     const project = (0, devkit_1.readProjectConfiguration)(tree, options.project);
     if (project.targets.server ||
@@ -16,8 +18,13 @@ function generateSSRFiles(tree, options) {
     const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
     const baseFilesPath = (0, path_1.join)(__dirname, '..', 'files');
     let pathToFiles;
-    if (angularMajorVersion >= 19) {
-        pathToFiles = (0, path_1.join)(baseFilesPath, 'v19+', options.isUsingApplicationBuilder
+    if (angularMajorVersion >= 20) {
+        pathToFiles = (0, path_1.join)(baseFilesPath, 'v20+', options.isUsingApplicationBuilder
+            ? 'application-builder'
+            : 'server-builder', options.standalone ? 'standalone-src' : 'ngmodule-src');
+    }
+    else if (angularMajorVersion === 19) {
+        pathToFiles = (0, path_1.join)(baseFilesPath, 'v19', options.isUsingApplicationBuilder
             ? 'application-builder'
             : 'server-builder', options.standalone ? 'standalone-src' : 'ngmodule-src');
     }
@@ -29,14 +36,20 @@ function generateSSRFiles(tree, options) {
     const cleanedSsrVersion = ssrVersion
         ? (0, semver_1.clean)(ssrVersion) ?? (0, semver_1.coerce)(ssrVersion).version
         : null;
+    const componentType = (0, artifact_types_1.getComponentType)(tree);
+    const appComponentInfo = (0, app_components_info_1.getAppComponentInfo)(tree, componentType ? `.${componentType}` : '', project);
+    const moduleTypeSeparator = (0, artifact_types_1.getModuleTypeSeparator)(tree);
     (0, devkit_1.generateFiles)(tree, pathToFiles, sourceRoot, {
         ...options,
         provideServerRoutingFn: !cleanedSsrVersion || (0, semver_1.gte)(cleanedSsrVersion, '19.2.0')
             ? 'provideServerRouting'
             : 'provideServerRoutesConfig',
+        appFileName: appComponentInfo.extensionlessFileName,
+        appSymbolName: appComponentInfo.symbolName,
+        moduleTypeSeparator,
         tpl: '',
     });
-    if (angularMajorVersion >= 19 && !options.serverRouting) {
+    if (angularMajorVersion === 19 && !options.serverRouting) {
         tree.delete((0, devkit_1.joinPathFragments)(sourceRoot, 'app/app.routes.server.ts'));
     }
 }

package/src/generators/setup-ssr/lib/generate-server-ts-config.js

@@ -9,6 +9,14 @@ function setServerTsConfigOptionsForApplicationBuilder(tree, options) {
     const { targets } = (0, devkit_1.readProjectConfiguration)(tree, options.project);
     const tsConfigPath = targets.build.options.tsConfig;
     (0, devkit_1.updateJson)(tree, tsConfigPath, (json) => {
+        json.compilerOptions ??= {};
+        const types = new Set(json.compilerOptions.types ?? []);
+        types.add('node');
+        json.compilerOptions.types = Array.from(types);
+        if (json.include?.includes('src/**/*.ts')) {
+            // server file is already included, no need to add it
+            return json;
+        }
         const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
         const files = new Set(json.files ?? []);
         files.add((0, devkit_1.joinPathFragments)('src', options.main));
@@ -19,10 +27,6 @@ function setServerTsConfigOptionsForApplicationBuilder(tree, options) {
             files.add((0, devkit_1.joinPathFragments)(options.serverFileName));
         }
         json.files = Array.from(files);
-        json.compilerOptions ??= {};
-        const types = new Set(json.compilerOptions.types ?? []);
-        types.add('node');
-        json.compilerOptions.types = Array.from(types);
         return json;
     });
 }
@@ -34,8 +38,11 @@ function generateTsConfigServerJsonForBrowserBuilder(tree, options) {
         !!packageJson.devDependencies?.['@angular/localize'];
     const baseFilesPath = (0, path_1.join)(__dirname, '..', 'files');
     let pathToFiles;
-    if (angularMajorVersion >= 19) {
-        pathToFiles = (0, path_1.join)(baseFilesPath, 'v19+', 'server-builder', 'root');
+    if (angularMajorVersion >= 20) {
+        pathToFiles = (0, path_1.join)(baseFilesPath, 'v20+', 'server-builder', 'root');
+    }
+    else if (angularMajorVersion === 19) {
+        pathToFiles = (0, path_1.join)(baseFilesPath, 'v19', 'server-builder', 'root');
     }
     else {
         pathToFiles = (0, path_1.join)(baseFilesPath, 'pre-v19', 'root');
@@ -46,4 +53,23 @@ function generateTsConfigServerJsonForBrowserBuilder(tree, options) {
         hasLocalizePackage,
         tpl: '',
     });
+    (0, devkit_1.updateJson)(tree, (0, devkit_1.joinPathFragments)(project.root, 'tsconfig.json'), (json) => {
+        json.references ??= [];
+        json.references.push({
+            path: (0, devkit_1.joinPathFragments)(project.root, 'tsconfig.server.json'),
+        });
+        return json;
+    });
+    if (angularMajorVersion >= 20) {
+        (0, devkit_1.updateJson)(tree, options.buildTargetTsConfigPath, (json) => {
+            const exclude = new Set(json.exclude ?? []);
+            exclude.add(`src/${options.main}`);
+            exclude.add(`src/${options.serverFileName}`);
+            if (options.standalone) {
+                exclude.add('src/app/app.config.server.ts');
+            }
+            json.exclude = Array.from(exclude);
+            return json;
+        });
+    }
 }

package/src/generators/setup-ssr/lib/normalize-options.js

@@ -6,13 +6,13 @@ const prompt_1 = require("@nx/devkit/src/generators/prompt");
 const ast_utils_1 = require("../../../utils/nx-devkit/ast-utils");
 const version_utils_1 = require("../../utils/version-utils");
 async function normalizeOptions(tree, options) {
-    const { targets } = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+    const { targets, root } = (0, devkit_1.readProjectConfiguration)(tree, options.project);
     const isUsingApplicationBuilder = targets.build.executor === '@angular-devkit/build-angular:application' ||
         targets.build.executor === '@angular/build:application' ||
         targets.build.executor === '@nx/angular:application';
     if (options.serverRouting === undefined && isUsingApplicationBuilder) {
         const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
-        if (angularMajorVersion >= 19) {
+        if (angularMajorVersion === 19) {
             options.serverRouting = await (0, prompt_1.promptWhenInteractive)({
                 type: 'confirm',
                 name: 'serverRouting',
@@ -21,7 +21,7 @@ async function normalizeOptions(tree, options) {
             }, { serverRouting: false }).then(({ serverRouting }) => serverRouting);
         }
         else {
-            options.serverRouting = false;
+            options.serverRouting = angularMajorVersion >= 20;
         }
     }
     else if (options.serverRouting !== undefined &&
@@ -42,5 +42,7 @@ async function normalizeOptions(tree, options) {
         hydration: options.hydration ?? true,
         serverRouting: options.serverRouting,
         isUsingApplicationBuilder,
+        buildTargetTsConfigPath: targets.build.options?.tsConfig ??
+            (0, devkit_1.joinPathFragments)(root, 'tsconfig.app.json'),
     };
 }

package/src/generators/setup-ssr/lib/update-project-config.js

@@ -21,6 +21,11 @@ function updateProjectConfigForApplicationBuilder(tree, options) {
         }
         else {
             outputPath = outputPath.base;
+            if (buildTarget.outputs && buildTarget.outputs.length > 0) {
+                buildTarget.outputs = buildTarget.outputs.map((output) => output === '{options.outputPath.base}'
+                    ? '{options.outputPath}'
+                    : output);
+            }
         }
     }
     const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);

package/src/generators/setup-ssr/lib/validate-options.js

@@ -8,8 +8,8 @@ function validateOptions(tree, options) {
     validateProject(tree, options.project);
     validateBuildTarget(tree, options.project);
     const { major: angularMajorVersion, version: angularVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
-    if (angularMajorVersion < 19 && options.serverRouting) {
-        throw new Error(`The "serverRouting" option is only supported in Angular versions >= 19.0.0. You are using Angular ${angularVersion}.`);
+    if (angularMajorVersion !== 19 && options.serverRouting !== undefined) {
+        throw new Error(`The "serverRouting" option is only supported in Angular versions 19.x.x. You are using Angular ${angularVersion}.`);
     }
 }
 function validateProject(tree, project) {

package/src/generators/setup-ssr/schema.d.ts

@@ -15,4 +15,5 @@ export interface Schema {
 
 export interface NormalizedGeneratorOptions extends Schema {
   isUsingApplicationBuilder: boolean;
+  buildTargetTsConfigPath: string;
 }

package/src/generators/setup-ssr/schema.json

@@ -53,7 +53,7 @@
       "default": true
     },
     "serverRouting": {
-      "description": "Creates a server application using the Server Routing and App Engine APIs (Developer Preview). _Note: this is only supported in Angular versions >= 19.0.0_.",
+      "description": "Creates a server application using the Server Routing and App Engine APIs for application using the `application` builder (Developer Preview). _Note: this is only supported in Angular versions 19.x.x_. From Angular 20 onwards, SSR will always enable server routing when using the `application` builder.",
       "type": "boolean"
     },
     "skipFormat": {

package/src/generators/utils/add-jest.js

@@ -3,10 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addJest = addJest;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../utils/versions");
+const version_utils_1 = require("./version-utils");
 async function addJest(tree, options) {
     if (!options.skipPackageJson) {
         process.env.npm_config_legacy_peer_deps ??= 'true';
-        (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { 'jest-preset-angular': versions_1.jestPresetAngularVersion }, undefined, true);
+        const pkgVersions = (0, version_utils_1.versions)(tree);
+        (0, devkit_1.addDependenciesToPackageJson)(tree, {
+            // TODO(leo): jest-preset-angular still needs this until https://github.com/thymikee/jest-preset-angular/pull/3079 is merged
+            '@angular/platform-browser-dynamic': pkgVersions.angularVersion,
+        }, { 'jest-preset-angular': pkgVersions.jestPresetAngularVersion }, undefined, true);
     }
     const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/jest', versions_1.nxVersion);
     await configurationGenerator(tree, {

package/src/generators/utils/app-components-info.d.ts

@@ -0,0 +1,9 @@
+import { type ProjectConfiguration, type Tree } from '@nx/devkit';
+export type ComponentMetadata = {
+    fileName: string;
+    extensionlessFileName: string;
+    path: string;
+    symbolName: string;
+};
+export declare function getAppComponentInfo(tree: Tree, componentFileSuffix: string, project: ProjectConfiguration): ComponentMetadata;
+export declare function getNxWelcomeComponentInfo(tree: Tree, componentFileSuffix: string, project: ProjectConfiguration): ComponentMetadata;

package/src/generators/utils/app-components-info.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAppComponentInfo = getAppComponentInfo;
+exports.getNxWelcomeComponentInfo = getNxWelcomeComponentInfo;
+const devkit_1 = require("@nx/devkit");
+const node_path_1 = require("node:path");
+const version_utils_1 = require("./version-utils");
+function getAppComponentInfo(tree, componentFileSuffix, project) {
+    return getComponentInfo(tree, 'app', componentFileSuffix, project);
+}
+function getNxWelcomeComponentInfo(tree, componentFileSuffix, project) {
+    return getComponentInfo(tree, 'nx-welcome', componentFileSuffix, project);
+}
+// TODO(leo): follow this up and improve it by using static analysis
+function getComponentInfo(tree, component, componentFileSuffix, project) {
+    let componentPath = (0, devkit_1.joinPathFragments)(project.sourceRoot, `app/${component}.component.ts`);
+    if (!tree.exists(componentPath)) {
+        componentPath = (0, devkit_1.joinPathFragments)(project.sourceRoot, `app/${component}.ts`);
+    }
+    if (!tree.exists(componentPath)) {
+        if (componentFileSuffix) {
+            componentPath = (0, devkit_1.joinPathFragments)(project.sourceRoot, `app/${component}${componentFileSuffix}.ts`);
+        }
+    }
+    if (!tree.exists(componentPath)) {
+        const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+        componentPath = (0, devkit_1.joinPathFragments)(project.sourceRoot, angularMajorVersion >= 20
+            ? `app/${component}.ts`
+            : `app/${component}.component.ts`);
+    }
+    const fileName = (0, node_path_1.basename)(componentPath);
+    const extensionlessFileName = fileName.slice(0, -3);
+    return {
+        fileName,
+        extensionlessFileName,
+        path: componentPath,
+        symbolName: (0, devkit_1.names)(extensionlessFileName).className,
+    };
+}

package/src/generators/utils/artifact-types.d.ts

@@ -0,0 +1,3 @@
+import { type Tree } from '@nx/devkit';
+export declare function getComponentType(tree: Tree): string | undefined;
+export declare function getModuleTypeSeparator(tree: Tree): '-' | '.';

package/src/generators/utils/artifact-types.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComponentType = getComponentType;
+exports.getModuleTypeSeparator = getModuleTypeSeparator;
+const devkit_1 = require("@nx/devkit");
+const version_utils_1 = require("./version-utils");
+function getComponentType(tree) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    let componentType = nxJson.generators?.['@nx/angular:component']?.type ??
+        nxJson.generators?.['@nx/angular']?.component?.type;
+    if (!componentType) {
+        const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+        if (angularMajorVersion < 20) {
+            componentType = 'component';
+        }
+    }
+    return componentType;
+}
+function getModuleTypeSeparator(tree) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    // We don't have a "module" generator but the @nx/angular collection extends
+    // from the @schematics/angular collection so the "module" generator is
+    // available there. We check for a generator default for each collection.
+    let typeSeparator = nxJson.generators?.['@nx/angular:module']?.typeSeparator ??
+        nxJson.generators?.['@nx/angular']?.module?.typeSeparator ??
+        nxJson.generators?.['@schematics/angular:module']?.typeSeparator ??
+        nxJson.generators?.['@schematics/angular']?.module?.typeSeparator;
+    if (!typeSeparator) {
+        const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+        typeSeparator = angularMajorVersion >= 20 ? '-' : '.';
+    }
+    return typeSeparator;
+}

package/src/generators/utils/ensure-angular-dependencies.js

@@ -24,13 +24,12 @@ function ensureAngularDependencies(tree) {
         dependencies['@angular/core'] = angularVersion;
         dependencies['@angular/forms'] = angularVersion;
         dependencies['@angular/platform-browser'] = angularVersion;
-        dependencies['@angular/platform-browser-dynamic'] = angularVersion;
         dependencies['@angular/router'] = angularVersion;
         dependencies.rxjs = rxjsVersion;
         dependencies.tslib = tsLibVersion;
         dependencies['zone.js'] = zoneJsVersion;
     }
-    const installedAngularDevkitVersion = (0, version_utils_1.getInstalledPackageVersion)(tree, '@angular-devkit/build-angular');
+    const installedAngularDevkitVersion = (0, version_utils_1.getInstalledAngularDevkitVersion)(tree);
     if (!installedAngularDevkitVersion) {
         /**
          * If `@angular-devkit/build-angular` is already installed, we assume the workspace
@@ -43,8 +42,12 @@ function ensureAngularDependencies(tree) {
     }
     // Ensure the `@nx/angular` peer dependencies are always installed.
     const angularDevkitVersion = installedAngularDevkitVersion ?? pkgVersions.angularDevkitVersion;
-    devDependencies['@angular-devkit/build-angular'] = angularDevkitVersion;
     devDependencies['@angular-devkit/schematics'] = angularDevkitVersion;
     devDependencies['@schematics/angular'] = angularDevkitVersion;
+    const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+    if (angularMajorVersion < 20) {
+        devDependencies['@angular/build'] = angularDevkitVersion;
+        devDependencies['@angular-devkit/build-angular'] = angularDevkitVersion;
+    }
     return (0, devkit_1.addDependenciesToPackageJson)(tree, dependencies, devDependencies, undefined, true);
 }

package/src/generators/utils/export-scam.d.ts

@@ -4,6 +4,7 @@ export type GenerationOptions = {
     filePath: string;
     name: string;
     projectName: string;
+    modulePath: string;
     export?: boolean;
     inlineScam?: boolean;
 };