@nx/angular 21.1.2 → 21.2.0-beta.2

package/src/generators/ng-add/migrators/projects/app.migrator.js

@@ -11,6 +11,7 @@ const project_migrator_1 = require("./project.migrator");
 const supportedTargets = {
     build: {
         builders: [
+            '@angular/build:application',
             '@angular-devkit/build-angular:application',
             '@angular-devkit/build-angular:browser',
             '@angular-devkit/build-angular:browser-esbuild',
@@ -23,14 +24,24 @@ const supportedTargets = {
             '@cypress/schematic:cypress',
         ],
     },
-    i18n: { builders: ['@angular-devkit/build-angular:extract-i18n'] },
+    i18n: {
+        builders: [
+            '@angular/build:extract-i18n',
+            '@angular-devkit/build-angular:extract-i18n',
+        ],
+    },
     prerender: {
         builders: [
             '@nguniversal/builders:prerender',
             '@angular-devkit/build-angular:prerender',
         ],
     },
-    serve: { builders: ['@angular-devkit/build-angular:dev-server'] },
+    serve: {
+        builders: [
+            '@angular/build:dev-server',
+            '@angular-devkit/build-angular:dev-server',
+        ],
+    },
     server: { builders: ['@angular-devkit/build-angular:server'] },
     serveSsr: {
         builders: [
@@ -137,10 +148,34 @@ class AppMigrator extends project_migrator_1.ProjectMigrator {
         this.updateTsConfigFileUsedByBuildTarget(rootTsConfigFile, projectOffsetFromRoot);
         this.updateTsConfigFileUsedByServerTarget(projectOffsetFromRoot);
     }
-    convertBuildOptions(buildOptions) {
-        buildOptions.outputPath =
-            buildOptions.outputPath &&
-                (0, devkit_1.joinPathFragments)('dist', this.project.newRoot, this.targetNames.server ? 'browser' : '');
+    convertBuildOptions(buildOptions, target, updateOutputs = true) {
+        const { executor } = target;
+        const isApplicationBuilder = executor === '@angular/build:application' ||
+            executor === '@angular-devkit/build-angular:application';
+        if (updateOutputs) {
+            if (buildOptions.outputPath) {
+                if (isApplicationBuilder) {
+                    if (typeof buildOptions.outputPath === 'string') {
+                        buildOptions.outputPath = (0, devkit_1.joinPathFragments)('dist', this.project.newRoot);
+                    }
+                    else if (buildOptions.outputPath.base) {
+                        buildOptions.outputPath.base = (0, devkit_1.joinPathFragments)('dist', this.project.newRoot);
+                    }
+                }
+                else {
+                    buildOptions.outputPath = (0, devkit_1.joinPathFragments)('dist', this.project.newRoot, this.targetNames.server ? 'browser' : '');
+                }
+            }
+            else if (isApplicationBuilder) {
+                buildOptions.outputPath = (0, devkit_1.joinPathFragments)('dist', this.projectName);
+            }
+            if (typeof buildOptions.outputPath === 'string') {
+                target.outputs = ['{options.outputPath}'];
+            }
+            else if (buildOptions.outputPath?.base) {
+                target.outputs = ['{options.outputPath.base}'];
+            }
+        }
         if (buildOptions.index) {
             if (typeof buildOptions.index === 'string') {
                 buildOptions.index = this.convertAsset(buildOptions.index);
@@ -237,8 +272,8 @@ class AppMigrator extends project_migrator_1.ProjectMigrator {
                 this.logger.warn(`The tsConfig file "${buildDevTsConfig}" specified in the "${this.targetNames.build}" target could not be found. Skipping updating the tsConfig file.`);
             }
         }
-        this.convertBuildOptions(buildTarget.options ?? {});
-        Object.values(buildTarget.configurations ?? {}).forEach((config) => this.convertBuildOptions(config));
+        this.convertBuildOptions(buildTarget.options ?? {}, buildTarget);
+        Object.values(buildTarget.configurations ?? {}).forEach((config) => this.convertBuildOptions(config, buildTarget, false));
     }
     updatePrerenderTargetConfiguration() {
         if (!this.targetNames.prerender ||

package/src/generators/ngrx/schema.json

@@ -8,11 +8,11 @@
   "type": "object",
   "examples": [
     {
-      "command": "nx g @nx/angular:ngrx --root --parent=apps/my-app/src/app/app.module.ts --facade=false placeholder",
+      "command": "nx g @nx/angular:ngrx --root --parent=apps/my-app/src/app/app-module.ts --facade=false placeholder",
       "description": "Add root ngrx configration to the `my-app` application"
     },
     {
-      "command": "nx g @nx/angular:ngrx --parent=libs/my-lib/src/lib/my-lib.module.ts --facade=true --root=false users",
+      "command": "nx g @nx/angular:ngrx --parent=libs/my-lib/src/lib/my-lib-module.ts --facade=true --root=false users",
       "description": "Add a `users` state with a facade to the `my-lib` library. It will be tracked under the default `+state` folder in the lib"
     },
     {
@@ -42,7 +42,7 @@
     },
     "parent": {
       "type": "string",
-      "description": "The path to the file where the state will be registered. For NgModule usage, this will be your `app.module.ts` for your root state, or your Feature Module for feature state. For Standalone API usage, this will be your `app.config.ts` file for your root state, or the Routes definition file for your feature state. The host directory will create/use the new state directory.",
+      "description": "The path to the file where the state will be registered. For NgModule usage, this will be your `app-module.ts` for your root state, or your Feature Module for feature state. For Standalone API usage, this will be your `app.config.ts` file for your root state, or the Routes definition file for your feature state. The host directory will create/use the new state directory.",
       "x-prompt": "What is the path to the module or Routes definition where this NgRx state should be registered?",
       "x-priority": "important"
     },

package/src/generators/ngrx-root-store/lib/normalize-options.js

@@ -16,7 +16,11 @@ function normalizeOptions(tree, options) {
     const project = (0, devkit_1.readProjectConfiguration)(tree, options.project);
     const isStandalone = (0, ast_utils_1.isNgStandaloneApp)(tree, options.project);
     const appConfigPath = (0, devkit_1.joinPathFragments)(project.sourceRoot, 'app/app.config.ts');
-    const appMainPath = project.targets.build.options.main ?? project.targets.build.options.browser;
+    let appMainPath = project.targets.build.options.main ?? project.targets.build.options.browser;
+    if (!appMainPath) {
+        const sourceRoot = project.sourceRoot ?? (0, devkit_1.joinPathFragments)(project.root, 'src');
+        appMainPath = (0, devkit_1.joinPathFragments)(sourceRoot, 'main.ts');
+    }
     /** If NgModule App
      * -> Use App Module
      * If Standalone
@@ -24,7 +28,10 @@ function normalizeOptions(tree, options) {
      * --> If so, use that
      * --> If not, use main.ts
      */
-    const ngModulePath = (0, devkit_1.joinPathFragments)(project.sourceRoot, 'app/app.module.ts');
+    let ngModulePath = (0, devkit_1.joinPathFragments)(project.sourceRoot, 'app/app.module.ts');
+    if (!tree.exists(ngModulePath)) {
+        ngModulePath = (0, devkit_1.joinPathFragments)(project.sourceRoot, 'app/app-module.ts');
+    }
     const parent = !isStandalone && tree.exists(ngModulePath)
         ? ngModulePath
         : tree.exists(appConfigPath)

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

@@ -4,11 +4,15 @@ 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 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',
     });

package/src/generators/pipe/pipe.js

@@ -14,7 +14,7 @@ async function pipeGenerator(tree, rawOptions) {
         fileName: options.fileName,
         selector: pipeNames.propertyName,
         standalone: options.standalone,
-        // 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
         setStandalone: (angularMajorVersion >= 19 && !options.standalone) ||
             (angularMajorVersion < 19 && options.standalone),
         tpl: '',

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

@@ -6,6 +6,7 @@ export interface Schema {
   standalone?: boolean;
   module?: string;
   export?: boolean;
+  typeSeparator?: string;
   skipFormat?: boolean;
 }
 

package/src/generators/pipe/schema.json

@@ -12,11 +12,15 @@
       "command": "nx g @nx/angular:pipe mylib/src/lib/foo.pipe.ts"
     },
     {
-      "description": "Generate a pipe without providing the file extension. It results in the pipe `FooPipe` at `mylib/src/lib/foo.pipe.ts`",
+      "description": "Generate a pipe without providing the file extension. It results in the pipe `FooPipe` at `mylib/src/lib/foo-pipe.ts`",
       "command": "nx g @nx/angular:pipe mylib/src/lib/foo"
     },
     {
-      "description": "Generate a pipe with the exported symbol different from the file name. It results in the pipe `CustomPipe` at `mylib/src/lib/foo.pipe.ts`",
+      "description": "Generate a pipe with a different type separator. It results in the pipe `FooPipe` at `mylib/src/lib/foo.pipe.ts`",
+      "command": "nx g @nx/angular:pipe mylib/src/lib/foo --typeSeparator=."
+    },
+    {
+      "description": "Generate a pipe with the exported symbol different from the file name. It results in the pipe `CustomPipe` at `mylib/src/lib/foo-pipe.ts`",
       "command": "nx g @nx/angular:pipe mylib/src/lib/foo --name=custom"
     }
   ],
@@ -59,6 +63,11 @@
       "default": false,
       "description": "The declaring NgModule exports this pipe."
     },
+    "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": {
       "type": "boolean",
       "default": false,

package/src/generators/remote/files/standalone/src/bootstrap.server.ts__tmpl__

@@ -1,7 +1,7 @@
-import {bootstrapApplication} from '@angular/platform-browser';
-import {RemoteEntryComponent} from './app/remote-entry/entry.component';
-import {config} from './app/app.config.server';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { RemoteEntry<%= componentType %> } from './app/remote-entry/entry<%= componentFileSuffix %>';
+import { config } from './app/app.config.server';
 
-const bootstrap = () => bootstrapApplication(RemoteEntryComponent, config);
+const bootstrap = () => bootstrapApplication(RemoteEntry<%= componentType %>, config);
 
 export default bootstrap;

package/src/generators/remote/lib/update-ssr-setup.js

@@ -4,6 +4,7 @@ exports.updateSsrSetup = updateSsrSetup;
 const devkit_1 = require("@nx/devkit");
 const path_1 = require("path");
 const versions_1 = require("../../../utils/versions");
+const artifact_types_1 = require("../../utils/artifact-types");
 const version_utils_1 = require("../../utils/version-utils");
 async function updateSsrSetup(tree, { appName, port, standalone, typescriptConfiguration, skipPackageJson, }) {
     const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
@@ -28,9 +29,13 @@ async function updateSsrSetup(tree, { appName, port, standalone, typescriptConfi
         tmpl: '',
     });
     if (standalone) {
+        const componentType = (0, artifact_types_1.getComponentType)(tree);
+        const componentFileSuffix = componentType ? `.${componentType}` : '';
         (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/standalone'), project.root, {
             appName,
             standalone,
+            componentType: componentType ? (0, devkit_1.names)(componentType).className : '',
+            componentFileSuffix,
             tmpl: '',
         });
     }

package/src/generators/remote/remote.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.remote = remote;
+const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
@@ -10,8 +11,14 @@ const application_1 = require("../application/application");
 const setup_mf_1 = require("../setup-mf/setup-mf");
 const add_mf_env_to_inputs_1 = require("../utils/add-mf-env-to-inputs");
 const lib_1 = require("./lib");
+const assert_mf_utils_1 = require("../utils/assert-mf-utils");
+const convert_to_rspack_1 = tslib_1.__importDefault(require("../convert-to-rspack/convert-to-rspack"));
 async function remote(tree, schema) {
     (0, ts_solution_setup_1.assertNotUsingTsSolutionSetup)(tree, 'angular', 'remote');
+    // TODO: Replace with Rspack when confidence is high enough
+    schema.bundler ??= 'webpack';
+    const isRspack = schema.bundler === 'rspack';
+    (0, assert_mf_utils_1.assertRspackIsCSR)(schema.bundler, schema.ssr ?? false, schema.serverRouting ?? false);
     const { typescriptConfiguration = true, ...options } = schema;
     options.standalone = options.standalone ?? true;
     const projects = (0, devkit_1.getProjects)(tree);
@@ -75,6 +82,22 @@ async function remote(tree, schema) {
         installTasks.push(ssrInstallTask);
     }
     (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(tree);
+    if (isRspack) {
+        await (0, convert_to_rspack_1.default)(tree, {
+            project: remoteProjectName,
+            skipInstall: options.skipPackageJson,
+            skipFormat: true,
+        });
+    }
+    const project = (0, devkit_1.readProjectConfiguration)(tree, remoteProjectName);
+    project.targets.serve ??= {};
+    project.targets.serve.options ??= {};
+    if (options.host) {
+        project.targets.serve.dependsOn ??= [];
+        project.targets.serve.dependsOn.push(`${options.host}:serve`);
+    }
+    project.targets.serve.options.port = port;
+    (0, devkit_1.updateProjectConfiguration)(tree, remoteProjectName, project);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }

package/src/generators/remote/schema.d.ts

@@ -5,6 +5,7 @@ import type { Styles } from '../utils/types';
 export interface Schema {
   directory: string;
   name?: string;
+  bundler?: 'webpack' | 'rspack';
   host?: string;
   port?: number;
   setParserOptionsProject?: boolean;

package/src/generators/remote/schema.json

@@ -42,6 +42,12 @@
       "type": "number",
       "description": "The port on which this app should be served."
     },
+    "bundler": {
+      "type": "string",
+      "description": "The bundler to use for the remote application.",
+      "default": "webpack",
+      "enum": ["webpack", "rspack"]
+    },
     "style": {
       "description": "The file extension to be used for style files.",
       "type": "string",
@@ -165,7 +171,7 @@
       "default": false
     },
     "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"
     },
     "typescriptConfiguration": {

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

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.convertComponentToScam = convertComponentToScam;
-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 convertComponentToScam(tree, options) {
         tree.write(options.filePath, updatedComponentSource);
         return;
     }
-    const moduleFilePath = (0, devkit_1.joinPathFragments)(options.directory, `${options.name}.module.ts`);
-    tree.write(moduleFilePath, getModuleFileContent(options.symbolName, options.fileName));
+    tree.write(options.modulePath, getModuleFileContent(options.symbolName, options.fileName));
 }
 function getModuleFileContent(componentClassName, componentFileName) {
     return `import { NgModule } from '@angular/core';

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

@@ -3,20 +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) {
-    options.type ??= 'component';
+    const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+    if (angularMajorVersion < 20) {
+        options.type ??= 'component';
+    }
     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: options.type ?? 'component',
+        suffix: options.type,
         allowedFileExtensions: ['ts'],
         fileExtension: 'ts',
     });
     const { className } = (0, devkit_1.names)(name);
-    const { className: suffixClassName } = (0, devkit_1.names)(options.type);
+    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,
@@ -27,5 +34,6 @@ async function normalizeOptions(tree, options) {
         name,
         symbolName,
         projectName,
+        modulePath,
     };
 }

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

@@ -26,4 +26,5 @@ export interface NormalizedSchema extends Schema {
   symbolName: string;
   export: boolean;
   inlineScam: boolean;
+  modulePath: string;
 }

package/src/generators/scam/schema.json

@@ -94,8 +94,7 @@
     },
     "type": {
       "type": "string",
-      "description": "Adds a developer-defined type to the filename, in the format `name.type.ts`.",
-      "default": "component"
+      "description": "Append a custom type to the component's filename. It defaults to 'component' for Angular versions below v20. For Angular v20 and above, no type is appended unless specified."
     },
     "prefix": {
       "type": "string",

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

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.convertDirectiveToScam = convertDirectiveToScam;
-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 convertDirectiveToScam(tree, options) {
         tree.write(options.filePath, updatedDirectiveSource);
         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(directiveClassName, directiveFileName) {
     return `import { NgModule } from '@angular/core';

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 %> {}