bug: Angular - Argument of type 'Event' is not assignable to parameter of type 'CustomEvent<XXX>'.

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

Wrong definition type breaks the app.

Expected Behavior

Having the right definition type

Steps to Reproduce

• Create a new ionic project: ionic start test-ionic
  • Framework: Angular
  • Starter template: tabs

Copy/paste the code sample (html and ts) from https://ionicframework.com/docs/api/reorder-group in tab1.page.(html|ts). Then in your IDE you’ll notice the given error:

Argument of type ‘Event’ is not assignable to parameter of type ‘CustomEvent<ItemReorderEventDetail>’. Type ‘Event’ is missing the following properties from type ‘CustomEvent<ItemReorderEventDetail>’: detail, initCustomEventngtsc(2345)

Try to build the app: ionic build --prod, it won’t build (same error).

It does this with other events as well…

Same issue occurs on ionic 6 rc3

Code Reproduction URL

https://github.com/JumBay/ionic-event-type-issue

Ionic Info

$ ionic info [WARN] Error loading @capacitor/ios package.json: Error: Cannot find module ‘@capacitor/ios/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

[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

[DeezCashews]

Temporary solution if you want to leave strict template type checking enabled is to wrap $event in $any(). Example:

TS:

  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">

[sean-perkins]

@hakimio no, the PR to address this issue is still in a draft state: #25502.

With the changes required to resolve the issue, I’m giving the community plenty of time to test with the dev-build and help verify, before merging and releasing.