NativeScript / NativeScript/angular

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

Aberta
#170 1 comentário 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Linguagem predominante
TypeScript
Estrelas
55
Forks
13
Merge médio
16min
PRs com merge (30d)
1

Descrição

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

Guia de contribuição

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Direção de pesquisa

Comece reproduzindo os erros de verificação de template com Angular 22 e as configurações de angularCompilerOptions mostradas. Compare strictDomEventTypes true e strictDomLocalRefTypes true usando os exemplos $event e #idElement. O trabalho estará concluído quando os manipuladores de eventos do NativeScript inferirem tipos derivados de EventData e as referências de template forem reconhecidas como View em vez de HTMLElement.

Escrita pelo modelo de indexação a partir do texto da issue.

Avaliação

Stack de tecnologia
angular, typescript
Domínio
frontend
Tipo de issue
Bug
Dificuldade
4/5
Tempo estimado
3-5 dias
Status de atividade
Pouca atividade
Clareza
Razoavelmente clara
Facilidade para iniciantes
45/100

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.