feat(angular): generate components without a .component/Component suffix/type

Author: leosvelperez

docs/generated/packages/angular/generators/component.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",
@@ -122,7 +121,7 @@
       }
     },
     "required": ["path"],
-    "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Component\" %}\n\nGenerate a component named `MyComponent` at `apps/my-app/src/lib/my-component/my-component.component.ts`:\n\n```bash\nnx g @nx/angular:component apps/my-app/src/lib/my-component/my-component.ts\n```\n\n{% /tab %}\n\n{% tab label=\"Without Providing the File Extension\" %}\n\nGenerate a component named `MyComponent` at `apps/my-app/src/lib/my-component/my-component.component.ts`:\n\n```bash\nnx g @nx/angular:component apps/my-app/src/lib/my-component/my-component\n```\n\n{% /tab %}\n\n{% tab label=\"With Different Symbol Name\" %}\n\nGenerate a component named `CustomComponent` at `apps/my-app/src/lib/my-component/my-component.component.ts`:\n\n```bash\nnx g @nx/angular:component apps/my-app/src/lib/my-component/my-component --name=custom\n```\n\n{% /tab %}\n\n{% tab label=\"Single File Component\" %}\n\nCreate a component named `my-component` with inline styles and inline template:\n\n```bash\nnx g @nx/angular:component apps/my-app/src/lib/my-component/my-component --inlineStyle --inlineTemplate\n```\n\n{% /tab %}\n\n{% tab label=\"Component with OnPush Change Detection Strategy\" %}\n\nCreate a component named `my-component` with OnPush Change Detection Strategy:\n\n```bash\nnx g @nx/angular:component apps/my-app/src/lib/my-component/my-component --changeDetection=OnPush\n```\n\n{% /tab %}\n",
+    "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Component\" %}\n\nGenerate a component named `Card` at `apps/my-app/src/lib/card/card.ts`:\n\n```bash\nnx g @nx/angular:component apps/my-app/src/lib/card/card.ts\n```\n\n{% /tab %}\n\n{% tab label=\"Without Providing the File Extension\" %}\n\nGenerate a component named `Card` at `apps/my-app/src/lib/card/card.ts`:\n\n```bash\nnx g @nx/angular:component apps/my-app/src/lib/card/card\n```\n\n{% /tab %}\n\n{% tab label=\"With Different Symbol Name\" %}\n\nGenerate a component named `Custom` at `apps/my-app/src/lib/card/card.ts`:\n\n```bash\nnx g @nx/angular:component apps/my-app/src/lib/card/card --name=custom\n```\n\n{% /tab %}\n\n{% tab label=\"With a Component Type\" %}\n\nGenerate a component named `CardComponent` at `apps/my-app/src/lib/card/card.component.ts`:\n\n```bash\nnx g @nx/angular:component apps/my-app/src/lib/card/card --type=component\n```\n\n{% /tab %}\n\n{% tab label=\"Single File Component\" %}\n\nCreate a component named `Card` with inline styles and inline template:\n\n```bash\nnx g @nx/angular:component apps/my-app/src/lib/card/card --inlineStyle --inlineTemplate\n```\n\n{% /tab %}\n\n{% tab label=\"Component with OnPush Change Detection Strategy\" %}\n\nCreate a component named `Card` with `OnPush` Change Detection Strategy:\n\n```bash\nnx g @nx/angular:component apps/my-app/src/lib/card/card --changeDetection=OnPush\n```\n\n{% /tab %}\n",
     "presets": []
   },
   "aliases": ["c"],

docs/generated/packages/angular/generators/scam.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",

e2e/angular/src/cypress-component-tests.test.ts

