fix(@schematics/angular): generate components without a .component extension/type

To align with the updated style guide, Angular v20 will generate components
without a `.component` file extension type for all component related
files by default. Projects will automatically use this naming convention.
Projects can however opt-out by setting the `type` option to `Component`
for the component schematic. This can be done as a default in the `angular.json`
or directly on the commandline via `--type=Component` when executing `ng generate`.
As an example, `app.component.css` will now be named `app.css`. Additionally,
the TypeScript class name will be `App` instead of the previous `AppComponent`.

Author: clydin

packages/schematics/angular/app-shell/index.ts

@@ -205,7 +205,7 @@ function addServerRoutes(options: AppShellOptions): Rule {
         .filter((node) => node.kind === ts.SyntaxKind.ImportDeclaration)
         .sort((a, b) => a.getStart() - b.getStart());
       const insertPosition = imports[imports.length - 1].getEnd();
-      const routeText = `\n\nconst routes: Routes = [ { path: '${APP_SHELL_ROUTE}', component: AppShellComponent }];`;
+      const routeText = `\n\nconst routes: Routes = [ { path: '${APP_SHELL_ROUTE}', component: AppShell }];`;
       recorder.insertRight(insertPosition, routeText);
       host.commitUpdate(recorder);
     }
@@ -285,20 +285,15 @@ function addStandaloneServerRoute(options: AppShellOptions): Rule {
         multi: true,
         useValue: [{
           path: '${APP_SHELL_ROUTE}',
-          component: AppShellComponent
+          component: AppShell
         }]
       }\n  `,
     ];
 
     recorder.insertRight(providersLiteral.getStart(), `[\n${updatedProvidersString.join(',\n')}]`);
 
     applyToUpdateRecorder(recorder, [
-      insertImport(
-        configSourceFile,
-        configFilePath,
-        'AppShellComponent',
-        './app-shell/app-shell.component',
-      ),
+      insertImport(configSourceFile, configFilePath, 'AppShell', './app-shell/app-shell'),
     ]);
     host.commitUpdate(recorder);
   };
@@ -338,16 +333,11 @@ function addServerRoutingConfig(options: AppShellOptions, isStandalone: boolean)
     }
 
     recorder = host.beginUpdate(configFilePath);
-    recorder.insertLeft(functionCall.end - 1, `, withAppShell(AppShellComponent)`);
+    recorder.insertLeft(functionCall.end - 1, `, withAppShell(AppShell)`);
 
     applyToUpdateRecorder(recorder, [
       insertImport(configSourceFile, configFilePath, 'withAppShell', '@angular/ssr'),
-      insertImport(
-        configSourceFile,
-        configFilePath,
-        'AppShellComponent',
-        './app-shell/app-shell.component',
-      ),
+      insertImport(configSourceFile, configFilePath, 'AppShell', './app-shell/app-shell'),
     ]);
 
     host.commitUpdate(recorder);

packages/schematics/angular/app-shell/index_spec.ts

@@ -83,14 +83,14 @@ describe('App Shell Schematic', () => {
     it('should work if server config was added prior to running the app-shell schematic', async () => {
       let tree = await schematicRunner.runSchematic('server', defaultOptions, appTree);
       tree = await schematicRunner.runSchematic('app-shell', defaultOptions, tree);
-      expect(tree.exists('/projects/bar/src/app/app-shell/app-shell.component.ts')).toBe(true);
+      expect(tree.exists('/projects/bar/src/app/app-shell/app-shell.ts')).toBe(true);
     });
 
     it('should create the shell component', async () => {
       const tree = await schematicRunner.runSchematic('app-shell', defaultOptions, appTree);
-      expect(tree.exists('/projects/bar/src/app/app-shell/app-shell.component.ts')).toBe(true);
+      expect(tree.exists('/projects/bar/src/app/app-shell/app-shell.ts')).toBe(true);
       const content = tree.readContent('/projects/bar/src/app/app.module.server.ts');
-      expect(content).toMatch(/app-shell\.component/);
+      expect(content).toMatch(/app-shell/);
     });
   });
 
@@ -118,27 +118,25 @@ describe('App Shell Schematic', () => {
 
     it('should create the shell component', async () => {
       const tree = await schematicRunner.runSchematic('app-shell', defaultOptions, appTree);
-      expect(tree.exists('/projects/bar/src/app/app-shell/app-shell.component.ts')).toBe(true);
+      expect(tree.exists('/projects/bar/src/app/app-shell/app-shell.ts')).toBe(true);
       const content = tree.readContent('/projects/bar/src/app/app.config.server.ts');
 
-      expect(content).toMatch(/app-shell\.component/);
+      expect(content).toMatch(/app-shell/);
     });
 
     it(`should update the 'provideServerRouting' call to include 'withAppShell'`, async () => {
       const tree = await schematicRunner.runSchematic('app-shell', defaultOptions, appTree);
       const content = tree.readContent('/projects/bar/src/app/app.config.server.ts');
       expect(tags.oneLine`${content}`).toContain(
-        tags.oneLine`provideServerRouting(serverRoutes, withAppShell(AppShellComponent))`,
+        tags.oneLine`provideServerRouting(serverRoutes, withAppShell(AppShell))`,
       );
     });
 
-    it(`should add import to 'AppShellComponent'`, async () => {
+    it(`should add import to 'AppShell'`, async () => {
       const tree = await schematicRunner.runSchematic('app-shell', defaultOptions, appTree);
       const filePath = '/projects/bar/src/app/app.config.server.ts';
       const content = tree.readContent(filePath);
-      expect(content).toContain(
-        `import { AppShellComponent } from './app-shell/app-shell.component';`,
-      );
+      expect(content).toContain(`import { AppShell } from './app-shell/app-shell';`);
     });
   });
 });

packages/schematics/angular/application/files/common-files/src/app/app.component.ng.html.template renamed to packages/schematics/angular/application/files/common-files/src/app/app.ng.html.template

@@ -2,17 +2,17 @@ import { NgModule<% if(experimentalZoneless) { %>, provideExperimentalZonelessCh
 import { BrowserModule } from '@angular/platform-browser';
 <% if (routing) { %>
 import { AppRoutingModule } from './app-routing.module';<% } %>
-import { AppComponent } from './app.component';
+import { App } from './app';
 
 @NgModule({
   declarations: [
-    AppComponent
+    App
   ],
   imports: [
     BrowserModule<% if (routing) { %>,
     AppRoutingModule<% } %>
   ],
   providers: [<% if (experimentalZoneless) { %>provideExperimentalZonelessChangeDetection()<% } %>],
-  bootstrap: [AppComponent]
+  bootstrap: [App]
 })
 export class AppModule { }

packages/schematics/angular/application/files/module-files/src/app/app.module.ts.template

@@ -1,35 +1,35 @@
 <% if(experimentalZoneless) { %>import { provideExperimentalZonelessChangeDetection } from '@angular/core';
 <% } %>import { TestBed } from '@angular/core/testing';<% if (routing) { %>
 import { RouterModule } from '@angular/router';<% } %>
-import { AppComponent } from './app.component';
+import { App } from './app';
 
-describe('AppComponent', () => {
+describe('App', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({<% if (routing) { %>
       imports: [
         RouterModule.forRoot([])
       ],<% } %>
       declarations: [
-        AppComponent
+        App
       ],<% if(experimentalZoneless) { %>
       providers: [provideExperimentalZonelessChangeDetection()]<% } %>
     }).compileComponents();
   });
 
   it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.createComponent(App);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
 
   it(`should have as title '<%= name %>'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.createComponent(App);
     const app = fixture.componentInstance;
     expect(app.title).toEqual('<%= name %>');
   });
 
   it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
     expect(compiled.querySelector('h1')?.textContent).toContain('Hello, <%= name %>');

packages/schematics/angular/application/files/module-files/src/app/app.component.spec.ts.template renamed to packages/schematics/angular/application/files/module-files/src/app/app.spec.ts.template

@@ -9,11 +9,11 @@ import { Component } from '@angular/core';
      %><router-outlet /><%
     } %>
   `,<% } else { %>
-  templateUrl: './app.component.ng.html',<% } %>
+  templateUrl: './app.ng.html',<% } %>
   standalone: false,<% if(inlineStyle) { %>
   styles: []<% } else { %>
-  styleUrl: './app.component.<%= style %>'<% } %>
+  styleUrl: './app.<%= style %>'<% } %>
 })
-export class AppComponent {
+export class App {
   title = '<%= name %>';
 }

packages/schematics/angular/application/files/module-files/src/app/app.component.ts.template renamed to packages/schematics/angular/application/files/module-files/src/app/app.ts.template

@@ -1,29 +1,29 @@
 <% if(experimentalZoneless) { %>import { provideExperimentalZonelessChangeDetection } from '@angular/core';
 <% } %>import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
+import { App } from './app';
 
-describe('AppComponent', () => {
+describe('App', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AppComponent],<% if(experimentalZoneless) { %>
+      imports: [App],<% if(experimentalZoneless) { %>
       providers: [provideExperimentalZonelessChangeDetection()]<% } %>
     }).compileComponents();
   });
 
   it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.createComponent(App);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
 
   it(`should have the '<%= name %>' title`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.createComponent(App);
     const app = fixture.componentInstance;
     expect(app.title).toEqual('<%= name %>');
   });
 
   it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.createComponent(App);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
     expect(compiled.querySelector('h1')?.textContent).toContain('Hello, <%= name %>');

packages/schematics/angular/application/files/standalone-files/src/app/app.component.spec.ts.template renamed to packages/schematics/angular/application/files/standalone-files/src/app/app.spec.ts.template

@@ -11,10 +11,10 @@ import { RouterOutlet } from '@angular/router';<% } %>
      %><router-outlet /><%
     } %>
   `,<% } else { %>
-  templateUrl: './app.component.ng.html',<% } if(inlineStyle) { %>
+  templateUrl: './app.ng.html',<% } if(inlineStyle) { %>
   styles: [],<% } else { %>
-  styleUrl: './app.component.<%= style %>'<% } %>
+  styleUrl: './app.<%= style %>'<% } %>
 })
