@nx/angular 21.1.2 → 21.2.0-beta.2

package/src/generators/setup-mf/files/host-files/__appFileName__.spec.ts__tmpl__

@@ -0,0 +1,43 @@
+import { fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { <%= appSymbolName %> } from './<%= appFileName %>';
+import { <%= nxWelcomeSymbolName %> } from './<%= nxWelcomeFileName %>';
+import { Router, RouterModule } from '@angular/router';
+
+describe('<%= appSymbolName %>', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterModule.forRoot([
+          { path: '', component: <%= nxWelcomeSymbolName %> },
+        ]),<% if (standalone) { %>
+        <%= appSymbolName %>,
+        <%= nxWelcomeSymbolName %>,<% } %>
+      ],<% if (!standalone) { %>
+      declarations: [<%= appSymbolName %>, <%= nxWelcomeSymbolName %>],<% } %>
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(<%= appSymbolName %>);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title '<%= appName %>'`, () => {
+    const fixture = TestBed.createComponent(<%= appSymbolName %>);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('<%= appName %>');
+  });
+
+  it('should render title', fakeAsync(() => {
+    const fixture = TestBed.createComponent(<%= appSymbolName %>);
+    const router = TestBed.inject(Router);
+    fixture.ngZone?.run(() => router.navigate(['']));
+    tick();
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain(
+      'Welcome <%= appName %>'
+    );
+  }));
+});

package/src/generators/setup-mf/files/standalone-entry-component-files/entry.routes.ts__tmpl__

@@ -1,4 +1,4 @@
 import { Route } from '@angular/router';
-import { RemoteEntryComponent } from './entry.component';
+import { RemoteEntry<%= componentType %> } from './entry<%= componentFileSuffix %>';
 
-export const remoteRoutes: Route[] = [{ path: '', component: RemoteEntryComponent }];
+export const remoteRoutes: Route[] = [{ path: '', component: RemoteEntry<%= componentType %> }];

package/src/generators/setup-mf/files/standalone-entry-component-files/{entry.component.ts__tmpl__ → entry__componentFileSuffix__.ts__tmpl__}

@@ -1,13 +1,13 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { NxWelcomeComponent } from './nx-welcome.component';
+import { <%= nxWelcomeSymbolName %> } from './<%= nxWelcomeFileName %>';
 
 @Component({<% if (setStandaloneTrue) { %>
   standalone: true,<% } %>
-  imports: [CommonModule, NxWelcomeComponent],<% if (prefix) { %>
+  imports: [CommonModule, <%= nxWelcomeSymbolName %>],<% if (prefix) { %>
   selector: '<%= prefix %>-<%= appName %>-entry',
   template: `<<%= prefix %>-nx-welcome></<%= prefix %>-nx-welcome>`<% } else { %>
   selector: '<%= appName %>-entry',
   template: `<nx-welcome></nx-welcome>`<% } %>
 })
-export class RemoteEntryComponent {}
+export class RemoteEntry<%= componentType %> {}

package/src/generators/setup-mf/files/ts-webpack/module-federation.config.ts__tmpl__

@@ -17,7 +17,7 @@ const config: ModuleFederationConfig = {
   remotes: [<% if (federationType === 'static') { remotes.forEach(function(remote) { %>'<%= remote.remoteName %>',<% }); } %>]<% } %><% if(type === 'remote') { %>
   exposes: {<% if(standalone) { %>
     './Routes': '<%= projectRoot %>/src/app/remote-entry/entry.routes.ts',<% } else { %>
-    './Module': '<%= projectRoot %>/src/app/remote-entry/entry.module.ts',<% } %>
+    './Module': '<%= projectRoot %>/src/app/remote-entry/<%= entryModuleFileName %>.ts',<% } %>
   },<% } %>
 };
 

package/src/generators/setup-mf/files/ts-webpack/tsconfig.lint.json__tmpl__

@@ -5,7 +5,7 @@
   },
   "include": [
     "src/main.ts",
-    <% if(type === "remote") { %> "src/remote-entry/<% if(standalone) { %>entry.routes.ts", <% } else { %> entry.module.ts", <% } } %>
+    <% if(type === "remote") { %> "src/remote-entry/<% if(standalone) { %>entry.routes.ts",<% } else { %><%= entryModuleFileName %>.ts",<% } } %>
     "webpack.config.ts",
     "webpack.prod.config.ts"
   ]

package/src/generators/setup-mf/files/webpack/module-federation.config.js__tmpl__

@@ -18,6 +18,6 @@ module.exports = {
   remotes: [<% if (federationType === 'static') { remotes.forEach(function(remote) { %>'<%= remote.remoteName %>',<% }); } %>]<% } %><% if(type === 'remote') { %>
   exposes: {<% if(standalone) { %>
     './Routes': '<%= projectRoot %>/src/app/remote-entry/entry.routes.ts',<% } else { %>
-    './Module': '<%= projectRoot %>/src/app/remote-entry/entry.module.ts',<% } %>
+    './Module': '<%= projectRoot %>/src/app/remote-entry/<%= entryModuleFileName %>.ts',<% } %>
   },<% } %>
 };

package/src/generators/setup-mf/lib/add-remote-entry.d.ts

@@ -1,3 +1,3 @@
 import type { Tree } from '@nx/devkit';
-import type { Schema } from '../schema';
-export declare function addRemoteEntry(tree: Tree, { appName, routing, prefix, standalone }: Schema, appRoot: string): void;
+import type { NormalizedOptions } from '../schema';
+export declare function addRemoteEntry(tree: Tree, options: NormalizedOptions, appRoot: string): void;

package/src/generators/setup-mf/lib/add-remote-entry.js

@@ -4,8 +4,9 @@ exports.addRemoteEntry = addRemoteEntry;
 const devkit_1 = require("@nx/devkit");
 const route_utils_1 = require("../../../utils/nx-devkit/route-utils");
 const version_utils_1 = require("../../utils/version-utils");
-function addRemoteEntry(tree, { appName, routing, prefix, standalone }, appRoot) {
+function addRemoteEntry(tree, options, appRoot) {
     const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+    const { appName, routing, prefix, standalone, componentType, componentFileSuffix, nxWelcomeComponentInfo, entryModuleFileName, } = options;
     (0, devkit_1.generateFiles)(tree, standalone
         ? (0, devkit_1.joinPathFragments)(__dirname, '../files/standalone-entry-component-files')
         : (0, devkit_1.joinPathFragments)(__dirname, '../files/entry-module-files'), `${appRoot}/src/app/remote-entry`, {
@@ -13,14 +14,19 @@ function addRemoteEntry(tree, { appName, routing, prefix, standalone }, appRoot)
         appName,
         routing,
         prefix,
-        // Angular v19 or higher defaults to true, while v18 or lower defaults to false
+        // Angular v19 or higher defaults to true, while lower versions default to false
         setStandaloneFalse: angularMajorVersion >= 19,
         setStandaloneTrue: angularMajorVersion < 19,
+        componentType,
+        componentFileSuffix,
+        entryModuleFileName,
+        nxWelcomeFileName: nxWelcomeComponentInfo.extensionlessFileName,
+        nxWelcomeSymbolName: nxWelcomeComponentInfo.symbolName,
     });
     if (standalone && routing) {
         (0, route_utils_1.addRoute)(tree, (0, devkit_1.joinPathFragments)(appRoot, 'src/app/app.routes.ts'), `{path: '', loadChildren: () => import('./remote-entry/entry.routes').then(m => m.remoteRoutes)}`);
     }
     else if (routing) {
-        (0, route_utils_1.addRoute)(tree, (0, devkit_1.joinPathFragments)(appRoot, 'src/app/app.routes.ts'), `{ path: '', loadChildren: () => import('./remote-entry/entry.module').then(m => m.RemoteEntryModule) }`);
+        (0, route_utils_1.addRoute)(tree, (0, devkit_1.joinPathFragments)(appRoot, 'src/app/app.routes.ts'), `{ path: '', loadChildren: () => import('./remote-entry/${entryModuleFileName}').then(m => m.RemoteEntryModule) }`);
     }
 }

package/src/generators/setup-mf/lib/add-remote-to-host.js

@@ -105,7 +105,17 @@ function addLazyLoadedRouteToHostAppModule(tree, options, hostFederationType) {
     path: '${options.appName}',
     loadChildren: () => ${routeToAdd}.then(m => m!.${exportedRemote})
     }`);
