@nx/angular 21.1.2 → 21.2.0-beta.1

package/src/generators/application/files/standalone-components/src/main.ts__tpl__

@@ -1,7 +1,7 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
-import { AppComponent } from './app/app.component';
+import { App<%= componentType %> } from './app/app<%= componentFileSuffix %>';
 
-bootstrapApplication(AppComponent, appConfig).catch((err) =>
+bootstrapApplication(App<%= componentType %>, appConfig).catch((err) =>
   console.error(err)
 );

package/src/generators/application/lib/create-files.d.ts

@@ -1,3 +1,3 @@
-import type { Tree } from '@nx/devkit';
+import { type Tree } from '@nx/devkit';
 import type { NormalizedSchema } from './normalized-schema';
 export declare function createFiles(tree: Tree, options: NormalizedSchema, rootOffset: string): Promise<void>;

package/src/generators/application/lib/create-files.js

@@ -3,16 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createFiles = createFiles;
 const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
-const semver_1 = require("semver");
+const onboarding_1 = require("nx/src/nx-cloud/utilities/onboarding");
 const test_runners_1 = require("../../../utils/test-runners");
+const artifact_types_1 = require("../../utils/artifact-types");
 const selector_1 = require("../../utils/selector");
 const update_project_root_tsconfig_1 = require("../../utils/update-project-root-tsconfig");
 const version_utils_1 = require("../../utils/version-utils");
-const onboarding_1 = require("nx/src/nx-cloud/utilities/onboarding");
 async function createFiles(tree, options, rootOffset) {
-    const { major: angularMajorVersion, version: angularVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
-    const isUsingApplicationBuilder = options.bundler === 'esbuild';
-    const disableModernClassFieldsBehavior = (0, semver_1.lt)(angularVersion, '18.1.0-rc.0');
+    const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
     const rootSelector = `${options.prefix}-root`;
     (0, selector_1.validateHtmlSelector)(rootSelector);
     const nxWelcomeSelector = `${options.prefix}-nx-welcome`;
@@ -20,6 +18,9 @@ async function createFiles(tree, options, rootOffset) {
     const onBoardingStatus = await (0, onboarding_1.createNxCloudOnboardingURLForWelcomeApp)(tree, options.nxCloudToken);
     const connectCloudUrl = onBoardingStatus === 'unclaimed' &&
         (await (0, onboarding_1.getNxCloudAppOnBoardingUrl)(options.nxCloudToken));
+    const componentType = (0, artifact_types_1.getComponentType)(tree);
+    const componentFileSuffix = componentType ? `.${componentType}` : '';
+    const moduleTypeSeparator = (0, artifact_types_1.getModuleTypeSeparator)(tree);
     const substitutions = {
         rootSelector,
         appName: options.name,
@@ -34,13 +35,14 @@ async function createFiles(tree, options, rootOffset) {
         rootTsConfig: (0, devkit_1.joinPathFragments)(rootOffset, (0, js_1.getRootTsConfigFileName)(tree)),
         angularMajorVersion,
         rootOffset,
-        isUsingApplicationBuilder,
-        disableModernClassFieldsBehavior,
-        useEventCoalescing: angularMajorVersion >= 18,
-        useRouterTestingModule: angularMajorVersion < 18,
-        // 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,
+        provideGlobalErrorListener: angularMajorVersion >= 20,
+        usePlatformBrowserDynamic: angularMajorVersion < 20,
+        componentType: componentType ? (0, devkit_1.names)(componentType).className : '',
+        componentFileSuffix,
+        moduleTypeSeparator,
         connectCloudUrl,
         tutorialUrl: options.standalone
             ? 'https://nx.dev/getting-started/tutorials/angular-standalone-tutorial?utm_source=nx-project'
@@ -49,11 +51,8 @@ async function createFiles(tree, options, rootOffset) {
     };
     const angularAppType = options.standalone ? 'standalone' : 'ng-module';
     (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/base'), options.appProjectRoot, substitutions);
-    if (angularMajorVersion >= 18) {
-        (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/base-18+'), options.appProjectRoot, substitutions);
-    }
-    else {
-        (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/base-pre18'), options.appProjectRoot, substitutions);
+    if (angularMajorVersion >= 20) {
+        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.editor.json'));
     }
     if (options.standalone) {
         (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/standalone-components'), options.appProjectRoot, substitutions);
@@ -67,15 +66,15 @@ async function createFiles(tree, options, rootOffset) {
         tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, '/src/app/app.routes.ts'));
     }
     if (options.skipTests || options.unitTestRunner === test_runners_1.UnitTestRunner.None) {
-        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, '/src/app/app.component.spec.ts'));
+        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/app/app${componentFileSuffix}.spec.ts`));
     }
     if (options.inlineTemplate) {
-        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, '/src/app/app.component.html'));
+        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/app/app${componentFileSuffix}.html`));
     }
     if (options.inlineStyle) {
-        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, `/src/app/app.component.${options.style}`));
+        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/app/app${componentFileSuffix}.${options.style}`));
     }
     if (options.minimal) {
-        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/app/nx-welcome.component.ts'));
+        tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/app/nx-welcome${componentFileSuffix}.ts`));
     }
 }

package/src/generators/application/lib/create-project.d.ts

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

package/src/generators/application/lib/create-project.js

@@ -2,14 +2,117 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createProject = createProject;
 const devkit_1 = require("@nx/devkit");
-const version_utils_1 = require("../../utils/version-utils");
 const target_defaults_utils_1 = require("@nx/devkit/src/generators/target-defaults-utils");
+const version_utils_1 = require("../../utils/version-utils");
 function createProject(tree, options) {
+    let project;
+    if (options.bundler === 'esbuild') {
+        project = createProjectForEsbuild(tree, options);
+    }
+    else {
+        project = createProjectForWebpack(tree, options);
+    }
+    (0, devkit_1.addProjectConfiguration)(tree, options.name, project);
+}
+function createProjectForEsbuild(tree, options) {
     const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
-    const buildExecutor = options.bundler === 'webpack'
-        ? '@angular-devkit/build-angular:browser'
+    const buildExecutor = angularMajorVersion >= 20
+        ? '@angular/build:application'
         : '@angular-devkit/build-angular:application';
-    const buildMainOptionName = options.bundler === 'esbuild' ? 'browser' : 'main';
+    (0, target_defaults_utils_1.addBuildTargetDefaults)(tree, buildExecutor);
+    let budgets = undefined;
+    if (options.strict) {
+        budgets = [
+            { type: 'initial', maximumWarning: '500kb', maximumError: '1mb' },
+            {
+                type: 'anyComponentStyle',
+                maximumWarning: '4kb',
+                maximumError: '8kb',
+            },
+        ];
+    }
+    else {
+        budgets = [
+            { type: 'initial', maximumWarning: '2mb', maximumError: '5mb' },
+            {
+                type: 'anyComponentStyle',
+                maximumWarning: '6kb',
+                maximumError: '10kb',
+            },
+        ];
+    }
+    const inlineStyleLanguage = options?.style !== 'css' ? options.style : undefined;
+    const project = {
+        name: options.name,
+        projectType: 'application',
+        prefix: options.prefix,
+        root: options.appProjectRoot,
+        sourceRoot: options.appProjectSourceRoot,
+        tags: options.parsedTags,
+        targets: {
+            build: {
+                executor: buildExecutor,
+                outputs: ['{options.outputPath}'],
+                options: {
+                    outputPath: options.outputPath,
+                    index: angularMajorVersion >= 20
+                        ? undefined
+                        : `${options.appProjectSourceRoot}/index.html`,
+                    browser: `${options.appProjectSourceRoot}/main.ts`,
+                    polyfills: ['zone.js'],
+                    tsConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
+                    inlineStyleLanguage,
+                    assets: [
+                        {
+                            glob: '**/*',
+                            input: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'public'),
+                        },
+                    ],
+                    styles: [`${options.appProjectSourceRoot}/styles.${options.style}`],
+                },
+                configurations: {
+                    production: {
+                        budgets,
+                        outputHashing: 'all',
+                    },
+                    development: {
+                        optimization: false,
+                        extractLicenses: false,
+                        sourceMap: true,
+                    },
+                },
+                defaultConfiguration: 'production',
+            },
+            serve: {
+                continuous: true,
+                executor: angularMajorVersion >= 20
+                    ? '@angular/build:dev-server'
+                    : '@angular-devkit/build-angular:dev-server',
+                options: options.port ? { port: options.port } : undefined,
+                configurations: {
+                    production: {
+                        buildTarget: `${options.name}:build:production`,
+                    },
+                    development: {
+                        buildTarget: `${options.name}:build:development`,
+                    },
+                },
+                defaultConfiguration: 'development',
+            },
+            'extract-i18n': {
+                executor: angularMajorVersion >= 20
+                    ? '@angular/build:extract-i18n'
+                    : '@angular-devkit/build-angular:extract-i18n',
+                options: {
+                    buildTarget: `${options.name}:build`,
+                },
+            },
+        },
+    };
+    return project;
+}
+function createProjectForWebpack(tree, options) {
+    const buildExecutor = '@angular-devkit/build-angular:browser';
     (0, target_defaults_utils_1.addBuildTargetDefaults)(tree, buildExecutor);
     let budgets = undefined;
     if (options.strict) {
@@ -47,23 +150,17 @@ function createProject(tree, options) {
                 options: {
                     outputPath: options.outputPath,
                     index: `${options.appProjectSourceRoot}/index.html`,
-                    [buildMainOptionName]: `${options.appProjectSourceRoot}/main.ts`,
+                    main: `${options.appProjectSourceRoot}/main.ts`,
                     polyfills: ['zone.js'],
                     tsConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
                     inlineStyleLanguage,
-                    assets: angularMajorVersion >= 18
-                        ? [
-                            {
-                                glob: '**/*',
-                                input: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'public'),
-                            },
-                        ]
-                        : [
-                            `${options.appProjectSourceRoot}/favicon.ico`,
-                            `${options.appProjectSourceRoot}/assets`,
-                        ],
+                    assets: [
+                        {
+                            glob: '**/*',
+                            input: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'public'),
+                        },
+                    ],
                     styles: [`${options.appProjectSourceRoot}/styles.${options.style}`],
-                    scripts: [],
                 },
                 configurations: {
                     production: {
@@ -71,12 +168,12 @@ function createProject(tree, options) {
                         outputHashing: 'all',
                     },
                     development: {
-                        buildOptimizer: options.bundler === 'webpack' ? false : undefined,
+                        buildOptimizer: false,
                         optimization: false,
-                        vendorChunk: options.bundler === 'webpack' ? true : undefined,
+                        vendorChunk: true,
                         extractLicenses: false,
                         sourceMap: true,
-                        namedChunks: options.bundler === 'webpack' ? true : undefined,
+                        namedChunks: true,
                     },
                 },
                 defaultConfiguration: 'production',
@@ -84,11 +181,7 @@ function createProject(tree, options) {
             serve: {
                 continuous: true,
                 executor: '@angular-devkit/build-angular:dev-server',
-                options: options.port
-                    ? {
-                        port: options.port,
-                    }
-                    : undefined,
+                options: options.port ? { port: options.port } : undefined,
                 configurations: {
                     production: {
                         buildTarget: `${options.name}:build:production`,
@@ -107,5 +200,5 @@ function createProject(tree, options) {
             },
         },
     };
-    (0, devkit_1.addProjectConfiguration)(tree, options.name, project);
+    return project;
 }

package/src/generators/application/lib/enable-strict-type-checking.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.enableStrictTypeChecking = enableStrictTypeChecking;
 const devkit_1 = require("@nx/devkit");
+const version_utils_1 = require("../../utils/version-utils");
 function enableStrictTypeChecking(host, options) {
     // This matches the settings defined by the Angular CLI https://angular.io/guide/strict-mode
     const compilerOptions = {
-        forceConsistentCasingInFileNames: true,
         strict: true,
         noImplicitOverride: true,
         noPropertyAccessFromIndexSignature: true,
@@ -14,12 +14,14 @@ function enableStrictTypeChecking(host, options) {
     };
     const appTsConfigPath = `${options.appProjectRoot}/tsconfig.json`;
     if (host.exists(appTsConfigPath)) {
+        const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(host);
         (0, devkit_1.updateJson)(host, appTsConfigPath, (json) => {
             json.compilerOptions = { ...json.compilerOptions, ...compilerOptions };
             json.angularCompilerOptions = {
-                enableI18nLegacyMessageIdFormat: false,
+                ...json.angularCompilerOptions,
                 strictInjectionParameters: true,
                 strictInputAccessModifiers: true,
+                typeCheckHostBindings: angularMajorVersion >= 20 ? true : undefined,
                 strictTemplates: true,
             };
             return json;

package/src/generators/application/lib/index.d.ts

@@ -7,7 +7,6 @@ export * from './create-project';
 export * from './enable-strict-type-checking';
 export * from './normalize-options';
 export * from './normalized-schema';
-export * from './set-app-strict-default';
 export * from './set-generator-defaults';
-export * from './update-editor-tsconfig';
+export * from './update-tsconfig-files';
 export * from './add-serve-static-target';

package/src/generators/application/lib/index.js

@@ -10,7 +10,6 @@ tslib_1.__exportStar(require("./create-project"), exports);
 tslib_1.__exportStar(require("./enable-strict-type-checking"), exports);
 tslib_1.__exportStar(require("./normalize-options"), exports);
 tslib_1.__exportStar(require("./normalized-schema"), exports);
-tslib_1.__exportStar(require("./set-app-strict-default"), exports);
 tslib_1.__exportStar(require("./set-generator-defaults"), exports);
-tslib_1.__exportStar(require("./update-editor-tsconfig"), exports);
+tslib_1.__exportStar(require("./update-tsconfig-files"), exports);
 tslib_1.__exportStar(require("./add-serve-static-target"), exports);

package/src/generators/application/lib/set-generator-defaults.js

@@ -10,6 +10,7 @@ function setGeneratorDefaults(tree, options) {
         linter: options.linter,
         style: options.style,
         unitTestRunner: options.unitTestRunner,
+        strict: !options.strict ? false : undefined,
         ...(nxJson.generators['@nx/angular:application'] || {}),
     };
     (0, devkit_1.updateNxJson)(tree, nxJson);

package/src/generators/application/lib/{update-editor-tsconfig.d.ts → update-tsconfig-files.d.ts}

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

package/src/generators/application/lib/update-tsconfig-files.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateTsconfigFiles = updateTsconfigFiles;
+const devkit_1 = require("@nx/devkit");
+const js_1 = require("@nx/js");
+const configuration_1 = require("@nx/js/src/utils/typescript/configuration");
+const semver_1 = require("semver");
+const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+const update_app_editor_tsconfig_excluded_files_1 = require("../../utils/update-app-editor-tsconfig-excluded-files");
+const version_utils_1 = require("../../utils/version-utils");
+const enable_strict_type_checking_1 = require("./enable-strict-type-checking");
+function updateTsconfigFiles(tree, options) {
+    (0, enable_strict_type_checking_1.enableStrictTypeChecking)(tree, options);
+    updateEditorTsConfig(tree, options);
+    const compilerOptions = {
+        skipLibCheck: true,
+        experimentalDecorators: true,
+        importHelpers: true,
+        target: 'es2022',
+        moduleResolution: 'bundler',
+    };
+    const rootTsConfigPath = (0, js_1.getRootTsConfigFileName)(tree);
+    const { major: angularMajorVersion, version: angularVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+    if ((0, semver_1.lt)(angularVersion, '18.1.0')) {
+        compilerOptions.useDefineForClassFields = false;
+    }
+    if ((0, semver_1.gte)(angularVersion, '18.2.0')) {
+        compilerOptions.isolatedModules = true;
+    }
+    if ((0, semver_1.gte)(angularVersion, '19.1.0')) {
+        // Angular started warning about emitDecoratorMetadata and isolatedModules
+        // in v19.1.0. If enabled in the root tsconfig, we need to disable it.
+        if (shouldDisableEmitDecoratorMetadata(tree, rootTsConfigPath)) {
+            compilerOptions.emitDecoratorMetadata = false;
+        }
+    }
+    if (angularMajorVersion >= 20) {
+        compilerOptions.module = 'preserve';
+    }
+    else {
+        compilerOptions.module = 'es2022';
+        if (options.bundler === 'esbuild') {
+            compilerOptions.esModuleInterop = true;
+        }
+    }
+    (0, devkit_1.updateJson)(tree, `${options.appProjectRoot}/tsconfig.json`, (json) => {
+        json.compilerOptions = {
+            ...json.compilerOptions,
+            ...compilerOptions,
+        };
+        json.compilerOptions = (0, configuration_1.getNeededCompilerOptionOverrides)(tree, json.compilerOptions, rootTsConfigPath);
+        return json;
+    });
+}
+function updateEditorTsConfig(tree, options) {
+    const appTsConfig = (0, devkit_1.readJson)(tree, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'));
+    const types = appTsConfig?.compilerOptions?.types ?? [];
+    if (types?.length) {
+        (0, devkit_1.updateJson)(tree, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.editor.json'), (json) => {
+            json.compilerOptions ??= {};
+            json.compilerOptions.types = Array.from(new Set(types));
+            return json;
+        });
+    }
+    const project = (0, devkit_1.readProjectConfiguration)(tree, options.name);
+    (0, update_app_editor_tsconfig_excluded_files_1.updateAppEditorTsConfigExcludedFiles)(tree, project);
+}
+function shouldDisableEmitDecoratorMetadata(tree, tsConfigPath) {
+    const ts = (0, ensure_typescript_1.ensureTypescript)();
+    const tsSysFromTree = {
+        ...ts.sys,
+        readFile: (path) => tree.read(path, 'utf-8'),
+    };
+    const parsed = ts.parseJsonConfigFileContent(ts.readConfigFile(tsConfigPath, tsSysFromTree.readFile).config, tsSysFromTree, tree.root);
+    return parsed.options.emitDecoratorMetadata === true;
+}

package/src/generators/application/schema.json

@@ -177,7 +177,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"
     }
   },

package/src/generators/component/component.js

@@ -22,10 +22,11 @@ async function componentGenerator(tree, rawOptions) {
         viewEncapsulation: options.viewEncapsulation,
         displayBlock: options.displayBlock,
         selector: options.selector,
-        // 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),
         angularMajorVersion,
+        ngext: options.ngHtml ? '.ng' : '',
         tpl: '',
     });
     if (options.skipTests) {
@@ -41,7 +42,17 @@ async function componentGenerator(tree, rawOptions) {
         tree.delete(pathToStyleFile);
     }
     if (!options.skipImport && !options.standalone) {
-        const modulePath = (0, lib_1.findModuleFromOptions)(tree, options, options.projectRoot);
+        let modulePath;
+        try {
+            modulePath = (0, lib_1.findModuleFromOptions)(tree, options, options.projectRoot);
+        }
+        catch (e) {
+            modulePath = (0, lib_1.findModuleFromOptions)(tree, {
+                ...options,
+                moduleExt: '-module.ts',
+                routingModuleExt: '-routing-module.ts',
+            }, options.projectRoot);
+        }
         (0, utils_1.addToNgModule)(tree, options.directory, modulePath, options.name, options.symbolName, options.fileName, 'declarations', true, options.export);
     }
     (0, lib_1.exportComponentInEntryPoint)(tree, options);

package/src/generators/component/files/__fileName__.ts__tpl__

@@ -6,7 +6,7 @@ import { CommonModule } from '@angular/common';<% } %>
   standalone: <%= standalone %>,<% } %><% if(standalone) { %>
   imports: [CommonModule],<%}%><% if(inlineTemplate) { %>
   template: `<p><%= name %> works!</p>`<% } else { %>
-  templateUrl: './<%= fileName %>.html'<% } if(inlineStyle) { %>,
+  templateUrl: './<%= fileName %><%= ngext %>.html'<% } if(inlineStyle) { %>,
   styles: `<% if(displayBlock){ %>
     :host {
       display: block;

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

@@ -21,7 +21,17 @@ function exportComponentInEntryPoint(tree, schema) {
         return;
     }
     if (!schema.standalone) {
-        const modulePath = (0, module_1.findModuleFromOptions)(tree, schema, root);
+        let modulePath;
+        try {
+            modulePath = (0, module_1.findModuleFromOptions)(tree, schema, root);
+        }
+        catch (e) {
+            modulePath = (0, module_1.findModuleFromOptions)(tree, {
+                ...schema,
+                moduleExt: '-module.ts',
+                routingModuleExt: '-routing-module.ts',
+            }, root);
+        }
         if (!shouldExportInEntryPoint(tree, entryPointPath, modulePath)) {
             return;
         }

package/src/generators/component/lib/module.d.ts

@@ -1,3 +1,8 @@
 import type { Tree } from '@nx/devkit';
-import type { NormalizedSchema } from '../schema';
-export declare function findModuleFromOptions(tree: Tree, options: NormalizedSchema, projectRoot: string): string;
+export type ModuleOptions = {
+    directory: string;
+    module?: string;
+    moduleExt?: string;
+    routingModuleExt?: string;
+};
+export declare function findModuleFromOptions(tree: Tree, options: ModuleOptions, projectRoot: string): string;

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",