-export class AppComponent {
+export class App {
   title = '<%= name %>';
 }

packages/schematics/angular/application/files/standalone-files/src/app/app.component.ts.template renamed to packages/schematics/angular/application/files/standalone-files/src/app/app.ts.template

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

packages/schematics/angular/application/files/standalone-files/src/main.ts.template

@@ -56,10 +56,10 @@ describe('Application Schematic', () => {
         '/projects/foo/src/main.ts',
         '/projects/foo/src/styles.css',
         '/projects/foo/src/app/app.module.ts',
-        '/projects/foo/src/app/app.component.css',
-        '/projects/foo/src/app/app.component.ng.html',
-        '/projects/foo/src/app/app.component.spec.ts',
-        '/projects/foo/src/app/app.component.ts',
+        '/projects/foo/src/app/app.css',
+        '/projects/foo/src/app/app.ng.html',
+        '/projects/foo/src/app/app.spec.ts',
+        '/projects/foo/src/app/app.ts',
       ]),
     );
   });
@@ -266,10 +266,10 @@ describe('Application Schematic', () => {
           '/src/index.html',
           '/src/main.ts',
           '/src/styles.css',
-          '/src/app/app.component.css',
-          '/src/app/app.component.ng.html',
-          '/src/app/app.component.spec.ts',
-          '/src/app/app.component.ts',
+          '/src/app/app.css',
+          '/src/app/app.ng.html',
+          '/src/app/app.spec.ts',
+          '/src/app/app.ts',
         ]),
       );
     });
@@ -447,9 +447,9 @@ describe('Application Schematic', () => {
     const files = tree.files;
     [
       '/projects/foo/tsconfig.spec.json',
-      '/projects/foo/src/app/app.component.css',
-      '/projects/foo/src/app/app.component.ng.html',
-      '/projects/foo/src/app/app.component.spec.ts',
+      '/projects/foo/src/app/app.css',
+      '/projects/foo/src/app/app.ng.html',
+      '/projects/foo/src/app/app.spec.ts',
     ].forEach((x) => expect(files).not.toContain(x));
 
     expect(files).toEqual(
@@ -459,7 +459,7 @@ describe('Application Schematic', () => {
         '/projects/foo/src/index.html',
         '/projects/foo/src/main.ts',
         '/projects/foo/src/styles.css',
-        '/projects/foo/src/app/app.component.ts',
+        '/projects/foo/src/app/app.ts',
       ]),
     );
   });