-    const pathToAppComponentTemplate = (0, devkit_1.joinPathFragments)(hostAppConfig.sourceRoot, 'app/app.component.html');
+    let pathToAppComponentTemplate = (0, devkit_1.joinPathFragments)(hostAppConfig.sourceRoot, 'app/app.component.html');
+    const candidatePaths = [
+        pathToAppComponentTemplate,
+        (0, devkit_1.joinPathFragments)(hostAppConfig.sourceRoot, 'app/app.html'),
+    ];
+    for (const path of candidatePaths) {
+        if (tree.exists(path)) {
+            pathToAppComponentTemplate = path;
+            break;
+        }
+    }
     const appComponent = tree.read(pathToAppComponentTemplate, 'utf-8');
     if (appComponent.includes(`<ul class="remote-menu">`) &&
         appComponent.includes('</ul>')) {

package/src/generators/setup-mf/lib/fix-bootstrap.d.ts

@@ -1,3 +1,3 @@
 import { type Tree } from '@nx/devkit';
-import type { Schema } from '../schema';
-export declare function fixBootstrap(tree: Tree, appRoot: string, options: Schema): void;
+import type { NormalizedOptions } from '../schema';
+export declare function fixBootstrap(tree: Tree, appRoot: string, options: NormalizedOptions): void;

package/src/generators/setup-mf/lib/fix-bootstrap.js

@@ -6,7 +6,7 @@ function fixBootstrap(tree, appRoot, options) {
     const mainFilePath = (0, devkit_1.joinPathFragments)(appRoot, 'src/main.ts');
     const bootstrapCode = tree.read(mainFilePath, 'utf-8');
     if (options.standalone && options.mfType === 'remote') {
-        tree.write(`${appRoot}/src/bootstrap.ts`, standaloneBootstrapCode());
+        tree.write(`${appRoot}/src/bootstrap.ts`, standaloneBootstrapCode(options.componentType, options.componentFileSuffix));
     }
     else {
         tree.write((0, devkit_1.joinPathFragments)(appRoot, 'src/bootstrap.ts'), bootstrapCode);
@@ -30,11 +30,11 @@ fetch('${manifestPath}')
         tree.write(mainFilePath, fetchMFManifestCode);
     }
 }
-const standaloneBootstrapCode = () => `import { bootstrapApplication } from '@angular/platform-browser';
+const standaloneBootstrapCode = (componentType, componentFileSuffix) => `import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
-import { RemoteEntryComponent } from './app/remote-entry/entry.component';
+import { RemoteEntry${componentType} } from './app/remote-entry/entry${componentFileSuffix}';
 
-bootstrapApplication(RemoteEntryComponent, appConfig).catch((err) =>
+bootstrapApplication(RemoteEntry${componentType}, appConfig).catch((err) =>
   console.error(err)
 );
 `;

package/src/generators/setup-mf/lib/generate-config.d.ts

@@ -1,6 +1,6 @@
 import type { Tree } from '@nx/devkit';
-import type { Schema } from '../schema';
-export declare function generateWebpackConfig(tree: Tree, options: Schema, appRoot: string, remotesWithPorts: {
+import type { NormalizedOptions } from '../schema';
+export declare function generateWebpackConfig(tree: Tree, options: NormalizedOptions, appRoot: string, remotesWithPorts: {
     remoteName: string;
     port: number;
 }[]): void;

package/src/generators/setup-mf/lib/generate-config.js

@@ -23,6 +23,7 @@ function generateWebpackConfig(tree, options, appRoot, remotesWithPorts) {
         remotes: remotesWithPorts ?? [],
         projectRoot: appRoot,
         standalone: options.standalone,
+        entryModuleFileName: options.entryModuleFileName,
     });
     if (!options.setParserOptionsProject) {
         tree.delete((0, devkit_1.joinPathFragments)(appRoot, 'tsconfig.lint.json'));

package/src/generators/setup-mf/lib/normalize-options.d.ts

@@ -1,3 +1,3 @@
-import type { Tree } from '@nx/devkit';
+import { type Tree } from '@nx/devkit';
 import type { NormalizedOptions, Schema } from '../schema';
 export declare function normalizeOptions(tree: Tree, options: Schema): NormalizedOptions;

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

@@ -1,13 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeOptions = normalizeOptions;
+const devkit_1 = require("@nx/devkit");
+const app_components_info_1 = require("../../utils/app-components-info");
+const artifact_types_1 = require("../../utils/artifact-types");
 const project_1 = require("../../utils/project");
 function normalizeOptions(tree, options) {
+    const componentType = (0, artifact_types_1.getComponentType)(tree);
+    const componentFileSuffix = componentType ? `.${componentType}` : '';
+    const moduleTypeSeparator = (0, artifact_types_1.getModuleTypeSeparator)(tree);
+    const entryModuleFileName = `entry${moduleTypeSeparator}module`;
+    const project = (0, devkit_1.readProjectConfiguration)(tree, options.appName);
     return {
         ...options,
         typescriptConfiguration: options.typescriptConfiguration ?? true,
         federationType: options.federationType ?? 'static',
         prefix: options.prefix ?? (0, project_1.getProjectPrefix)(tree, options.appName) ?? 'app',
         standalone: options.standalone ?? true,
+        componentType: componentType ? (0, devkit_1.names)(componentType).className : '',
+        componentFileSuffix,
+        entryModuleFileName,
+        appComponentInfo: (0, app_components_info_1.getAppComponentInfo)(tree, componentFileSuffix, project),
+        nxWelcomeComponentInfo: (0, app_components_info_1.getNxWelcomeComponentInfo)(tree, componentFileSuffix, project),
     };
 }

package/src/generators/setup-mf/lib/remove-dead-code-from-remote.d.ts

@@ -1,3 +1,3 @@
 import type { Tree } from '@nx/devkit';
-import { Schema } from '../schema';
-export declare function removeDeadCodeFromRemote(tree: Tree, options: Schema): void;
+import type { NormalizedOptions } from '../schema';
+export declare function removeDeadCodeFromRemote(tree: Tree, options: NormalizedOptions): void;

package/src/generators/setup-mf/lib/remove-dead-code-from-remote.js

@@ -5,46 +5,50 @@ const devkit_1 = require("@nx/devkit");
 function removeDeadCodeFromRemote(tree, options) {
     const projectName = options.appName;
     const project = (0, devkit_1.readProjectConfiguration)(tree, projectName);
+    const { appComponentInfo, nxWelcomeComponentInfo, entryModuleFileName } = options;
     ['css', 'less', 'scss', 'sass'].forEach((style) => {
-        const pathToComponentStyle = (0, devkit_1.joinPathFragments)(project.sourceRoot, `app/app.component.${style}`);
+        const pathToComponentStyle = (0, devkit_1.joinPathFragments)(project.sourceRoot, `app/${appComponentInfo.extensionlessFileName}.${style}`);
         if (tree.exists(pathToComponentStyle)) {
             tree.delete(pathToComponentStyle);
         }
     });
-    tree.rename((0, devkit_1.joinPathFragments)(project.sourceRoot, 'app/nx-welcome.component.ts'), (0, devkit_1.joinPathFragments)(project.sourceRoot, 'app/remote-entry/nx-welcome.component.ts'));
-    tree.delete((0, devkit_1.joinPathFragments)(project.sourceRoot, 'app/app.component.spec.ts'));
-    tree.delete((0, devkit_1.joinPathFragments)(project.sourceRoot, 'app/app.component.html'));
-    const pathToAppComponent = (0, devkit_1.joinPathFragments)(project.sourceRoot, 'app/app.component.ts');
+    tree.rename(nxWelcomeComponentInfo.path, (0, devkit_1.joinPathFragments)(project.sourceRoot, `app/remote-entry/${nxWelcomeComponentInfo.fileName}`));
+    tree.delete((0, devkit_1.joinPathFragments)(project.sourceRoot, `app/${appComponentInfo.extensionlessFileName}.spec.ts`));
+    tree.delete((0, devkit_1.joinPathFragments)(project.sourceRoot, `app/${appComponentInfo.extensionlessFileName}.html`));
     if (!options.standalone) {
-        const componentContents = tree.read(pathToAppComponent, 'utf-8');
+        const componentContents = tree.read(appComponentInfo.path, 'utf-8');
         const isInlineTemplate = !componentContents.includes('templateUrl');
         const component = componentContents.split(isInlineTemplate ? 'template' : 'templateUrl')[0] +
             `template: '<router-outlet></router-outlet>'
 
 })
