Angular 22 compatibility, EventData types are not correctly inferred from templates

Abierto
#170 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
45/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
angular, typescript
Área
frontend

Línea de trabajo

Comienza reproduciendo los errores de comprobación de plantillas con Angular 22 y la configuración de angularCompilerOptions mostrada. Compara strictDomEventTypes true y strictDomLocalRefTypes true usando los ejemplos $event y #idElement. Se considera terminado cuando los controladores de eventos de NativeScript infieren tipos derivados de EventData y las referencias de plantilla se reconocen como View en lugar de HTMLElement.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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!

  1. 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)">


  1. 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'.

Lenguaje dominante
TypeScript
Estrellas
55
Forks
13
Merge medio
16 min
PR fusionados (30 d)
1

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de NativeScript/angular

Todos los issues de NativeScript/angular

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.