Phase 2: Upgrade Angular 17 to 18

[devin-ai-integration]

Summary

Upgrades Angular from v17 to v18 via ng update schematics, converts deprecated class-based route resolvers to functional resolvers, and fixes removed async test helper usage.

Angular & tooling upgrades (via ng update):

• @angular/core, @angular/cli, and all @angular/* packages: 17.3.x → 18.2.x
• @angular/material and @angular/cdk: 17.3.10 → 18.2.14
• @angular-devkit/build-angular: 17.3.17 → 18.2.21
• @angular/compiler-cli: 17.3.12 → 18.2.14

HttpClientModule → provideHttpClient() migration (via schematic):

• app.module.ts: Replaced HttpClientModule import with provideHttpClient(withInterceptorsFromDi()) in providers
• 6 service spec files: Replaced HttpClientTestingModule with provideHttpClient(withInterceptorsFromDi()) + provideHttpClientTesting()

Class-based resolvers → functional resolvers (manual):

• VetResolver class → vetResolver: ResolveFn<Vet> using inject(VetService)
• SpecResolver class → specResolver: ResolveFn<Specialty[]> using inject(SpecialtyService)
• Updated vets-routing.module.ts route config to reference the new functional exports
• Removed resolver classes from providers arrays in vets.module.ts and specialties.module.ts

Test fixes:

• Removed deprecated async import from @angular/core/testing (removed in v18) in 3 spec files; replaced call-site usages with waitForAsync

Production build and all 43 unit tests pass.

Review & Testing Checklist for Human

• Manually test the /vets/:id/edit route — both resolvers (vetResolver, specResolver) are used here. The conversion from class-based to functional resolvers is a manual change; verify that vet data and specialties list load correctly before the edit form renders.
• Verify HttpClient injection still works at runtime — the schematic migrated all services from HttpClientModule to provideHttpClient(withInterceptorsFromDi()). Confirm that API calls (owner CRUD, pet CRUD, visit CRUD, vet CRUD) function correctly against a running backend.
• Check formatting in schematic-generated test configs — the ng update schematic produced inconsistent indentation in several TestBed.configureTestingModule() blocks (e.g., imports: [] at 0-indent inside the config object). This is cosmetic but may warrant cleanup.

Recommended test plan: Start the Spring PetClinic backend, run ng serve, and exercise the vet edit flow (navigate to Vets → click edit on a vet → verify specialties dropdown loads → save). Also spot-check owner/pet/visit CRUD to confirm HttpClient migration didn't break anything.

Notes

• This is Phase 2 of a multi-phase Angular migration (16 → 17 → 18 → 19). Phase 0 (Dockerfile) is PR Phase 0: Update Node to 20-alpine and Nginx to 1.27-alpine #10, Phase 1 (Angular 16→17) is PR Phase 1: Upgrade Angular 16 to 17 #12.
• The @angular-eslint/* packages remain at v17.5.3 — they were not updated in this phase since ng update @angular-eslint/schematics@18 was not run. This should be fine for now but may need updating in Phase 3 or a follow-up.
• The HttpClientModule → provideHttpClient() migration was performed automatically by the Angular 18 ng update schematic (not deferred to Phase 3 as originally planned).

Link to Devin session: https://partner-workshops.devinenterprise.com/sessions/010af0d2621c4376ac0819869f987cf9

---

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 3 additional findings.