NativeScript / NativeScript/angular

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

Aperta
#170 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Lingua principale
TypeScript
Stelle
55
Fork
13
Merge medio
16m
PR unite (30g)
1

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia riproducendo gli errori di controllo dei template con Angular 22 e le impostazioni angularCompilerOptions mostrate. Confronta strictDomEventTypes true e strictDomLocalRefTypes true usando gli esempi $event e #idElement. Il lavoro è completato quando i gestori degli eventi NativeScript deducono tipi derivati da EventData e i riferimenti ai template vengono riconosciuti come View anziché HTMLElement.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Tranquilla
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.