Repository navigation
Angular 22 compatibility, EventData types are not correctly inferred from templates #170
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'.
Activity
[-]Angular 22 compatibility[/-][+]Angular 22 compatibility, EventData types are not correctly inferred from templates[/+]cjohn001 commentedon Jun 13, 2026
Hello together,
I just realized when downgrading back to Angular 21, when I leave the following config in my tsconfig.json
"angularCompilerOptions": {
"strictTemplates": true,
"strictInputTypes": true,
"strictAttributeTypes": true,
"strictNullInputTypes": true,
"strictOutputEventTypes": true,
"strictDomEventTypes": true,
"strictDomLocalRefTypes": true,
"strictSafeNavigationTypes": true,
"strictContextGenerics": true,
"strictLiteralTypes": true
},
With these 2 here
"strictDomEventTypes": true,
"strictDomLocalRefTypes": true,
I also see the same errors on Angular 21.
Hence, Is it possible that simply the default configuration options have change from 21->22 ?
In regards to the 2 options mentioned: Should those work together with Nativescript, or is it actually to be expected that these throw errors as there is no standard DOM in NS?
Thanks for your feedback!