-export class AppComponent {}`;
-        tree.write(pathToAppComponent, component);
-        tree.write((0, devkit_1.joinPathFragments)(project.sourceRoot, 'app/app.module.ts'), `import { NgModule } from '@angular/core';
+export class ${appComponentInfo.symbolName} {}`;
+        tree.write(appComponentInfo.path, component);
+        let modulePath = (0, devkit_1.joinPathFragments)(project.sourceRoot, 'app/app.module.ts');
+        if (!tree.exists(modulePath)) {
+            modulePath = (0, devkit_1.joinPathFragments)(project.sourceRoot, 'app/app-module.ts');
+        }
+        tree.write(modulePath, `import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
-import { AppComponent } from './app.component';
+import { ${appComponentInfo.symbolName} } from './${appComponentInfo.extensionlessFileName}';
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [${appComponentInfo.symbolName}],
   imports: [
     BrowserModule,
     RouterModule.forRoot([{
       path: '',
-      loadChildren: () => import('./remote-entry/entry.module').then(m => m.RemoteEntryModule)
+      loadChildren: () => import('./remote-entry/${entryModuleFileName}').then(m => m.RemoteEntryModule)
     }], { initialNavigation: 'enabledBlocking' }),
   ],
   providers: [],
-  bootstrap: [AppComponent],
+  bootstrap: [${appComponentInfo.symbolName}],
 })
 export class AppModule {}`);
     }
     else {
-        tree.delete(pathToAppComponent);
+        tree.delete(appComponentInfo.path);
         const pathToIndexHtml = project.targets.build.options.index;
         const indexContents = tree.read(pathToIndexHtml, 'utf-8');
         const rootSelectorRegex = new RegExp(`${options.prefix || 'app'}-root`, 'ig');

package/src/generators/setup-mf/lib/setup-host-if-dynamic.js

@@ -2,16 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupHostIfDynamic = setupHostIfDynamic;
 const devkit_1 = require("@nx/devkit");
-const version_utils_1 = require("../../utils/version-utils");
 function setupHostIfDynamic(tree, options) {
     if (options.federationType === 'static') {
         return;
     }
-    const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
     const project = (0, devkit_1.readProjectConfiguration)(tree, options.appName);
-    const pathToMFManifest = angularMajorVersion >= 18
-        ? (0, devkit_1.joinPathFragments)(project.root, 'public/module-federation.manifest.json')
-        : (0, devkit_1.joinPathFragments)(project.sourceRoot, 'assets/module-federation.manifest.json');
+    const pathToMFManifest = (0, devkit_1.joinPathFragments)(project.root, 'public/module-federation.manifest.json');
     if (!tree.exists(pathToMFManifest)) {
         tree.write(pathToMFManifest, '{}');
     }

package/src/generators/setup-mf/lib/setup-tspath-for-remote.d.ts

@@ -1,3 +1,3 @@
 import type { Tree } from '@nx/devkit';
-import type { Schema } from '../schema';
-export declare function setupTspathForRemote(tree: Tree, options: Schema): void;
+import type { NormalizedOptions } from '../schema';
+export declare function setupTspathForRemote(tree: Tree, options: NormalizedOptions): void;

package/src/generators/setup-mf/lib/setup-tspath-for-remote.js

@@ -7,7 +7,7 @@ function setupTspathForRemote(tree, options) {
     const project = (0, devkit_1.readProjectConfiguration)(tree, options.appName);
     const exportPath = options.standalone
         ? `./src/app/remote-entry/entry.routes.ts`
-        : `./src/app/remote-entry/entry.module.ts`;
+        : `./src/app/remote-entry/${options.entryModuleFileName}.ts`;
     const exportName = options.standalone ? 'Routes' : 'Module';
     (0, js_1.addTsConfigPath)(tree, `${options.appName.replace(/-/g, '_')}/${exportName}`, [
         (0, devkit_1.joinPathFragments)(project.root, exportPath),

package/src/generators/setup-mf/lib/update-host-app-routes.d.ts

@@ -1,3 +1,3 @@
 import { type Tree } from '@nx/devkit';
-import type { Schema } from '../schema';
-export declare function updateHostAppRoutes(tree: Tree, options: Schema): void;
+import type { NormalizedOptions } from '../schema';
+export declare function updateHostAppRoutes(tree: Tree, options: NormalizedOptions): void;

package/src/generators/setup-mf/lib/update-host-app-routes.js

@@ -3,31 +3,34 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateHostAppRoutes = updateHostAppRoutes;
 const devkit_1 = require("@nx/devkit");
 const route_utils_1 = require("../../../utils/nx-devkit/route-utils");
-const version_utils_1 = require("../../utils/version-utils");
 function updateHostAppRoutes(tree, options) {
     const { sourceRoot } = (0, devkit_1.readProjectConfiguration)(tree, options.appName);
-    tree.write((0, devkit_1.joinPathFragments)(sourceRoot, 'app/app.component.html'), `<ul class="remote-menu">
+    const { appComponentInfo, nxWelcomeComponentInfo } = options;
+    tree.write((0, devkit_1.joinPathFragments)(sourceRoot, 'app', `${appComponentInfo.extensionlessFileName}.html`), `<ul class="remote-menu">
 <li><a routerLink="/">Home</a></li>
 </ul>
 <router-outlet></router-outlet>
 `);
     let pathToHostRootRoutingFile = (0, devkit_1.joinPathFragments)(sourceRoot, 'app/app.routes.ts');
