NativeScript / NativeScript/angular
Angular 22 compatibility, EventData types are not correctly inferred from templates
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 55
- Forks
- 13
- Avg merge
- 16m
- Merged PRs (30d)
- 1
Description
Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):
✔ Component nativescript has 9.0.6 version and is up to date.
✔ Component @nativescript/core has 9.0.20 version and is up to date.
✔ Component @nativescript/ios has 9.0.3 version and is up to date.
✔ Component @nativescript/android has 9.0.4 version and is up to date.
"@angular/animations": "22.0.1",
"@angular/common": "22.0.1",
"@angular/compiler": "22.0.1",
"@angular/core": "22.0.1",
"@angular/forms": "22.0.1",
"@angular/platform-browser": "22.0.1",
"@angular/platform-browser-dynamic": "22.0.1",
"@angular/router": "22.0.1",
"@angular-devkit/build-angular": "22.0.1",
"@angular/build": "22.0.1",
"@ngtools/webpack": "22.0.1",
"typescript": "6.0.3",
"@nativescript/angular": "22.0.0-dev.0",
"@nativescript/core": "9.0.20",
"@nativescript/iqkeyboardmanager": "3.0.0",
"@nativescript/localize": "5.2.0",
"@nativescript/secure-storage": "4.0.1",
"@nativescript/theme": "3.1.0",
"rxjs": "7.8.2",
"sass": "1.100.0",
"typescript": "6.0.3"
Describe the bug
With the Angular 22 type checking I see 2 compatibility problems, both related to template checks. I need to say, my app is running perfectly fine. The problems I am seeing are from type checking only!
- this can be seen when activating
"angularCompilerOptions": {"strictDomEventTypes": true}
It seems like angular cannot narrow down parameter types. I get about 400 errors related to the usage of $event in method calls. it is everywhere interpretet as Event rather than the related Nativescript EventData or derived type.. Below some examples to understand the pattern
error TS2345: Argument of type 'Event' is not assignable to parameter of type 'EventData'.
Type 'Event' is missing the following properties from type 'EventData': eventName, object
2 (shouldOverrideUrlLoading)="onOverrideUrlLoading($event)" (loaded)="onPlayerLoaded($event)" iosAllowInlineMediaPlayback="true" backgroundColor="black">
ERROR in src/app/modules/selection/pages/add-edit-meal/add-edit-meal.component.html:35:105 - error TS2345: Argument of type 'Event' is not assignable to parameter of type 'EventData'.
Type 'Event' is missing the following properties from type 'EventData': eventName, object
35 (textChange)="onCheckMealChange($event)" class="text-field recipe-field" (tap)="onTextFieldSetFocus($event)">
- Second problem can be seen when activating
"angularCompilerOptions": {"strictDomEventTypes": false,}
"strictDomLocalRefTypes": true,
When I try to use a template reference in a function
<Label #idElement (tap)="myFunction(idElement)">
and want to use it in component as
public myFunction(arg:View){...}
I get the error
Argument of type 'HTMLElement' is not assignable to parameter of type 'View'.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the template-checking errors with Angular 22 and the shown angularCompilerOptions settings. Compare strictDomEventTypes true and strictDomLocalRefTypes true using the $event and #idElement examples. Done means NativeScript event handlers infer EventData-derived types and template references are recognized as View rather than HTMLElement.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100