Modernize client: zoneless change detection + drop .component suffix

client/angular.json

@@ -16,9 +16,7 @@
             "outputPath": "dist/client",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
+            "polyfills": [],
             "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
@@ -63,10 +61,7 @@
               "aot": false,
               "optimization": false,
               "extractLicenses": false,
-              "polyfills": [
-                "zone.js",
-                "zone.js/testing"
-              ]
+              "polyfills": []
             }
           },
           "defaultConfiguration": "production"

client/package.json

@@ -26,8 +26,7 @@
     "@angular/ssr": "^22.0.7",
     "express": "^4.18.2",
     "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.15.1"
+    "tslib": "^2.3.0"
   },
   "devDependencies": {
     "@angular/build": "^22.0.7",

client/src/app/add-employee/add-employee.component.ts → client/src/app/add-employee/add-employee.ts

@@ -1,13 +1,13 @@
 import { Component, ChangeDetectionStrategy, inject } from '@angular/core';
 import { Router } from '@angular/router';
-import { EmployeeFormComponent } from '../employee-form/employee-form.component';
+import { EmployeeForm } from '../employee-form/employee-form';
 import { Employee } from '../employee';
 import { EmployeeService } from '../employee.service';
 import { MatCardModule } from '@angular/material/card';
 
 @Component({
     selector: 'app-add-employee',
-    imports: [EmployeeFormComponent, MatCardModule],
+    imports: [EmployeeForm, MatCardModule],
     template: `
     <mat-card>
       <mat-card-header>
@@ -23,7 +23,7 @@ import { MatCardModule } from '@angular/material/card';
     changeDetection: ChangeDetectionStrategy.OnPush,
     styles: ``
 })
-export class AddEmployeeComponent {
+export class AddEmployee {
   private readonly router = inject(Router);
   private readonly employeeService = inject(EmployeeService);
 

client/src/app/app.config.ts

@@ -1,4 +1,4 @@
-import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
 import { provideRouter, withComponentInputBinding } from '@angular/router';
 
 import { routes } from './app.routes';
@@ -9,6 +9,7 @@ import { provideAnimationsAsync } from '@angular/platform-browser/animations/asy
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
+    provideZonelessChangeDetection(),
     provideRouter(routes, withComponentInputBinding()),
     provideClientHydration(withNoIncrementalHydration()),
     provideHttpClient(withFetch()),

client/src/app/app.routes.ts

@@ -1,9 +1,9 @@
 import { inject } from '@angular/core';
 import { ResolveFn, Router, RedirectCommand, Routes } from '@angular/router';
 import { catchError, of } from 'rxjs';
-import { EmployeesListComponent } from './employees-list/employees-list.component';
-import { AddEmployeeComponent } from './add-employee/add-employee.component';
-import { EditEmployeeComponent } from './edit-employee/edit-employee.component';
+import { EmployeesList } from './employees-list/employees-list';
+import { AddEmployee } from './add-employee/add-employee';
+import { EditEmployee } from './edit-employee/edit-employee';
 import { Employee } from './employee';
 import { EmployeeService } from './employee.service';
 
@@ -15,7 +15,7 @@ const employeeResolver: ResolveFn<Employee | RedirectCommand> = (route) => {
 };
 
 export const routes: Routes = [
-  { path: '', component: EmployeesListComponent, title: 'Employees List' },
-  { path: 'new', component: AddEmployeeComponent },
-  { path: 'edit/:id', component: EditEmployeeComponent, resolve: { employee: employeeResolver } },
+  { path: '', component: EmployeesList, title: 'Employees List' },
+  { path: 'new', component: AddEmployee },
+  { path: 'edit/:id', component: EditEmployee, resolve: { employee: employeeResolver } },
 ];

client/src/app/app.component.ts → client/src/app/app.ts

@@ -24,6 +24,6 @@ import { MatToolbarModule } from '@angular/material/toolbar';
     </main>
   `
 })
-export class AppComponent {
+export class App {
   title = 'client';
 }

client/src/app/edit-employee/edit-employee.component.ts → client/src/app/edit-employee/edit-employee.ts

@@ -1,13 +1,13 @@
 import { Component, ChangeDetectionStrategy, input, inject } from '@angular/core';
-import { EmployeeFormComponent } from '../employee-form/employee-form.component';
+import { EmployeeForm } from '../employee-form/employee-form';
 import { Router } from '@angular/router';
 import { Employee } from '../employee';
 import { EmployeeService } from '../employee.service';
 import { MatCardModule } from '@angular/material/card';
 
 @Component({
     selector: 'app-edit-employee',
-    imports: [EmployeeFormComponent, MatCardModule],
+    imports: [EmployeeForm, MatCardModule],
     template: `
     <mat-card>
       <mat-card-header>
@@ -24,7 +24,7 @@ import { MatCardModule } from '@angular/material/card';
     changeDetection: ChangeDetectionStrategy.OnPush,
     styles: ``
 })
-export class EditEmployeeComponent {
+export class EditEmployee {
   private readonly router = inject(Router);
   private readonly employeeService = inject(EmployeeService);
 

client/src/app/employee-form/employee-form.component.ts → client/src/app/employee-form/employee-form.ts

@@ -84,7 +84,7 @@ import { Employee } from '../employee';
     </form>
   `
 })
-export class EmployeeFormComponent {
+export class EmployeeForm {
   private readonly formBuilder = inject(FormBuilder);
 
   initialState = input<Employee>();

client/src/app/employees-list/employees-list.component.ts → client/src/app/employees-list/employees-list.ts

@@ -67,7 +67,7 @@ import { MatCardModule } from '@angular/material/card';
     </mat-card>
   `
 })
-export class EmployeesListComponent {
+export class EmployeesList {
   private readonly employeeService = inject(EmployeeService);
   private readonly employeesResource = this.employeeService.employeesResource;
 

client/src/main.server.ts

@@ -1,8 +1,7 @@
-import { provideZoneChangeDetection } from "@angular/core";
 import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser';
-import { AppComponent } from './app/app.component';
+import { App } from './app/app';
 import { config } from './app/app.config.server';
 
-const bootstrap = (context: BootstrapContext) => bootstrapApplication(AppComponent, {...config, providers: [provideZoneChangeDetection({ eventCoalescing: true }), ...config.providers]}, context);
+const bootstrap = (context: BootstrapContext) => bootstrapApplication(App, config, context);
 
 export default bootstrap;

client/src/main.ts

@@ -1,7 +1,6 @@
-import { provideZoneChangeDetection } from "@angular/core";
 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, providers: [provideZoneChangeDetection({ eventCoalescing: true }), ...appConfig.providers]})
+bootstrapApplication(App, appConfig)
   .catch((err) => console.error(err));