feat(angular): support Angular 21, drop Angular 16 and 17#31185
feat(angular): support Angular 21, drop Angular 16 and 17#31185ShaneK wants to merge 16 commits into
Conversation
…ist comment for ng18-21
…o feat/angular-21-support
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
package: core
ShaneK
changed the title
thetaPC
left a comment
thetaPC
left a comment
There was a problem hiding this comment.
LGTM, with non-blocking requested change
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
ShaneK
force-pushed
the
feat/angular-21-support
branch
from
0b4f56b to
87e5eac
Compare
brandyscarney
left a comment
brandyscarney
left a comment
There was a problem hiding this comment.
Looks good! Just a few non-blocking comments. 🎉
| - [Legacy Picker](#version-9x-legacy-picker) | ||
| - [Router Outlet](#version-9x-router-outlet) | ||
| - [Select](#version-9x-select) | ||
| - [Input and Searchbar](#version-9x-input-searchbar) |
There was a problem hiding this comment.
We should separate these into two to match how we list other components.
| } | ||
|
|
||
| onRefresh(event: RefresherCustomEvent) { | ||
| onRefresh(event: CustomEvent<RefresherEventDetail>) { |
There was a problem hiding this comment.
Why was this changed? This goes against our documentation.
There was a problem hiding this comment.
The angular-output-target update made this required. Stencil no longer surfaces these narrow *CustomEvent types directly. This is actually described in BREAKING.md. This doesn't go against our documentation as far as I can tell, we're still using the interfaces described, we're just having to cast them from the CustomEvent.
| }) | ||
| export class ReorderGroupComponent { | ||
| onReorderEnd(event: ReorderEndCustomEvent) { | ||
| onReorderEnd(event: CustomEvent<ReorderEndEventDetail>) { |
There was a problem hiding this comment.
Why was this changed? This goes against our documentation.
There was a problem hiding this comment.
The angular-output-target update made this required. Stencil no longer surfaces these narrow *CustomEvent types directly. This is actually described in BREAKING.md. This doesn't go against our documentation as far as I can tell, we're still using the interfaces described, we're just having to cast them from the CustomEvent.
There was a problem hiding this comment.
But in the example for Angular we specifically use ReorderEndCustomEvent: https://github.com/ionic-team/ionic-docs/blob/b2c7dbdb58a59b386741061e08aa90821af95bc4/static/usage/v8/reorder/reorder-start-end-events/angular/example_component_ts.md?plain=1#L50
There was a problem hiding this comment.
Okay, then that needs to be updated in docs
There was a problem hiding this comment.
I think it should be fixed rather than updated in the docs. The other frameworks support it still.
There was a problem hiding this comment.
So this wasn't a decision by output-targets, but rather a lack of action by them. It didn't matter until Angular 21 so I guess it's been overlooked, but I have a PR to fix it here: stenciljs/output-targets#814
3 participants
Issue number: resolves #30907
What is the current behavior?
Ionic Angular only currently supports Angular 16-20
What is the new behavior?
Ionic Angular now supports Angular 18 through 21 and drops 16 and 17. The ng16/ng17 test apps are removed, an ng21 app is added, and the tsconfigs are tightened for the 18+ minimum.
autocorrectonion-inputandion-searchbarbecomes aboolean(defaultfalse), mapped internally to the native'on'/'off'attribute. This is required by TypeScript 5.9, which is required by Angular 21. It is the primary breaking change that forced this into a major version release of Ionic Framework.Also bundles v9 housekeeping:
@stencil/corebumped to 4.43.5 and TypeScript 5.9 in the React and Vue test apps.Does this introduce a breaking change?
The following changes are required for migration:
provideZoneChangeDetection()tobootstrapModule'sapplicationProvidersinmain.ts.ng-addonly patches standaloneapp.config.ts, notmain.ts, so the NgModule path is manual (documented in the schematic's JSDoc).autocorrectnow takestrue/falseinstead of'on'/'off'. Replaceautocorrect="on"with[autocorrect]="true"andautocorrect="off"(or the default) withfalse.Other information
Preview:
Current dev build (2025-06-02):
Docs PR: ionic-team/ionic-docs#4529