@nx/angular 21.1.1 → 21.2.0-beta.1

package/src/generators/scam-directive/lib/normalize-options.js

@@ -3,19 +3,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeOptions = normalizeOptions;
 const devkit_1 = require("@nx/devkit");
 const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
+const artifact_types_1 = require("../../utils/artifact-types");
 const validations_1 = require("../../utils/validations");
+const version_utils_1 = require("../../utils/version-utils");
 async function normalizeOptions(tree, options) {
+    const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+    if (angularMajorVersion < 20) {
+        options.type ??= 'directive';
+    }
     const { artifactName: name, directory, fileName, filePath, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(tree, {
         name: options.name,
         path: options.path,
-        suffix: 'directive',
+        suffix: options.type,
         allowedFileExtensions: ['ts'],
         fileExtension: 'ts',
     });
     const { className } = (0, devkit_1.names)(name);
-    const { className: suffixClassName } = (0, devkit_1.names)('directive');
+    const suffixClassName = options.type ? (0, devkit_1.names)(options.type).className : '';
     const symbolName = `${className}${suffixClassName}`;
     (0, validations_1.validateClassName)(symbolName);
+    const moduleTypeSeparator = (0, artifact_types_1.getModuleTypeSeparator)(tree);
+    const modulePath = (0, devkit_1.joinPathFragments)(directory, `${name}${moduleTypeSeparator}module.ts`);
     return {
         ...options,
         export: options.export ?? true,
@@ -26,5 +34,6 @@ async function normalizeOptions(tree, options) {
         name,
         symbolName,
         projectName,
+        modulePath,
     };
 }

package/src/generators/scam-directive/schema.d.ts

@@ -6,6 +6,7 @@ export interface Schema {
   prefix?: string;
   selector?: string;
   export?: boolean;
+  type?: string;
   skipFormat?: boolean;
 }
 
@@ -18,4 +19,5 @@ export interface NormalizedSchema extends Schema {
   inlineScam: boolean;
   symbolName: string;
   projectName: string;
+  modulePath: string;
 }

package/src/generators/scam-directive/schema.json

@@ -10,11 +10,15 @@
       "command": "nx g @nx/angular:scam-directive mylib/src/lib/foo.directive.ts"
     },
     {
-      "description": "Generate a directive without providing the file extension. It results in the directive `FooDirective` at `mylib/src/lib/foo.directive.ts`",
+      "description": "Generate a directive without providing the file extension. It results in the directive `Foo` at `mylib/src/lib/foo.ts`",
       "command": "nx g @nx/angular:scam-directive mylib/src/lib/foo"
     },
     {
-      "description": "Generate a directive with the exported symbol different from the file name. It results in the directive `CustomDirective` at `mylib/src/lib/foo.directive.ts`",
+      "description": "Generate a directive with a given type/suffix. It results in the directive `FooDirective` at `mylib/src/lib/foo.directive.ts`",
+      "command": "nx g @nx/angular:scam-directive mylib/src/lib/foo --type=directive"
+    },
+    {
+      "description": "Generate a directive with the exported symbol different from the file name. It results in the directive `Custom` at `mylib/src/lib/foo.ts`",
       "command": "nx g @nx/angular:scam-directive mylib/src/lib/foo --name=custom"
     }
   ],
@@ -70,6 +74,10 @@
       "default": true,
       "x-priority": "important"
     },