@@ -80,15 +80,12 @@ describe('Angular Cypress Component Tests', () => {
     }
     // add tailwind
     runCLI(`generate @nx/angular:setup-tailwind --project=${buildableLibName}`);
+    updateFile(`${buildableLibName}/src/lib/input/input.cy.ts`, (content) => {
+      // text-green-500 should now apply
+      return content.replace('rgb(0, 0, 0)', 'rgb(34, 197, 94)');
+    });
     updateFile(
-      `${buildableLibName}/src/lib/input/input.component.cy.ts`,
-      (content) => {
-        // text-green-500 should now apply
-        return content.replace('rgb(0, 0, 0)', 'rgb(34, 197, 94)');
-      }
-    );
-    updateFile(
-      `${buildableLibName}/src/lib/input-standalone/input-standalone.component.cy.ts`,
+      `${buildableLibName}/src/lib/input-standalone/input-standalone.cy.ts`,
       (content) => {
         // text-green-500 should now apply
         return content.replace('rgb(0, 0, 0)', 'rgb(34, 197, 94)');
@@ -149,7 +146,7 @@ function createLib(projectName: string, appName: string, libName: string) {
     `generate @nx/angular:component ${libName}/src/lib/btn-standalone/btn-standalone --inlineTemplate --inlineStyle --export --standalone --no-interactive`
   );
   updateFile(
-    `${libName}/src/lib/btn/btn.component.ts`,
+    `${libName}/src/lib/btn/btn.ts`,
     `
 import { Component, Input } from '@angular/core';
 
@@ -158,13 +155,13 @@ import { Component, Input } from '@angular/core';
   template: '<button class="text-green-500">{{text}}</button>',
   styles: []
 })
-export class BtnComponent {
+export class Btn {
   @Input() text = 'something';
 }
 `
   );
   updateFile(
-    `${libName}/src/lib/btn-standalone/btn-standalone.component.ts`,
+    `${libName}/src/lib/btn-standalone/btn-standalone.ts`,
     `
 import { Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -175,7 +172,7 @@ import { CommonModule } from '@angular/common';
   template: '<button class="text-green-500">standlone-{{text}}</button>',
   styles: [],
 })
-export class BtnStandaloneComponent {
+export class BtnStandalone {
   @Input() text = 'something';
 }
 `
@@ -195,7 +192,7 @@ function createBuildableLib(projectName: string, libName: string) {
   );
   // update cmp implmentation to use tailwind clasasserting in tests
   updateFile(
-    `${libName}/src/lib/input/input.component.ts`,
+    `${libName}/src/lib/input/input.ts`,
     `
 import {Component, Input} from '@angular/core';
 
@@ -204,13 +201,13 @@ import {Component, Input} from '@angular/core';
   template: \`<label class="text-green-500">Email: <input class="border-blue-500" type="email" [readOnly]="readOnly"></label>\`,
     styles  : []
   })
-  export class InputComponent{
+  export class Input{
     @Input() readOnly = false;
   }
   `
   );
   updateFile(
-    `${libName}/src/lib/input-standalone/input-standalone.component.ts`,
+    `${libName}/src/lib/input-standalone/input-standalone.ts`,
     `
 import {Component, Input} from '@angular/core';
 import {CommonModule} from '@angular/common';
@@ -221,7 +218,7 @@ import {CommonModule} from '@angular/common';
   template: \`<label class="text-green-500">Email: <input class="border-blue-500" type="email" [readOnly]="readOnly"></label>\`,
     styles  : []
   })
-  export class InputStandaloneComponent{
+  export class InputStandalone{
     @Input() readOnly = false;
   }
   `
@@ -230,7 +227,7 @@ import {CommonModule} from '@angular/common';
 
 function useLibInApp(projectName: string, appName: string, libName: string) {
   createFile(
-    `${appName}/src/app/app.component.html`,
+    `${appName}/src/app/app.html`,
     `
 <${projectName}-btn></${projectName}-btn>
 <${projectName}-btn-standalone></${projectName}-btn-standalone>
@@ -239,7 +236,7 @@ function useLibInApp(projectName: string, appName: string, libName: string) {
   );
   const btnModuleName = names(libName).className;
   updateFile(
-    `${appName}/src/app/app.component.scss`,
+    `${appName}/src/app/app.scss`,
     `
 @use 'styleguide' as *;
 
@@ -254,14 +251,14 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import {${btnModuleName}Module} from "@${projectName}/${libName}";
 
-import { AppComponent } from './app.component';
-import { NxWelcomeComponent } from './nx-welcome.component';
+import { App } from './app';
+import { NxWelcome } from './nx-welcome';
 
 @NgModule({
-  declarations: [AppComponent, NxWelcomeComponent],
+  declarations: [App, NxWelcome],
   imports: [BrowserModule, ${btnModuleName}Module],
   providers: [],
-  bootstrap: [AppComponent],
+  bootstrap: [App],
 })
 export class AppModule {}
 `
@@ -297,25 +294,25 @@ async function useWorkspaceAssetsInApp(appName: string) {
 
 function updateTestToAssertTailwindIsNotApplied(libName: string) {
   createFile(
-    `${libName}/src/lib/input/input.component.cy.ts`,
+    `${libName}/src/lib/input/input.cy.ts`,
     `
 import { MountConfig } from 'cypress/angular';
-import { InputComponent } from './input.component';
+import { Input } from './input';
 
-describe(InputComponent.name, () => {
-  const config: MountConfig<InputComponent> = {
+describe(Input.name, () => {
+  const config: MountConfig<Input> = {
     declarations: [],
     imports: [],
     providers: [],
   };
 
   it('renders', () => {
-    cy.mount(InputComponent, config);
+    cy.mount(Input, config);
     // make sure tailwind isn't getting applied
     cy.get('label').should('have.css', 'color', 'rgb(0, 0, 0)');
   });
   it('should be readonly', () => {
-    cy.mount(InputComponent, {
+    cy.mount(Input, {
       ...config,
       componentProperties: {
         readOnly: true,
@@ -328,25 +325,25 @@ describe(InputComponent.name, () => {
   );
 
   createFile(
-    `${libName}/src/lib/input-standalone/input-standalone.component.cy.ts`,
+    `${libName}/src/lib/input-standalone/input-standalone.cy.ts`,
     `
 import { MountConfig } from 'cypress/angular';
-import { InputStandaloneComponent } from './input-standalone.component';
+import { InputStandalone } from './input-standalone';
 
-describe(InputStandaloneComponent.name, () => {
-  const config: MountConfig<InputStandaloneComponent> = {
+describe(InputStandalone.name, () => {
+  const config: MountConfig<InputStandalone> = {
     declarations: [],
     imports: [],
     providers: [],
   };
 
   it('renders', () => {
-    cy.mount(InputStandaloneComponent, config);
+    cy.mount(InputStandalone, config);
     // make sure tailwind isn't getting applied
     cy.get('label').should('have.css', 'color', 'rgb(0, 0, 0)');
   });
   it('should be readonly', () => {
-    cy.mount(InputStandaloneComponent, {
+    cy.mount(InputStandalone, {
       ...config,
       componentProperties: {
         readOnly: true,
@@ -367,19 +364,19 @@ function useBuildableLibInLib(
   const buildLibNames = names(buildableLibName);
   // use the buildable lib in lib so now buildableLib has an indirect dep on app
   updateFile(
-    `${libName}/src/lib/btn-standalone/btn-standalone.component.ts`,
+    `${libName}/src/lib/btn-standalone/btn-standalone.ts`,
     `
 import { Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { InputStandaloneComponent } from '@${projectName}/${buildLibNames.fileName}';
+import { InputStandalone } from '@${projectName}/${buildLibNames.fileName}';
 @Component({
   selector: '${projectName}-btn-standalone',
   standalone: true,
-  imports: [CommonModule, InputStandaloneComponent],
+  imports: [CommonModule, InputStandalone],
   template: '<button class="text-green-500">standlone-{{text}}</button>${projectName} <${projectName}-input-standalone></${projectName}-input-standalone>',
   styles: [],
 })
-export class BtnStandaloneComponent {
+export class BtnStandalone {
   @Input() text = 'something';
 }
 `
@@ -392,9 +389,9 @@ function updateBuilableLibTestsToAssertAppStyles(
 ) {
   updateFile(`${appName}/src/styles.css`, `label {color: pink !important;}`);
 
-  removeFile(`${buildableLibName}/src/lib/input/input.component.cy.ts`);
+  removeFile(`${buildableLibName}/src/lib/input/input.cy.ts`);
   updateFile(
-    `${buildableLibName}/src/lib/input-standalone/input-standalone.component.cy.ts`,
+    `${buildableLibName}/src/lib/input-standalone/input-standalone.cy.ts`,
     (content) => {
       // app styles should now apply
       return content.replace('rgb(34, 197, 94)', 'rgb(255, 192, 203)');

e2e/angular/src/misc.test.ts

@@ -45,10 +45,8 @@ describe('Move Angular Project', () => {
     expect(moveOutput).toContain(`CREATE ${newPath}/src/main.ts`);
     expect(moveOutput).toContain(`CREATE ${newPath}/src/styles.css`);
     expect(moveOutput).toContain(`CREATE ${newPath}/src/test-setup.ts`);
-    expect(moveOutput).toContain(
-      `CREATE ${newPath}/src/app/app.component.html`
-    );
-    expect(moveOutput).toContain(`CREATE ${newPath}/src/app/app.component.ts`);
+    expect(moveOutput).toContain(`CREATE ${newPath}/src/app/app.html`);
+    expect(moveOutput).toContain(`CREATE ${newPath}/src/app/app.ts`);
     expect(moveOutput).toContain(`CREATE ${newPath}/src/app/app.config.ts`);
   });
 

e2e/angular/src/module-federation.test.ts

@@ -94,12 +94,12 @@ describe('Angular Module Federation', () => {
       import { ${
         names(secondaryEntry).className
       }Module } from '@${proj}/${sharedLib}/${secondaryEntry}';
-      import { AppComponent } from './app.component';
-      import { NxWelcomeComponent } from './nx-welcome.component';
+      import { App } from './app';
+      import { NxWelcome } from './nx-welcome';
       import { RouterModule } from '@angular/router';
 
       @NgModule({
-        declarations: [AppComponent, NxWelcomeComponent],
+        declarations: [App, NxWelcome],
         imports: [
           BrowserModule,
           ${names(sharedLib).className}Module,
@@ -118,7 +118,7 @@ describe('Angular Module Federation', () => {
           ),
         ],
         providers: [],
-        bootstrap: [AppComponent],
+        bootstrap: [App],
       })
       export class AppModule {}
       `
@@ -132,18 +132,18 @@ describe('Angular Module Federation', () => {
       import { ${
         names(secondaryEntry).className
       }Module } from '@${proj}/${sharedLib}/${secondaryEntry}';
-    import { RemoteEntryComponent } from './entry.component';
-    import { NxWelcomeComponent } from './nx-welcome.component';
+    import { RemoteEntry } from './entry';
+    import { NxWelcome } from './nx-welcome';
 
     @NgModule({
-      declarations: [RemoteEntryComponent, NxWelcomeComponent],
+      declarations: [RemoteEntry, NxWelcome],
       imports: [
         CommonModule,
         ${names(sharedLib).className}Module,
         RouterModule.forChild([
           {
             path: '',
-            component: RemoteEntryComponent,
+            component: RemoteEntry,
           },
         ]),
       ],
@@ -301,7 +301,7 @@ test('renders remotes', async ({ page }) => {
 
     // Update Host to use the module
     updateFile(
-      `${host}/src/app/app.component.ts`,
+      `${host}/src/app/app.ts`,
       `
       import { Component } from '@angular/core';
       import { isEven } from '${remote}/${module}';
@@ -311,7 +311,7 @@ test('renders remotes', async ({ page }) => {
         template: \`<div class="host">{{title}}</div>\`,
         standalone: true
       })
-      export class AppComponent {
+      export class App {
         title = \`shell is \${isEven(2) ? 'even' : 'odd'}\`;
       }`
     );
@@ -373,7 +373,7 @@ test('renders remotes', async ({ page }) => {
 
     // Update Host to use the module
     updateFile(
-      `${remote}/src/app/remote-entry/entry.component.ts`,
+      `${remote}/src/app/remote-entry/entry.ts`,
       `
       import { Component } from '@angular/core';
       import { isEven } from '${childRemote}/${module}';
@@ -383,7 +383,7 @@ test('renders remotes', async ({ page }) => {
         template: \`<div class="childremote">{{title}}</div>\`,
         standalone: true
       })
-      export class RemoteEntryComponent {
+      export class RemoteEntry {
         title = \`shell is \${isEven(2) ? 'even' : 'odd'}\`;
       }`
     );
@@ -398,7 +398,7 @@ test('renders remotes', async ({ page }) => {
         remotes: ['${childRemote}'],
         exposes: {
           './Routes': '${remote}/src/app/remote-entry/entry.routes.ts',
-          './Module': '${remote}/src/app/remote-entry/entry.component.ts',
+          './Module': '${remote}/src/app/remote-entry/entry.ts',
         },
       };