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.

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.

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:

2 Likes

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)

1 Like

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?

I also experience the problem with the VsCode intellisense
image

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

image

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

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