feat(angular): generate directives without a .directive/Directive suffix/type (#31236)

- Update generators to generate directives without the
`.directive`/`Directive` suffix/type by default for Angular v20
- Keep the ability to generate directives with the
`.directive`/`Directive` suffix/type by providing the `type` option for
the `@nx/angular:directive` and `@nx/angular:scam-directive` generators
- When the workspace uses a version lower than v20, the generators will
still generate directives with the `.directive`/`Directive` suffix/type
by default

Note: a migration will be provided in a separate PR so existing
workspaces continue generating directives with the
`.directive`/`Directive` suffix/type.

Author: leosvelperez

docs/generated/packages/angular/generators/directive.json

@@ -15,11 +15,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"
       }
     ],
@@ -73,6 +77,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,

docs/generated/packages/angular/generators/scam-directive.json

@@ -13,11 +13,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"
       }
     ],
@@ -65,6 +69,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",

packages/angular/src/generators/directive/__snapshots__/directive.spec.ts.snap

@@ -2,11 +2,11 @@
 
 exports[`directive generator --no-standalone should export the directive correctly when directory is nested deeper 1`] = `
 "import { NgModule } from '@angular/core';
-import { TestDirective } from './my-directives/test/test.directive';
+import { Test } from './my-directives/test/test';
 @NgModule({
   imports: [],
-  declarations: [TestDirective],
-  exports: [TestDirective],
+  declarations: [Test],
+  exports: [Test],
 })
 export class TestModule {}
 "
@@ -19,18 +19,18 @@ exports[`directive generator --no-standalone should generate a directive with te
   selector: '[test]',
   standalone: false,
 })
-export class TestDirective {
+export class Test {
   constructor() {}
 }
 "
 `;
 
 exports[`directive generator --no-standalone should generate a directive with test files and attach to the NgModule automatically 2`] = `
-"import { TestDirective } from './test.directive';
+"import { Test } from './test';
 
-describe('TestDirective', () => {
+describe('Test', () => {
   it('should create an instance', () => {
-    const directive = new TestDirective();
+    const directive = new Test();
     expect(directive).toBeTruthy();
   });
 });
@@ -39,10 +39,10 @@ describe('TestDirective', () => {
 
 exports[`directive generator --no-standalone should generate a directive with test files and attach to the NgModule automatically 3`] = `
 "import { NgModule } from '@angular/core';
-import { TestDirective } from './test.directive';
+import { Test } from './test';
 @NgModule({
   imports: [],
-  declarations: [TestDirective],
+  declarations: [Test],
   exports: [],
 })
 export class TestModule {}
@@ -55,10 +55,10 @@ exports[`directive generator --no-standalone should import the directive correct
 
 exports[`directive generator --no-standalone should import the directive correctly 3`] = `
 "import { NgModule } from '@angular/core';
-import { TestDirective } from './test.directive';
+import { Test } from './test';
 @NgModule({
   imports: [],
-  declarations: [TestDirective],
+  declarations: [Test],
   exports: [],
 })
 export class TestModule {}
@@ -72,18 +72,18 @@ exports[`directive generator --no-standalone should import the directive correct
   selector: '[test]',
   standalone: false
 })
-export class TestDirective {
+export class Test {
   constructor() {}
 }
 "
 `;
 
 exports[`directive generator --no-standalone should import the directive correctly when directory is nested deeper 2`] = `
-"import { TestDirective } from './test.directive';
+"import { Test } from './test';
 
-describe('TestDirective', () => {
+describe('Test', () => {
   it('should create an instance', () => {
-    const directive = new TestDirective();
+    const directive = new Test();
     expect(directive).toBeTruthy();
   });
 });
@@ -92,10 +92,10 @@ describe('TestDirective', () => {
 
 exports[`directive generator --no-standalone should import the directive correctly when directory is nested deeper 3`] = `
 "import { NgModule } from '@angular/core';
-import { TestDirective } from './my-directives/test/test.directive';
+import { Test } from './my-directives/test/test';
 @NgModule({
   imports: [],
-  declarations: [TestDirective],
+  declarations: [Test],
   exports: [],
 })
 export class TestModule {}
@@ -108,18 +108,18 @@ exports[`directive generator should generate correctly 1`] = `
 @Directive({
   selector: '[test]',
 })
-export class TestDirective {
+export class Test {
   constructor() {}
 }
 "
 `;
 
 exports[`directive generator should generate correctly 2`] = `
-"import { TestDirective } from './test.directive';
+"import { Test } from './test';
 
-describe('TestDirective', () => {
+describe('Test', () => {
   it('should create an instance', () => {
-    const directive = new TestDirective();
+    const directive = new Test();
     expect(directive).toBeTruthy();
   });
 });
@@ -132,18 +132,18 @@ exports[`directive generator should handle path with file extension 1`] = `
 @Directive({
   selector: '[test]',
 })
-export class TestDirective {
+export class Test {
   constructor() {}
 }
 "
 `;
 
 exports[`directive generator should handle path with file extension 2`] = `
-"import { TestDirective } from './test.directive';
+"import { Test } from './test.directive';
 
-describe('TestDirective', () => {
+describe('Test', () => {
   it('should create an instance', () => {
-    const directive = new TestDirective();
+    const directive = new Test();
     expect(directive).toBeTruthy();
   });
 });