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/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

@@ -14,6 +14,6 @@ import { Component } from '@angular/core';
   styles: []<% } else { %>
   styleUrl: './app.component.<%= 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

@@ -55,6 +55,9 @@ export default function (options: ComponentOptions): Rule {
 
     options.module = findModuleFromOptions(host, options);
 
+    // Schematic templates require a defined type value
+    options.type ??= '';
+
     const parsedPath = parseName(options.path, options.name);
     options.name = parsedPath.name;
     options.path = parsedPath.path;

packages/schematics/angular/component/index.ts

@@ -93,8 +93,7 @@
     },
     "type": {
       "type": "string",
-      "description": "Append a custom type to the component's filename. For example, if you set the type to `container`, the file will be named `my-component.container.ts`.",
-      "default": "Component"
+      "description": "Append a custom type to the component's filename. For example, if you set the type to `container`, the file will be named `my-component.container.ts`."
     },
     "skipTests": {
       "type": "boolean",

packages/schematics/angular/component/schema.json

@@ -8,5 +8,5 @@ import { ng } from '../../utils/process';
 export default async function () {
   await ng('build', '--aot=true', '--configuration=development');
   const content = await readFile('dist/test-project/browser/main.js', 'utf-8');
-  assert.match(content, /AppComponent_Factory/);
+  assert.match(content, /App_Factory/);
 }