Skip to content

feat: Upgrade Angular 16.2.1 → 21.2.11#19

Open
devin-ai-integration[bot] wants to merge 2 commits into
mainfrom
devin/1777935753-upgrade-angular-21
Open

feat: Upgrade Angular 16.2.1 → 21.2.11#19
devin-ai-integration[bot] wants to merge 2 commits into
mainfrom
devin/1777935753-upgrade-angular-21

Conversation

@devin-ai-integration
Copy link
Copy Markdown
Contributor

@devin-ai-integration devin-ai-integration Bot commented May 4, 2026

Summary

Major Angular version upgrade from 16.2.1 to 21.2.11 (5 major versions), with all breaking changes handled, deprecated APIs fixed, and dependencies updated.

Key changes:

  • Angular 16 → 21: All @angular/* packages updated to 21.2.x
  • TypeScript 4.9 → 5.9: Module resolution changed from node to bundler
  • RxJS 6 → 7: throwError updated to factory function form
  • HttpClientModule → provideHttpClient(): Replaced deprecated module with provider function
  • BrowserAnimationsModule → provideAnimationsAsync(): Modern async animations provider
  • Standalone default: Added standalone: false to all NgModule-declared components (Angular 19+ default)
  • Moment imports: Switched from namespace to default import syntax
  • Removed deprecated files: polyfills.ts, test.ts, e2e/, protractor.conf.js
  • Updated ESLint: angular-eslint 21 with deprecated rules disabled
  • Updated Karma: Replaced karma-coverage-istanbul-reporter with karma-coverage
  • Removed deprecated packages: codelyzer, protractor, core-js, ts-node, etc.
  • Removed stale e2e script from package.json

All breaking changes are documented in BREAKING_CHANGES.md.

Review & Testing Checklist for Human

  • Verify the app builds successfully: npm run build
  • Verify lint passes: npm run lint
  • Test the app runs with the backend API: npm start (requires Spring PetClinic backend at localhost:9966)
  • Spot-check a few pages (owners list, add pet, visit forms) to confirm Material DatePicker and forms still work
  • Review BREAKING_CHANGES.md for completeness

Notes

  • The browser builder (webpack) is retained in angular.json instead of the newer application builder (esbuild) due to a known incompatibility with Bootstrap 3's duplicate font file references. The browser builder is still supported in Angular 21.
  • ESLint rules prefer-standalone, prefer-inject, and template/prefer-control-flow are disabled — these are style recommendations for new Angular patterns (standalone components, inject() function, @if/@for control flow) that would require a full codebase refactor beyond the scope of a version upgrade.
  • The e2e/ directory was removed since Protractor is no longer supported. A migration to Playwright or Cypress is recommended for E2E testing.

Link to Devin session: https://partner-workshops.devinenterprise.com/sessions/121f358bf89f43d6840230e5a0e06ac0
Requested by: @DhrovS


Open in Devin Review

Major version upgrade spanning Angular 16 → 21 with all breaking changes handled:

- Update all @angular/* packages to 21.2.11
- Update TypeScript 4.9.5 → 5.9.3
- Update RxJS 6 → 7 (fix throwError to factory form)
- Update zone.js 0.13 → 0.16
- Replace HttpClientModule with provideHttpClient(withFetch())
- Replace BrowserAnimationsModule with provideAnimationsAsync()
- Add standalone: false to all NgModule-declared components/directives
- Switch moduleResolution from 'node' to 'bundler'
- Fix moment imports to use default import syntax
- Remove deprecated polyfills.ts, test.ts, e2e/, protractor
- Update ESLint config for angular-eslint 21
- Replace karma-coverage-istanbul-reporter with karma-coverage
- Remove deprecated packages (codelyzer, ts-node, core-js, etc.)
- Document all breaking changes in BREAKING_CHANGES.md
@devin-ai-integration
Copy link
Copy Markdown
Contributor Author

🤖 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[bot]

This comment was marked as resolved.

Protractor and the e2e directory were removed but the npm script was left behind.
Spotted by Devin Review.
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