@nx/angular 21.1.2 → 21.2.0-beta.2

package/src/generators/component/lib/module.js

@@ -5,11 +5,13 @@ const devkit_1 = require("@nx/devkit");
 const path_1 = require("path");
 // Adapted from https://github.com/angular/angular-cli/blob/732aab5fa7e63618c89dfbbb6f78753f706d7014/packages/schematics/angular/utility/find-module.ts#L29
 // to match the logic from the Angular CLI component schematic.
-const moduleExt = '.module.ts';
-const routingModuleExt = '-routing.module.ts';
+const MODULE_EXT = '.module.ts';
+const ROUTING_MODULE_EXT = '-routing.module.ts';
 function findModuleFromOptions(tree, options, projectRoot) {
+    const moduleExt = options.moduleExt || MODULE_EXT;
+    const routingModuleExt = options.routingModuleExt || ROUTING_MODULE_EXT;
     if (!options.module) {
-        return (0, devkit_1.normalizePath)(findModule(tree, options.directory, projectRoot));
+        return (0, devkit_1.normalizePath)(findModule(tree, options.directory, projectRoot, moduleExt, routingModuleExt));
     }
     else {
         const modulePath = (0, devkit_1.joinPathFragments)(options.directory, options.module);
@@ -32,7 +34,7 @@ function findModuleFromOptions(tree, options, projectRoot) {
                 `${moduleBaseName}${moduleExt}`,
             ].map((x) => (0, devkit_1.joinPathFragments)(c, x));
             for (const sc of candidateFiles) {
-                if (tree.isFile(sc)) {
+                if (tree.isFile(sc) && tree.read(sc, 'utf-8').includes('@NgModule')) {
                     return (0, devkit_1.normalizePath)(sc);
                 }
             }
@@ -41,7 +43,7 @@ function findModuleFromOptions(tree, options, projectRoot) {
             `Looked in the following directories:\n    ${candidatesDirs.join('\n    ')}`);
     }
 }
-function findModule(tree, generateDir, projectRoot) {
+function findModule(tree, generateDir, projectRoot, moduleExt = MODULE_EXT, routingModuleExt = ROUTING_MODULE_EXT) {
     let dir = generateDir;
     const projectRootParent = (0, path_1.dirname)(projectRoot);
     while (dir !== projectRootParent) {

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

@@ -5,12 +5,16 @@ const devkit_1 = require("@nx/devkit");
 const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
 const selector_1 = require("../../utils/selector");
 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',
     });
@@ -18,7 +22,7 @@ async function normalizeOptions(tree, options) {
         throw new Error(`The component name '${name}' cannot contain a slash as it must be a valid JS symbol. Please use a different name.`);
     }
     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 { prefix, root, sourceRoot } = (0, devkit_1.readProjectConfiguration)(tree, projectName);

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

@@ -17,6 +17,7 @@ export interface Schema {
   export?: boolean;
   exportDefault?: boolean;
   prefix?: string;
+  ngHtml?: boolean;
   skipFormat?: boolean;
 }
 

package/src/generators/component/schema.json

@@ -95,8 +95,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."
     },
     "export": {
       "type": "boolean",
@@ -109,6 +108,11 @@
       "default": false,
       "description": "Use default export for the component instead of a named export."
     },
+    "ngHtml": {
+      "type": "boolean",
+      "default": false,
+      "description": "Generate component template files with an '.ng.html' file extension instead of '.html'."
+    },
     "skipFormat": {
       "description": "Skip formatting files.",
       "type": "boolean",

package/src/generators/convert-to-application-executor/convert-to-application-executor.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.convertToApplicationExecutor = convertToApplicationExecutor;
 const devkit_1 = require("@nx/devkit");
 const posix_1 = require("node:path/posix");
-const semver_1 = require("semver");
 const targets_1 = require("../../utils/targets");
 const setup_ssr_1 = require("../setup-ssr/setup-ssr");
 const validations_1 = require("../utils/validations");
@@ -26,17 +25,16 @@ const redundantExecutors = new Set([
     '@nx/angular:webpack-server',
 ]);
 async function convertToApplicationExecutor(tree, options) {
-    const { version: angularVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
     let didAnySucceed = false;
     if (options.project) {
         (0, validations_1.validateProject)(tree, options.project);
-        didAnySucceed = await convertProjectTargets(tree, options.project, angularVersion, true);
+        didAnySucceed = await convertProjectTargets(tree, options.project, true);
     }
     else {
         const projects = (0, devkit_1.getProjects)(tree);
         for (const [projectName] of projects) {
             devkit_1.logger.info(`Converting project "${projectName}"...`);
-            const success = await convertProjectTargets(tree, projectName, angularVersion);
+            const success = await convertProjectTargets(tree, projectName);
             if (success) {
                 devkit_1.logger.info(`Project "${projectName}" converted successfully.`);
             }
@@ -52,7 +50,7 @@ async function convertToApplicationExecutor(tree, options) {
     }
     return didAnySucceed ? () => (0, devkit_1.installPackagesTask)(tree) : () => { };
 }
-async function convertProjectTargets(tree, projectName, angularVersion, isProvidedProject = false) {
+async function convertProjectTargets(tree, projectName, isProvidedProject = false) {
     function warnIfProvided(message) {
         if (isProvidedProject) {
             devkit_1.logger.warn(message);
@@ -63,7 +61,7 @@ async function convertProjectTargets(tree, projectName, angularVersion, isProvid
         warnIfProvided(`The provided project "${projectName}" is not an application. Skipping conversion.`);
         return false;
     }
-    const { buildTargetName, serverTargetName } = getTargetsToConvert(project.targets, angularVersion);
+    const { buildTargetName, serverTargetName } = getTargetsToConvert(project.targets);
     if (!buildTargetName) {
         warnIfProvided(`The provided project "${projectName}" does not have any targets using on of the ` +
             `'@angular-devkit/build-angular:browser', '@angular-devkit/build-angular:browser-esbuild', ` +
@@ -71,12 +69,20 @@ async function convertProjectTargets(tree, projectName, angularVersion, isProvid
         return false;
     }
     const useNxExecutor = project.targets[buildTargetName].executor.startsWith('@nx/angular:');
-    const newExecutor = useNxExecutor
-        ? '@nx/angular:application'
-        : '@angular-devkit/build-angular:application';
+    let newExecutor;
+    if (useNxExecutor) {
+        newExecutor = '@nx/angular:application';
+    }
+    else {
+        const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+        newExecutor =
+            angularMajorVersion >= 20
+                ? '@angular/build:application'
+                : '@angular-devkit/build-angular:application';
+    }
     const buildTarget = project.targets[buildTargetName];
     buildTarget.executor = newExecutor;
-    if ((0, semver_1.gte)(angularVersion, '17.1.0') && buildTarget.outputs) {
+    if (buildTarget.outputs) {
         buildTarget.outputs = buildTarget.outputs.map((output) => output === '{options.outputPath}' ? '{options.outputPath.base}' : output);
     }
     for (const [, options] of (0, targets_1.allTargetOptions)(buildTarget)) {
@@ -94,10 +100,7 @@ async function convertProjectTargets(tree, projectName, angularVersion, isProvid
             options['polyfills'] = [options['polyfills']];
         }
         let outputPath = options['outputPath'];
-        if ((0, semver_1.lt)(angularVersion, '17.1.0')) {
-            options['outputPath'] = outputPath?.replace(/\/browser\/?$/, '');
-        }
-        else if (typeof outputPath === 'string') {
+        if (typeof outputPath === 'string') {
             if (!/\/browser\/?$/.test(outputPath)) {
                 devkit_1.logger.warn(`The output location of the browser build has been updated from "${outputPath}" to ` +
                     `"${(0, posix_1.join)(outputPath, 'browser')}". ` +
@@ -121,9 +124,6 @@ async function convertProjectTargets(tree, projectName, angularVersion, isProvid
             }
         }
         // Delete removed options
-        if ((0, semver_1.lt)(angularVersion, '17.3.0')) {
-            delete options['deployUrl'];
-        }
         delete options['vendorChunk'];
         delete options['commonChunk'];
         delete options['resourcesOutputPath'];
@@ -145,18 +145,34 @@ async function convertProjectTargets(tree, projectName, angularVersion, isProvid
         }
         const browserTsConfigJson = (0, devkit_1.readJson)(tree, browserTsConfigPath);
         const serverTsConfigJson = (0, devkit_1.readJson)(tree, serverTsConfigPath);
+        const serverFiles = ['src/main.server.ts', 'src/server.ts'];
+        if (tree.exists((0, posix_1.join)(project.root, 'src/app/app.config.server.ts'))) {
+            serverFiles.push('src/app/app.config.server.ts');
+        }
         const files = new Set([
             ...(browserTsConfigJson.files ?? []),
             ...(serverTsConfigJson.files ?? []),
         ]);
-        // Server file will be added later by the setup-ssr generator
+        // Server files will be added later if needed by the setup-ssr generator
         files.delete('server.ts');
-        browserTsConfigJson.files = Array.from(files);
+        files.delete('src/server.ts');
+        files.delete('src/main.server.ts');
+        if (files.size) {
+            browserTsConfigJson.files = Array.from(files);
+        }
+        else if (browserTsConfigJson.files) {
+            delete browserTsConfigJson.files;
+        }
         browserTsConfigJson.compilerOptions ?? {};
         browserTsConfigJson.compilerOptions.types = Array.from(new Set([
             ...(browserTsConfigJson.compilerOptions.types ?? []),
             ...(serverTsConfigJson.compilerOptions?.types ?? []),
         ]));
+        if (browserTsConfigJson.exclude?.length) {
+            const normalizeExclude = (exclude) => exclude.startsWith('./') ? exclude.slice(2) : exclude;
+            browserTsConfigJson.exclude = browserTsConfigJson.exclude.filter((exclude) => !serverFiles.includes(normalizeExclude(exclude)));
+        }
+        (0, devkit_1.writeJson)(tree, browserTsConfigPath, browserTsConfigJson);
         // Delete server tsconfig
         tree.delete(serverTsConfigPath);
     }
@@ -189,11 +205,12 @@ async function convertProjectTargets(tree, projectName, angularVersion, isProvid
     (0, devkit_1.updateProjectConfiguration)(tree, projectName, project);
     return true;
 }
-function getTargetsToConvert(targets, angularVersion) {
+function getTargetsToConvert(targets) {
     let buildTargetName;
     let serverTargetName;
     for (const target of Object.keys(targets)) {
         if (targets[target].executor === '@nx/angular:application' ||
+            targets[target].executor === '@angular/build:application' ||
             targets[target].executor === '@angular-devkit/build-angular:application') {
             devkit_1.logger.warn('The project is already using the application builder. Skipping conversion.');
             return {};
@@ -201,10 +218,6 @@ function getTargetsToConvert(targets, angularVersion) {
         // build target
         if (executorsToConvert.has(targets[target].executor)) {
             for (const [, options] of (0, targets_1.allTargetOptions)(targets[target])) {
-                if ((0, semver_1.lt)(angularVersion, '17.3.0') && options.deployUrl) {
-                    devkit_1.logger.warn(`The project is using the "deployUrl" option which is not available in the application builder. Skipping conversion.`);
-                    return {};
-                }
                 if (options.customWebpackConfig) {
                     devkit_1.logger.warn(`The project is using a custom webpack configuration which is not supported by the esbuild-based application executor. Skipping conversion.`);
                     return {};

package/src/generators/convert-to-rspack/convert-to-rspack.d.ts

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

package/src/generators/convert-to-rspack/convert-to-rspack.js

@@ -2,15 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.convertToRspack = convertToRspack;
 const devkit_1 = require("@nx/devkit");
+const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
+const get_named_inputs_1 = require("@nx/devkit/src/utils/get-named-inputs");
+const enquirer_1 = require("enquirer");
+const path_1 = require("path");
+const posix_1 = require("path/posix");
 const versions_1 = require("../../utils/versions");
 const create_config_1 = require("./lib/create-config");
 const get_custom_webpack_config_1 = require("./lib/get-custom-webpack-config");
 const update_tsconfig_1 = require("./lib/update-tsconfig");
 const validate_supported_executor_1 = require("./lib/validate-supported-executor");
-const posix_1 = require("path/posix");
-const path_1 = require("path");
-const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
-const enquirer_1 = require("enquirer");
 const SUPPORTED_EXECUTORS = [
     '@angular-devkit/build-angular:browser',
     '@angular-devkit/build-angular:dev-server',
@@ -27,12 +28,7 @@ const RENAMED_OPTIONS = {
     ngswConfigPath: 'serviceWorker',
 };
 const DEFAULT_PORT = 4200;
-const REMOVED_OPTIONS = [
-    'buildOptimizer',
-    'buildTarget',
-    'browserTarget',
-    'publicHost',
-];
+const REMOVED_OPTIONS = ['buildOptimizer', 'buildTarget', 'browserTarget'];
 function normalizeFromProjectRoot(tree, path, projectRoot) {
     if (projectRoot === '.') {
         if (!path.startsWith('./')) {
@@ -169,10 +165,6 @@ function handleBuildTargetOptions(tree, options, newConfigurationOptions, root)
         customWebpackConfigPath = options.customWebpackConfig.path;
         delete options.customWebpackConfig;
     }
-    if (options.outputs) {
-        // handled by the Rspack inference plugin
-        delete options.outputs;
-    }
     for (const [key, value] of Object.entries(options)) {
         let optionName = key;
         let optionValue = key in PATH_NORMALIZER ? PATH_NORMALIZER[key](tree, value, root) : value;
@@ -252,8 +244,9 @@ async function convertToRspack(tree, schema) {
         root: project.root,
     };
     const configurationOptions = {};
-    const buildTargetNames = [];
-    const serveTargetNames = [];
+    let buildTarget;
+    let serveTarget;
+    const targetsToRemove = [];
     let customWebpackConfigPath;
     (0, validate_supported_executor_1.validateSupportedBuildExecutor)(Object.values(project.targets));
     let projectServePort = DEFAULT_PORT;
@@ -267,14 +260,15 @@ async function convertToRspack(tree, schema) {
                     handleBuildTargetOptions(tree, configuration, configurationOptions[configurationName], project.root);
                 }
             }
-            buildTargetNames.push(targetName);
+            buildTarget = { name: targetName, config: target };
+            targetsToRemove.push(targetName);
         }
         else if (target.executor === '@angular-devkit/build-angular:server' ||
             target.executor === '@nx/angular:webpack-server') {
             createConfigOptions.ssr ??= {};
             createConfigOptions.ssr.entry ??= normalizeFromProjectRoot(tree, target.options.main, project.root);
             createConfigOptions.server = './src/main.server.ts';
-            buildTargetNames.push(targetName);
+            targetsToRemove.push(targetName);
         }
         else if (target.executor === '@angular-devkit/build-angular:dev-server' ||
             target.executor === '@nx/angular:dev-server' ||
@@ -282,7 +276,7 @@ async function convertToRspack(tree, schema) {
             createConfigOptions.devServer = {};
             if (target.options) {
                 handleDevServerTargetOptions(tree, target.options, createConfigOptions.devServer, project.root);
-                if (target.options.port !== DEFAULT_PORT) {
+                if (target.options.port && target.options.port !== DEFAULT_PORT) {
                     projectServePort = target.options.port;
                 }
             }
@@ -293,7 +287,8 @@ async function convertToRspack(tree, schema) {
                     handleDevServerTargetOptions(tree, configuration, configurationOptions[configurationName].devServer, project.root);
                 }
             }
-            serveTargetNames.push(targetName);
+            serveTarget = { name: targetName, config: target };
+            targetsToRemove.push(targetName);
         }
         else if (target.executor === '@angular-devkit/build-angular:prerender') {
             if (target.options) {
@@ -314,11 +309,11 @@ async function convertToRspack(tree, schema) {
                     }
                 }
             }
-            buildTargetNames.push(targetName);
+            targetsToRemove.push(targetName);
         }
         else if (target.executor === '@angular-devkit/build-angular:app-shell') {
             createConfigOptions.appShell = true;
-            buildTargetNames.push(targetName);
+            targetsToRemove.push(targetName);
         }
     }
     const customWebpackConfigInfo = customWebpackConfigPath
@@ -326,20 +321,169 @@ async function convertToRspack(tree, schema) {
         : undefined;
     (0, create_config_1.createConfig)(tree, createConfigOptions, configurationOptions, customWebpackConfigInfo?.normalizedPathToCustomWebpackConfig, customWebpackConfigInfo?.isWebpackConfigFunction);
     (0, update_tsconfig_1.updateTsconfig)(tree, project.root);
-    for (const targetName of [...buildTargetNames, ...serveTargetNames]) {
+    for (const targetName of targetsToRemove) {
         delete project.targets[targetName];
     }
-    if (projectServePort !== DEFAULT_PORT) {
-        project.targets.serve ??= {};
-        project.targets.serve.options ??= {};
-        project.targets.serve.options.port = projectServePort;
-    }
     (0, devkit_1.updateProjectConfiguration)(tree, projectName, project);
+    // ensure plugin is registered
     const { rspackInitGenerator } = (0, devkit_1.ensurePackage)('@nx/rspack', versions_1.nxVersion);
     await rspackInitGenerator(tree, {
         addPlugin: true,
         framework: 'angular',
     });
+    // find the inferred target names
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    let inferredBuildTargetName = 'build';
+    let inferredServeTargetName = 'serve';
+    const pluginRegistration = nxJson.plugins.find((p) => typeof p === 'string' ? false : p.plugin === '@nx/rspack/plugin');
+    if (pluginRegistration) {
+        inferredBuildTargetName =
+            pluginRegistration.options.buildTargetName ?? inferredBuildTargetName;
+        inferredServeTargetName =
+            pluginRegistration.options.serveTargetName ?? inferredServeTargetName;
+    }
+    if (buildTarget) {
+        // these are all replaced by the inferred task
+        delete buildTarget.config.options;
+        delete buildTarget.config.configurations;
+        delete buildTarget.config.defaultConfiguration;
+        delete buildTarget.config.executor;
+        const shouldOverrideInputs = (inputs) => {
+            if (!inputs?.length) {
+                return false;
+            }
+            if (inputs.length === 2) {
+                // check whether the existing inputs would match the inferred task
+                // inputs with the exception of the @rspack/cli external dependency
+                // which webpack tasks wouldn't have
+                const namedInputs = (0, get_named_inputs_1.getNamedInputs)(project.root, {
+                    nxJsonConfiguration: nxJson,
+                    configFiles: [],
+                    workspaceRoot: devkit_1.workspaceRoot,
+                });
+                if ('production' in namedInputs) {
+                    return !['production', '^production'].every((input) => inputs.includes(input));
+                }
+                return !['default', '^default'].every((input) => inputs.includes(input));
+            }
+            return true;
+        };
+        if (shouldOverrideInputs(buildTarget.config.inputs)) {
+            // keep existing inputs and add the @rspack/cli external dependency
+            buildTarget.config.inputs = [
+                ...buildTarget.config.inputs,
+                { externalDependencies: ['@rspack/cli'] },
+            ];
+        }
+        else {
+            delete buildTarget.config.inputs;
+        }
+        if (buildTarget.config.cache) {
+            delete buildTarget.config.cache;
+        }
+        if (buildTarget.config.dependsOn?.length === 1 &&
+            buildTarget.config.dependsOn[0] === `^${buildTarget.name}`) {
+            delete buildTarget.config.dependsOn;
+        }
+        else if (buildTarget.config.dependsOn) {
+            buildTarget.config.dependsOn = buildTarget.config.dependsOn.map((dep) => dep === `^${buildTarget.name}` ? `^${inferredBuildTargetName}` : dep);
+        }
+        const newOutputPath = (0, devkit_1.joinPathFragments)(project.root, createConfigOptions.outputPath.base);
+        const shouldOverrideOutputs = (outputs) => {
+            if (!outputs?.length) {
+                // this means the target was wrongly configured, so, we don't override
+                // anything and let the inferred outputs be used
+                return false;
+            }
+            if (outputs.length === 1) {
+                if (outputs[0] === '{options.outputPath}') {
+                    // the inferred task output is created after the createConfig
+                    // outputPath option, so we don't need to keep this
+                    return false;
+                }
+                const normalizedOutputPath = outputs[0]
+                    .replace('{workspaceRoot}/', '')
+                    .replace('{projectRoot}', project.root)
+                    .replace('{projectName}', '');
+                if (normalizedOutputPath === newOutputPath ||
+                    normalizedOutputPath.replace(/\/browser\/?$/, '') === newOutputPath) {
+                    return false;
+                }
+            }
+            return true;
+        };
+        const normalizeOutput = (path, workspaceRoot, projectRoot) => {
+            const fullProjectRoot = (0, path_1.resolve)(workspaceRoot, projectRoot);
+            const fullPath = (0, path_1.resolve)(workspaceRoot, path);
+            const pathRelativeToProjectRoot = (0, devkit_1.normalizePath)((0, path_1.relative)(fullProjectRoot, fullPath));
+            if (pathRelativeToProjectRoot.startsWith('..')) {
+                return (0, devkit_1.joinPathFragments)('{workspaceRoot}', (0, path_1.relative)(workspaceRoot, fullPath));
+            }
+            return (0, devkit_1.joinPathFragments)('{projectRoot}', pathRelativeToProjectRoot);
+        };
+        if (shouldOverrideOutputs(buildTarget.config.outputs)) {
+            buildTarget.config.outputs = buildTarget.config.outputs.map((output) => {
+                if (output === '{options.outputPath}') {
+                    // the target won't have an outputPath option, so we replace it with the new output path
+                    return normalizeOutput(newOutputPath, devkit_1.workspaceRoot, project.root);
+                }
+                const normalizedOutputPath = output
+                    .replace('{workspaceRoot}/', '')
+                    .replace('{projectRoot}', project.root)
+                    .replace('{projectName}', '');
+                if (/\/browser\/?$/.test(normalizedOutputPath) &&
+                    normalizedOutputPath.replace(/\/browser\/?$/, '') === newOutputPath) {
+                    return normalizeOutput(newOutputPath, devkit_1.workspaceRoot, project.root);
+                }
+                return output;
+            });
+        }
+        else {
+            delete buildTarget.config.outputs;
+        }
+        if (buildTarget.config.syncGenerators?.length === 1 &&
+            buildTarget.config.syncGenerators[0] === '@nx/js:typescript-sync') {
+            delete buildTarget.config.syncGenerators;
+        }
+        else if (buildTarget.config.syncGenerators?.length) {
+            buildTarget.config.syncGenerators = Array.from(new Set([
+                ...buildTarget.config.syncGenerators,
+                '@nx/js:typescript-sync',
+            ]));
+        }
+        if (Object.keys(buildTarget.config).length) {
+            // there's extra target metadata left that wouldn't be inferred, we keep it
+            project.targets[inferredBuildTargetName] = buildTarget.config;
+        }
+    }
+    if (serveTarget) {
+        delete serveTarget.config.options;
+        delete serveTarget.config.configurations;
+        delete serveTarget.config.defaultConfiguration;
+        delete serveTarget.config.executor;
+        if (serveTarget.config.continuous) {
+            delete serveTarget.config.continuous;
+        }
+        if (serveTarget.config.syncGenerators?.length === 1 &&
+            serveTarget.config.syncGenerators[0] === '@nx/js:typescript-sync') {
+            delete serveTarget.config.syncGenerators;
+        }
+        else if (serveTarget.config.syncGenerators?.length) {
+            serveTarget.config.syncGenerators = Array.from(new Set([
+                ...serveTarget.config.syncGenerators,
+                '@nx/js:typescript-sync',
+            ]));
+        }
+        if (projectServePort !== DEFAULT_PORT) {
+            serveTarget.config.options = {};
+            serveTarget.config.options.port = projectServePort;
+        }
+        if (Object.keys(serveTarget.config).length) {
+            // there's extra target metadata left that wouldn't be inferred, we keep it
+            project.targets[inferredServeTargetName] = serveTarget.config;
+        }
+    }
+    (0, devkit_1.updateProjectConfiguration)(tree, projectName, project);
     // This is needed to prevent a circular execution of the build target
     const rootPkgJson = (0, devkit_1.readJson)(tree, 'package.json');
     if (rootPkgJson.scripts?.build === 'nx build') {
@@ -349,6 +493,7 @@ async function convertToRspack(tree, schema) {
     if (!schema.skipInstall) {
         const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
             '@nx/angular-rspack': versions_1.angularRspackVersion,
+            'webpack-merge': versions_1.webpackMergeVersion,
             'ts-node': versions_1.tsNodeVersion,
         });
         tasks.push(installTask);

package/src/generators/convert-to-rspack/lib/get-custom-webpack-config.js

@@ -30,7 +30,7 @@ function convertWebpackConfigToUseNxModuleFederationPlugin(webpackConfigContents
     const withModuleFederationImportNodes = (0, tsquery_1.tsquery)(ast, 'ImportDeclaration:has(StringLiteral[value=@nx/module-federation/angular])');
     if (withModuleFederationImportNodes.length > 0) {
         const withModuleFederationImportNode = withModuleFederationImportNodes[0];
-        newWebpackConfigContents = `${webpackConfigContents.slice(0, withModuleFederationImportNode.getStart())}import { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } from '@nx/module-federation/rspack';${webpackConfigContents.slice(withModuleFederationImportNode.getEnd())}`;
+        newWebpackConfigContents = `${webpackConfigContents.slice(0, withModuleFederationImportNode.getStart())}import { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } from '@nx/module-federation/angular';${webpackConfigContents.slice(withModuleFederationImportNode.getEnd())}`;
         ast = tsquery_1.tsquery.ast(newWebpackConfigContents);
         const exportedWithModuleFederationNodes = (0, tsquery_1.tsquery)(ast, 'ExportAssignment:has(CallExpression > Identifier[name=withModuleFederation])');
         if (exportedWithModuleFederationNodes.length > 0) {

package/src/generators/directive/directive.js

@@ -13,7 +13,7 @@ async function directiveGenerator(tree, schema) {
         symbolName: options.symbolName,
         fileName: options.fileName,
         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/directive/lib/normalize-options.js

@@ -5,16 +5,21 @@ const devkit_1 = require("@nx/devkit");
 const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
 const selector_1 = require("../../utils/selector");
 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 { prefix } = (0, devkit_1.readProjectConfiguration)(tree, projectName);

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

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

package/src/generators/directive/schema.json

@@ -12,11 +12,15 @@
       "command": "nx g @nx/angular: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: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: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:directive mylib/src/lib/foo --name=custom"
     }
   ],
@@ -78,6 +82,10 @@
       "default": false,
       "description": "The declaring NgModule exports this directive."
     },
+    "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": {
       "type": "boolean",
       "default": false,