+    "type": {
+      "type": "string",
+      "description": "Append a custom type to the directive's filename. It defaults to 'directive' for Angular versions below v20. For Angular v20 and above, no type is appended unless specified."
+    },
     "skipFormat": {
       "description": "Skip formatting files.",
       "type": "boolean",

package/src/generators/scam-pipe/lib/convert-pipe-to-scam.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.convertPipeToScam = convertPipeToScam;
-const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
 let tsModule;
@@ -22,8 +21,7 @@ function convertPipeToScam(tree, options) {
         tree.write(options.filePath, updatedPipeSource);
         return;
     }
-    const scamFilePath = (0, devkit_1.joinPathFragments)(options.directory, `${options.name}.module.ts`);
-    tree.write(scamFilePath, getModuleFileContent(options.symbolName, options.fileName));
+    tree.write(options.modulePath, getModuleFileContent(options.symbolName, options.fileName));
 }
 function getModuleFileContent(pipeClassName, pipeFileName) {
     return `import { NgModule } from '@angular/core';

package/src/generators/scam-pipe/lib/normalize-options.js

@@ -3,12 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeOptions = normalizeOptions;
 const devkit_1 = require("@nx/devkit");
 const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
+const artifact_types_1 = require("../../utils/artifact-types");
 const validations_1 = require("../../utils/validations");
+const version_utils_1 = require("../../utils/version-utils");
 async function normalizeOptions(tree, options) {
+    const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+    options.typeSeparator ??= angularMajorVersion < 20 ? '.' : '-';
     const { artifactName: name, directory, fileName, filePath, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(tree, {
         name: options.name,
         path: options.path,
         suffix: 'pipe',
+        suffixSeparator: options.typeSeparator,
         allowedFileExtensions: ['ts'],
         fileExtension: 'ts',
     });
@@ -16,6 +21,8 @@ async function normalizeOptions(tree, options) {
     const { className: suffixClassName } = (0, devkit_1.names)('pipe');
     const symbolName = `${className}${suffixClassName}`;
     (0, validations_1.validateClassName)(symbolName);
+    const moduleTypeSeparator = (0, artifact_types_1.getModuleTypeSeparator)(tree);
+    const modulePath = (0, devkit_1.joinPathFragments)(directory, `${name}${moduleTypeSeparator}module.ts`);
     return {
         ...options,
         export: options.export ?? true,
@@ -26,5 +33,6 @@ async function normalizeOptions(tree, options) {
         name,
         symbolName,
         projectName,
+        modulePath,
     };
 }

package/src/generators/scam-pipe/schema.d.ts

@@ -4,6 +4,7 @@ export interface Schema {
   skipTests?: boolean;
   inlineScam?: boolean;
   export?: boolean;
+  typeSeparator?: string;
   skipFormat?: boolean;
 }
 
@@ -16,4 +17,5 @@ export interface NormalizedSchema extends Schema {
   inlineScam: boolean;
   projectName: string;
   symbolName: string;
+  modulePath: string;
 }

package/src/generators/scam-pipe/schema.json

@@ -51,6 +51,11 @@
       "default": true,
       "x-priority": "important"
     },
+    "typeSeparator": {
+      "type": "string",
+      "enum": ["-", "."],
+      "description": "The separator character to use before the type within the generated file's name. For example, if you set the option to `.`, the file will be named `example.pipe.ts`. It defaults to '-' for Angular v20+. For versions below v20, it defaults to '.'."
+    },
     "skipFormat": {
       "description": "Skip formatting files.",
       "type": "boolean",

package/src/generators/setup-mf/files/entry-module-files/{entry.module.ts__tmpl__ → __entryModuleFileName__.ts__tmpl__}

@@ -2,17 +2,17 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';<% if(routing) { %>
 import { RouterModule } from '@angular/router';<% } %>
 
-import { RemoteEntryComponent } from './entry.component';
-import { NxWelcomeComponent } from './nx-welcome.component';<% if(routing) { %>
+import { RemoteEntry<%= componentType %> } from './entry<%= componentFileSuffix %>';
+import { <%= nxWelcomeSymbolName %> } from './<%= nxWelcomeFileName %>';<% if(routing) { %>
 import { remoteRoutes } from './entry.routes';<% } %>
 
 @NgModule({
-  declarations: [RemoteEntryComponent, NxWelcomeComponent],
+  declarations: [RemoteEntry<%= componentType %>, <%= nxWelcomeSymbolName %>],
   imports: [
     CommonModule,<% if(routing) { %>
     RouterModule.forChild(remoteRoutes),<% } %>
   ],
   providers: [],<% if(!routing) { %>
-  exports: [RemoteEntryComponent],<% } %>
+  exports: [RemoteEntry<%= componentType %>],<% } %>
 })
 export class RemoteEntryModule {}

package/src/generators/setup-mf/files/entry-module-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/entry-module-files/{entry.component.ts__tmpl__ → entry__componentFileSuffix__.ts__tmpl__}

@@ -7,4 +7,4 @@ import { Component } from '@angular/core';
   selector: '<%= appName %>-entry',
   template: `<nx-welcome></nx-welcome>`<% } %>
 })
-export class RemoteEntryComponent {}
+export class RemoteEntry<%= componentType %> {}

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;