Skip to content

chore(angular): upgrade @aws-amplify/ui-angular to Angular 20 - #7047

Merged
bobbor merged 5 commits into
mainfrom
ng20-upgrade
Jul 16, 2026
Merged

chore(angular): upgrade @aws-amplify/ui-angular to Angular 20#7047
bobbor merged 5 commits into
mainfrom
ng20-upgrade

Conversation

@bobbor

@bobbor bobbor commented Jul 14, 2026

Copy link
Copy Markdown
Member

Supersedes the dependency-only bump in #7019.

Upgrades the Angular library and example app from Angular 19 to 20.3, making the Angular 20 move real and consistent (supersedes the effectively-cosmetic @angular/common-only bump in #7019).

Dependencies

  • All @angular/* → 20.3.26 (runtime + compiler-cli); @angular/cli & @angular-devkit/build-angular → 20.3.x
  • ng-packagr → ^20.3; @angular-eslint/* → ^20.7; @testing-library/angular → ^18.1; ng-mocks → ^14.15
  • typescript → ~5.8 (Angular 20 requires >=5.8 <5.9)
  • Root package.json resolutions bumped (these pinned all @angular/* to 19.2.20 and were the reason the prior bump never took effect)

Code

  • Migrated constructor DI to field inject() across 19 component/directive files via Angular's official inject() schematic (required by @angular-eslint/prefer-inject, newly enforced in angular-eslint 20)

Testing

  • Library build: ✅ PASS
  • Unit tests (jest): ✅ PASS (15 suites / 43 tests)
  • Lint (tsc + eslint): ✅ PASS
  • The example-app @environments/*/aws-exports build failure is pre-existing/environmental (missing e2e-generated config), not caused by this upgrade

@bobbor
bobbor requested a review from a team as a code owner July 14, 2026 12:09
@bobbor bobbor added dependencies Pull request that updates dependency file javascript Pull requests that update Javascript code labels Jul 14, 2026
@changeset-bot

changeset-bot Bot commented Jul 14, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 7c55a3f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@aws-amplify/ui-angular Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@osama-rizk

Copy link
Copy Markdown
Contributor

Could we add a changeset for this one? 🙏

Even though the bulk of the diff is yarn.lock / the example app / root resolutions (all private or in the changeset ignore list), the 19 inject() migrations under projects/ui-angular/src/lib/** are source of the published @aws-amplify/ui-angular package, which isn't ignored. Without a changeset it won't be versioned/released, and consumers won't get a changelog entry for what is effectively an Angular-20 support move.

I'd suggest a minor on @aws-amplify/ui-angular — it makes the library build against and support Angular 20, which is consumer-relevant, not purely internal. (patch if the team considers it internal-only, but I'd not go lower.)

One reason the changelog entry matters here specifically: the published peer range is still @angular/core: ">= 19.0.0", but the library is now built with the Angular 20 toolchain (ng-packagr 20, compiler-cli 20, TS 5.8). Worth a line so consumers know the build surface moved even though the peer range text didn't.

@osama-rizk

Copy link
Copy Markdown
Contributor

Question on scope for the inject() migration 🤔

The library migration cites @angular-eslint/prefer-inject (now error in the angular-eslint 20 recommended preset). The example app also bumped to angular-eslint 20 and extends plugin:@angular-eslint/recommended, but three of its components still use constructor DI:

  • examples/angular/src/pages/ui/components/authenticator/sign-up-with-email/sign-up-with-email.component.ts:46
  • examples/angular/src/pages/ui/components/authenticator/auth-status/auth-status.component.ts:15
  • examples/angular/src/pages/ui/components/authenticator/custom-slots/custom-slots.component.ts:76

Should we also migrate these to field inject() for consistency (they'd be flagged by the same rule, and eslint . inside examples/angular would report them — though it isn't wired into the CI lint filter, so nothing goes red)?

Or is leaving them on constructor DI intentional — so the example app deliberately exercises both DI styles against Angular 20 and validates that constructor-parameter injection still works alongside the migrated inject() path? If that's the intent, it might be worth a quick comment so a future reader doesn't "tidy" them away.

Either way is defensible — mostly want to make sure the split is a choice rather than a miss. No strong opinion; these compile fine under Angular 20 regardless.

@bobbor

bobbor commented Jul 14, 2026

Copy link
Copy Markdown
Member Author

@osama-rizk thanks for flagging the changeset! 🙏 One landed shortly after your comment — but as major rather than minor, together with bumping the published peerDeps to @angular/core / @angular/common >= 20.0.0.

Reasoning: the library is now compiled with the Angular 20 toolchain, and partial-Ivy output is only forward-compatible — so Angular 19 consumers are outside the supported matrix. Keeping >= 19.0.0 would promise something the build can no longer guarantee, and dropping a supported peer major is a semver-breaking change. On top of that, Angular 19 is EOL with unpatched high-sev advisories — this PR closes all 9 open @angular/* Dependabot alerts. 🎉

For what it's worth, precedent cuts both ways: the 14→19 jump shipped as minor in #6767, but the 2023 peer-floor raise went out as major in #4117. We went with the semver-correct option here — happy to discuss if the team prefers minor!

@bobbor

bobbor commented Jul 14, 2026

Copy link
Copy Markdown
Member Author

@osama-rizk good catch — that was a miss, not a choice 😅 The inject() schematic only ran against the library workspace, so the example app got skipped.

The three components you listed are migrated now (22cd560), and while at it we also caught useAuthenticator / useAuthenticatorHome (ba2f29a) — those were the last two with constructor DI, so the example app is now consistently on inject(). No intentional dual-DI-style showcase, promise 🙂

osama-rizk
osama-rizk previously approved these changes Jul 14, 2026
bobbor added 5 commits July 16, 2026 13:28
Upgrades the Angular library and example app from Angular 19 to 20.3, making the Angular 20 move real and consistent (supersedes the effectively-cosmetic @angular/common-only bump in #7019).

Dependencies:
- All @angular/* -> 20.3.26 (runtime + compiler-cli); @angular/cli & @angular-devkit/build-angular -> 20.3.x
- ng-packagr -> ^20.3; @angular-eslint/* -> ^20.7; @testing-library/angular -> ^18.1; ng-mocks -> ^14.15
- typescript -> ~5.8 (Angular 20 requires >=5.8 <5.9)
- Root package.json resolutions bumped (these pinned all @angular/* to 19.2.20 and were the reason the prior bump never took effect)

Code:
- Migrated constructor DI to field inject() across 19 component/directive files via Angular's official inject() schematic (required by @angular-eslint/prefer-inject, newly enforced in angular-eslint 20)

Testing:
- Library build: PASS
- Unit tests (jest): PASS (15 suites / 43 tests)
- Lint (tsc + eslint): PASS
- The example-app @environments/*/aws-exports build failure is pre-existing/environmental (missing e2e-generated config), not caused by this upgrade
Adds a major changeset for @aws-amplify/ui-angular since Angular 19 and below are no longer supported.
…endency review

Adds a license allowlist exception for rollup-plugin-dts (LGPL-3.0-only, transitive build-time dep of ng-packagr@20) and extends the README License Note accordingly.
…nject()

Completes the inject() migration for consistency across the library and
example app, addressing review feedback. The library files were migrated
via the official Angular inject() schematic, which was run against the
library workspace only, so these example components were missed.
…ject()

Completes constructor-DI removal across the angular example app.
@bobbor
bobbor merged commit aa5e719 into main Jul 16, 2026
60 of 64 checks passed
@bobbor
bobbor deleted the ng20-upgrade branch July 16, 2026 14:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

dependencies Pull request that updates dependency file javascript Pull requests that update Javascript code

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants