bug: Angular - Argument of type 'Event' is not assignable to parameter of type 'CustomEvent<XXX>'.
Argument of type 'Event' is not assignable to parameter of type 'CustomEvent'. Type 'Event' is missing the following properties from type 'CustomEvent': detail, initCustomEventngtsc(2345)
Require stack:
- /usr/local/lib/node_modules/@ionic/cli/lib/project/index.js
- /usr/local/lib/node_modules/@ionic/cli/lib/index.js
- /usr/local/lib/node_modules/@ionic/cli/index.js
- /usr/local/lib/node_modules/@ionic/cli/bin/ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package'
Require stack:
- /usr/local/lib/node_modules/@ionic/cli/lib/project/index.js
- /usr/local/lib/node_modules/@ionic/cli/lib/index.js
- /usr/local/lib/node_modules/@ionic/cli/index.js
- /usr/local/lib/node_modules/@ionic/cli/bin/ionic
Ionic:
Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.9.1
@angular-devkit/build-angular : 12.1.4
@angular-devkit/schematics : 12.1.4
@angular/cli : 12.1.4
@ionic/angular-toolkit : 4.0.0
Capacitor:
Capacitor CLI : 3.3.2
@capacitor/android : not installed
@capacitor/core : 3.3.2
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : 1.5.0
System:
NodeJS : v14.18.1 (/usr/local/bin/node)
npm : 6.14.15
OS : macOS Monterey
Additional Information
No response
Thank you for reporting this issue. I'm able to reproduce your issue.
This appears to be a flaw in how we proxy outputs events from our web components into Angular's outputs/observables. Making use of fromEvent is causing Angular Language Service to take the type signature of addEventListener instead of our custom type declarations for our events.
You can temporarily avoid this error by disabling strict templates in your tsconfig.json.
"angularCompilerOptions": {
"strictTemplates": false
alternatively you can type cast to satisfy the compiler:
doReorder(ev: Event) {
const customEvent = ev as CustomEvent<ItemReorderEventDetail>;
// replace ev usages with customEvent
We'll post back when we discover a better approach for those generated proxies.
Hello @JumBay and @EbenDang, happy Friday!
I wanted to share that we have a resolution in the works (#24314) and are committed to resolve this issue. Unfortunately this resolution results in a breaking change for a less common pattern of event binding. We are getting very close to our Ionic 6 release and don't want to introduce a breaking change this close to release.
We will be following up after Ionic 6 is released to evaluate the full impact of #24314 and explore any changes that could result in a minor change.
Temporary solution if you want to leave strict template type checking enabled is to wrap $event in $any(). Example:
doReorder(ev: CustomEvent<ItemReorderEventDetail>) {
console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
Template:
<ion-reorder-group (ionItemReorder)="doReorder($any($event))" disabled="true">
DavidCuervo, Alexisvt, zhentinela-ai, mikvetere, and brinehart reacted with thumbs up emoji
davidecampello and michaelkrog reacted with heart emoji
All reactions
Hello everyone! I'm very excited to share a dev-build that I believe resolves this issue:
6.1.11-dev.11655500065.1d345d4c
Would appreciate any testing and confirmation with that build. It takes advantage of our new type declarations available through Stencil and an Angular workaround (hack) to offer compatibility with the Angular Language Service without emitting duplicate events.
In the OP's scenario, you may need to use the new event types to get full compatability:
import { ItemReorderEventDetail, IonReorderGroupCustomEvent } from '@ionic/core';
doReorder(ev: IonReorderGroupCustomEvent<ItemReorderEventDetail>) {
// existing code
Areas I would explicitly like confirmation on:
Angular Language Service (type checking in your IDE) no longer errors/throws exceptions
No build errors in your application
Events are emitted as expected (no duplicate events)
Application functions correctly for local development and in a production build
I will continue to do more testing in my world after the long weekend, but am super excited to finally get this issue resolved.
Thanks!
bug: ionRefresh emits object typed as RefresherEventDetail but actually emits RefresherCustomEvent
#26747
@hakimio I'm hopeful that we can find a sustainable solution in the v7.x.x release, but it will not be included in the v7.0.0 release.
The proposed solution that I had found resolves this specific issue, was leveraging private APIs that the Angular team advised we do not use (high risk of the component wrappers breaking during a minor version of Angular). We have plans to coordinate our requirements with the Angular team, to collaborate on a solution together. Stencil, Lit, Vanilla WC and other WC solutions all have a similar need to be compatible within an Angular project (or at least have a good developer experience).