@@ -473,8 +473,8 @@ describe('Application Schematic', () => {
       '/projects/foo/tsconfig.spec.json',
       '/projects/foo/karma.conf.js',
       '/projects/foo/src/test.ts',
-      '/projects/foo/src/app/app.component.ng.html',
-      '/projects/foo/src/app/app.component.spec.ts',
+      '/projects/foo/src/app/app.ng.html',
+      '/projects/foo/src/app/app.spec.ts',
     ].forEach((x) => expect(files).not.toContain(x));
 
     expect(files).toEqual(
@@ -484,8 +484,8 @@ describe('Application Schematic', () => {
         '/projects/foo/src/index.html',
         '/projects/foo/src/main.ts',
         '/projects/foo/src/styles.css',
-        '/projects/foo/src/app/app.component.css',
-        '/projects/foo/src/app/app.component.ts',
+        '/projects/foo/src/app/app.css',
+        '/projects/foo/src/app/app.ts',
       ]),
     );
   });
@@ -499,8 +499,8 @@ describe('Application Schematic', () => {
       '/projects/foo/tsconfig.spec.json',
       '/projects/foo/karma.conf.js',
       '/projects/foo/src/test.ts',
-      '/projects/foo/src/app/app.component.css',
-      '/projects/foo/src/app/app.component.spec.ts',
+      '/projects/foo/src/app/app.css',
+      '/projects/foo/src/app/app.spec.ts',
     ].forEach((x) => expect(files).not.toContain(x));
 
     expect(files).toEqual(
@@ -510,8 +510,8 @@ describe('Application Schematic', () => {
         '/projects/foo/src/index.html',
         '/projects/foo/src/main.ts',
         '/projects/foo/src/styles.css',
-        '/projects/foo/src/app/app.component.ng.html',
-        '/projects/foo/src/app/app.component.ts',
+        '/projects/foo/src/app/app.ng.html',
+        '/projects/foo/src/app/app.ts',
       ]),
     );
   });
@@ -531,10 +531,10 @@ describe('Application Schematic', () => {
         '/projects/foo/src/main.ts',
         '/projects/foo/src/styles.css',
         '/projects/foo/src/app/app.config.ts',
-        '/projects/foo/src/app/app.component.css',
-        '/projects/foo/src/app/app.component.ng.html',
-        '/projects/foo/src/app/app.component.spec.ts',
-        '/projects/foo/src/app/app.component.ts',
+        '/projects/foo/src/app/app.css',
+        '/projects/foo/src/app/app.ng.html',
+        '/projects/foo/src/app/app.spec.ts',
+        '/projects/foo/src/app/app.ts',
       ]),
     );
   });
@@ -558,7 +558,7 @@ describe('Application Schematic', () => {
   it('should create a standalone component', async () => {
     const options = { ...defaultOptions, standalone: true };
     const tree = await schematicRunner.runSchematic('application', options, workspaceTree);
-    const component = tree.readContent('/projects/foo/src/app/app.component.ts');
+    const component = tree.readContent('/projects/foo/src/app/app.ts');
 
     expect(component).not.toContain('standalone');
   });
@@ -570,7 +570,7 @@ describe('Application Schematic', () => {
 
     expect(tree.files).toContain('/projects/foo/src/app/app.routes.ts');
 
-    const component = tree.readContent('/projects/foo/src/app/app.component.ts');
+    const component = tree.readContent('/projects/foo/src/app/app.ts');
     expect(component).toContain(`import { RouterOutlet } from '@angular/router';`);
     expect(component).toContain(`imports: [RouterOutlet]`);
 
@@ -655,7 +655,7 @@ describe('Application Schematic', () => {
 
       const path = '/projects/foo/src/app/app.module.ts';
       const content = tree.readContent(path);
-      expect(content).toMatch(/import { AppComponent } from '\.\/app\.component';/);
+      expect(content).toMatch(/import { App } from '\.\/app';/);
     });
 
     it('should create all files of an application', async () => {
@@ -672,10 +672,10 @@ describe('Application Schematic', () => {
           '/projects/foo/src/styles.css',
           '/projects/foo/src/app/app-routing.module.ts',
           '/projects/foo/src/app/app.module.ts',
-          '/projects/foo/src/app/app.component.css',
-          '/projects/foo/src/app/app.component.ng.html',
-          '/projects/foo/src/app/app.component.spec.ts',
-          '/projects/foo/src/app/app.component.ts',
+          '/projects/foo/src/app/app.css',
+          '/projects/foo/src/app/app.ng.html',
+          '/projects/foo/src/app/app.spec.ts',
+          '/projects/foo/src/app/app.ts',
         ]),
       );
     });