-    let hostRootRoutingFile = tree.read(pathToHostRootRoutingFile, 'utf-8');
-    if (!hostRootRoutingFile) {
+    if (!tree.exists(pathToHostRootRoutingFile)) {
         pathToHostRootRoutingFile = (0, devkit_1.joinPathFragments)(sourceRoot, 'app/app-routing.module.ts');
-        hostRootRoutingFile = tree.read(pathToHostRootRoutingFile, 'utf-8');
+    }
+    if (!tree.exists(pathToHostRootRoutingFile)) {
+        pathToHostRootRoutingFile = (0, devkit_1.joinPathFragments)(sourceRoot, 'app/app-routing-module.ts');
     }
     (0, route_utils_1.addRoute)(tree, pathToHostRootRoutingFile, `{
       path: '',
-      component: NxWelcomeComponent
+      component: ${nxWelcomeComponentInfo.symbolName}
     }`);
-    tree.write(pathToHostRootRoutingFile, `import { NxWelcomeComponent } from './nx-welcome.component';
+    tree.write(pathToHostRootRoutingFile, `import { ${nxWelcomeComponentInfo.symbolName} } from './${nxWelcomeComponentInfo.extensionlessFileName}';
 ${tree.read(pathToHostRootRoutingFile, 'utf-8')}`);
-    const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
     (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/host-files'), (0, devkit_1.joinPathFragments)(sourceRoot, 'app'), {
         appName: options.appName,
         standalone: options.standalone,
-        useRouterTestingModule: angularMajorVersion < 18,
+        appFileName: appComponentInfo.extensionlessFileName,
+        appSymbolName: appComponentInfo.symbolName,
+        nxWelcomeFileName: nxWelcomeComponentInfo.extensionlessFileName,
+        nxWelcomeSymbolName: nxWelcomeComponentInfo.symbolName,
         tmpl: '',
     });
 }

package/src/generators/setup-mf/lib/update-tsconfig.d.ts

@@ -1,3 +1,3 @@
 import type { Tree } from '@nx/devkit';
-import type { Schema } from '../schema';
-export declare function updateTsConfig(tree: Tree, schema: Schema): void;
+import type { NormalizedOptions } from '../schema';
+export declare function updateTsConfig(tree: Tree, options: NormalizedOptions): void;

package/src/generators/setup-mf/lib/update-tsconfig.js

@@ -2,16 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateTsConfig = updateTsConfig;
 const devkit_1 = require("@nx/devkit");
-function updateTsConfig(tree, schema) {
-    const { root } = (0, devkit_1.readProjectConfiguration)(tree, schema.appName);
+function updateTsConfig(tree, options) {
+    const { root } = (0, devkit_1.readProjectConfiguration)(tree, options.appName);
     (0, devkit_1.updateJson)(tree, (0, devkit_1.joinPathFragments)(root, `tsconfig.app.json`), (json) => {
         json.compilerOptions ??= {};
         json.compilerOptions.target = 'ES2020';
-        if (schema.mfType === 'remote') {
+        if (options.mfType === 'remote') {
             json.files ??= [];
-            json.files.push(schema.standalone
+            json.files.push(options.standalone
                 ? 'src/app/remote-entry/entry.routes.ts'
-                : 'src/app/remote-entry/entry.module.ts');
+                : `src/app/remote-entry/${options.entryModuleFileName}.ts`);
         }
         return json;
     });

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

@@ -1,3 +1,5 @@
+import type { ComponentMetadata } from '../utils/app-components-info';
+
 type FederationType = 'static' | 'dynamic';
 
 export interface Schema {
@@ -21,4 +23,9 @@ export interface Schema {
 export interface NormalizedOptions extends Schema {
   federationType: FederationType;
   prefix: string | undefined;
+  componentType: string;
+  componentFileSuffix: string;
+  entryModuleFileName: string;
+  appComponentInfo: ComponentMetadata;
+  nxWelcomeComponentInfo: ComponentMetadata;
 }

package/src/generators/setup-mf/setup-mf.d.ts

@@ -1,4 +1,4 @@
-import { type Tree } from '@nx/devkit';
+import { type GeneratorCallback, type Tree } from '@nx/devkit';
 import type { Schema } from './schema';
-export declare function setupMf(tree: Tree, rawOptions: Schema): Promise<() => void>;
+export declare function setupMf(tree: Tree, rawOptions: Schema): Promise<GeneratorCallback>;
 export default setupMf;

package/src/generators/setup-mf/setup-mf.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupMf = setupMf;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../utils/versions");
+const version_utils_1 = require("../utils/version-utils");
 const lib_1 = require("./lib");
 async function setupMf(tree, rawOptions) {
     const options = (0, lib_1.normalizeOptions)(tree, rawOptions);
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.appName);
-    let installTask = () => { };
+    const tasks = [];
     if (options.mfType === 'remote') {
         (0, lib_1.addRemoteToHost)(tree, {
             appName: options.appName,
@@ -19,13 +20,13 @@ async function setupMf(tree, rawOptions) {
         (0, lib_1.removeDeadCodeFromRemote)(tree, options);
         (0, lib_1.setupTspathForRemote)(tree, options);
         if (!options.skipPackageJson) {
-            installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {
+            tasks.push((0, devkit_1.addDependenciesToPackageJson)(tree, {
                 '@module-federation/enhanced': versions_1.moduleFederationEnhancedVersion,
             }, {
                 '@nx/web': versions_1.nxVersion,
                 '@nx/webpack': versions_1.nxVersion,
                 '@nx/module-federation': versions_1.nxVersion,
-            });
+            }));
         }
     }
     const remotesWithPorts = (0, lib_1.getRemotesWithPorts)(tree, options);
@@ -45,11 +46,11 @@ async function setupMf(tree, rawOptions) {
             });
         }
         if (!options.skipPackageJson) {
-            installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
+            tasks.push((0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
                 '@nx/webpack': versions_1.nxVersion,
                 '@module-federation/enhanced': versions_1.moduleFederationEnhancedVersion,
                 '@nx/module-federation': versions_1.nxVersion,
-            });
+            }));
         }
     }
     (0, lib_1.fixBootstrap)(tree, projectConfig.root, options);
@@ -64,10 +65,19 @@ async function setupMf(tree, rawOptions) {
     if (!options.skipE2E) {
         (0, lib_1.addCypressOnErrorWorkaround)(tree, options);
     }
+    if (!options.skipPackageJson) {
+        const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+        if (angularMajorVersion >= 20) {
+            const angularDevkitVersion = (0, version_utils_1.getInstalledAngularDevkitVersion)(tree) ??
+                (0, version_utils_1.versions)(tree).angularDevkitVersion;
+            // the executors used by MF require @angular-devkit/build-angular
+            tasks.push((0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@angular-devkit/build-angular': angularDevkitVersion }, undefined, true));
+        }
+    }
     // format files
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }
-    return installTask;
+    return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 exports.default = setupMf;

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

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

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { provideServerRendering, withRoutes } from '@angular/ssr';
+import { <%= appSymbolName %> } from './<%= appFileName %>';
+import { AppModule } from './app<%= moduleTypeSeparator %>module';
+import { serverRoutes } from './app.routes.server';
+
+@NgModule({
+  imports: [AppModule],
+  providers: [provideServerRendering(withRoutes(serverRoutes))],
+  bootstrap: [<%= appSymbolName %>],
+})
+export class <%= rootModuleClassName %> {}

package/src/generators/setup-ssr/files/v20+/application-builder/ngmodule-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+/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);