Skip to content

Modernize client: zoneless change detection + drop .component suffix - #13

Merged
sis0k0 merged 2 commits into
mainfrom
modernize-angular-idioms
Jul 24, 2026
Merged

Modernize client: zoneless change detection + drop .component suffix#13
sis0k0 merged 2 commits into
mainfrom
modernize-angular-idioms

Conversation

@sis0k0

@sis0k0 sis0k0 commented Jul 24, 2026

Copy link
Copy Markdown
Member

Summary

Adopts two current Angular conventions in the client app (Angular 22).

Zoneless change detection

  • Add provideZonelessChangeDetection() in app.config.ts.
  • Remove the zone.js polyfill from angular.json (build + testing configs) and drop the zone.js dependency from package.json.
  • Simplify main.ts / main.server.ts — bootstrap no longer wires up provideZoneChangeDetection.

Drop the .component file suffix (v20+ naming)

Renamed files and their classes:

Before After
app.component.ts / AppComponent app.ts / App
employees-list.component.ts / EmployeesListComponent employees-list.ts / EmployeesList
employee-form.component.ts / EmployeeFormComponent employee-form.ts / EmployeeForm
add-employee.component.ts / AddEmployeeComponent add-employee.ts / AddEmployee
edit-employee.component.ts / EditEmployeeComponent edit-employee.ts / EditEmployee

All imports/usages in app.routes.ts and the components updated accordingly.

Verification

  • npm run build succeeds (zone.js polyfill bundle gone; SSR prerender still works).
  • Ran the full stack against local MongoDB and drove CRUD in a real browser (Playwright): list/add/edit/delete all work with zero JS errors; SSR renders the list with live data.

sis0k0 added 2 commits July 24, 2026 15:23
- Enable zoneless change detection: add provideZonelessChangeDetection(),
  remove zone.js polyfill from angular.json and the zone.js dependency,
  and simplify main.ts / main.server.ts bootstrap.
- Rename component files to the v20+ convention (drop the .component
  suffix) and their classes accordingly:
  AppComponent -> App, EmployeesListComponent -> EmployeesList,
  EmployeeFormComponent -> EmployeeForm, AddEmployeeComponent -> AddEmployee,
  EditEmployeeComponent -> EditEmployee.
- Update all imports/usages in app.routes.ts and the components.
@sis0k0
sis0k0 merged commit 7c64c1f into main Jul 24, 2026
3 checks passed
@sis0k0
sis0k0 deleted the modernize-angular-idioms branch July 24, 2026 13:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant