Argument of type 'Event' is not assignable to parameter of type 'CustomEvent<any>'

[mic2]

Hi there,

We are updating our app to use the latest ionic libraries and are getting the the following error during compilation – Argument of type 'Event' is not assignable to parameter of type 'CustomEvent<any>' (see screenshot below)

This can be easily replicated using the ionic example project (see below).

Please advise.

Error

Replication script

# start an ionic template project
cd /tmp
ionic start "$project_name" "sidemenu" --type="angular" --project-id="$project_id" --package-id="$project_id" --capacitor --no-interactive

# add ion-toggle
perl -pi -e 's#</ion-content>#<ion-toggle (ionChange)="toogleChanged($event)"></ion-toggle>\n\n</ion-content>#' $project_id/src/app/folder/folder.page.html
perl -pi -e 's#ngOnInit\(\)#toogleChanged(e: CustomEvent<any>){ console.log(e); }\n\n ngOnInit()#g' $project_id/src/app/folder/folder.page.ts

# reproduce error
cd $project_id
mkdir www && touch www/index.html
ionic cap add ios
ionic cap copy --prod --watch

Environment

$ ionic info

Ionic:

   Ionic CLI                     : 6.13.1 (/home/vagrant/.config/yarn/global/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.6.0
   @angular-devkit/build-angular : 0.1102.4
   @angular-devkit/schematics    : 11.2.4
   @angular/cli                  : 11.2.4
   @ionic/angular-toolkit        : 3.1.1

Capacitor:

   Capacitor CLI   : 2.4.7
   @capacitor/core : 2.4.7

Utility:

   cordova-res : not installed
   native-run  : 1.3.0

System:

   NodeJS : v14.15.0 (/home/vagrant/.nvm/versions/node/v14.15.0/bin/node)
   npm    : 6.14.8
   OS     : Linux 4.14

Thanks,
Mic.

[agreeff]

I’m running into the exact same issue myself, reworking an old Ionic 3 app to the latest…

In the meantime, I’ve done the following to get around it:

onChangeHandler(event: Event) {
  const value = (event as CustomEvent).detail.value;
}

Feels very hacky (so I also added a nice big “HACK” comment), but in the meantime at least it doesn’t throw any errors…

[rapropos]

Does declaring onChangeHandler(event: CustomEvent) not do what you want?

[agreeff]

Not quite, no… In the component TS, I see the following error with the straight Event interface:

If I change the type here to CustomEvent, this error goes away:

…but then the component markup complains:

---

Unless I’m perhaps missing something with the ionChange parameters? Hovering over the attribute name, VSCode intellisense shows me:

declare (event) HTMLElement.addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void

Is there perhaps a better way to pass the value of the newly selected option to my languageChanged method?

[davidmar8]

try adding (event,detail?: CustomEvent)

[godenji]

VS Code does indeed complain in corresponding template file, which is annoying.

Anyone have a workaround that doesn’t throw type safety out the window?

[yigsvnsla0]

I also experience the problem with the VsCode intellisense

It should be noted that with this error it is not possible to perform a healthy compilation

the editor only complains in the template, apparently it happens is the angular event without typing to the custom event of Ionic

[jbmetrics]

That worked like a charm! The editor says it is an unused variable (but it solves the problem of getting the compile error)

[GeoffTripoli]

try adding (event,detail?: CustomEvent)

The only thing this is doing is making the first parameter an any type. The second parameter, detail is not sent by the event and cannot and should not be used.

The real issue here is in the Ionic Angular library and needs to be fixed. Casting the event as CustomEvent is not a dirty approach to this imo. But ideally Ionic should fix it so this is not necessary.