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

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.


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/
perl -pi -e 's#ngOnInit\(\)#toogleChanged(e: CustomEvent<any>){ console.log(e); }\n\n ngOnInit()#g' $project_id/src/app/folder/

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


$ ionic info


   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 CLI   : 2.4.7
   @capacitor/core : 2.4.7


   cordova-res : not installed
   native-run  : 1.3.0


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


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… :man_shrugging:

1 Like

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

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?

try adding (event,detail?: CustomEvent)