ionic-team / ionic-team/ionic-framework

bug: Standalone IonIcon type does not expose any component properties

Abierto
#29,674 6 comentarios 1 reacción 0 asignados Ver en GitHub
package: angular type: bug
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v7.x, v8.x

### Current Behavior

I have a custom directive on IonIcon which modifies the "name" and "src" attributes.
For example:
```
import { Directive, OnInit } from '@angular/core';
import { IonIcon } from '@ionic/angular';

@Directive({
selector: 'ion-icon[name]',
standalone: true,
providers: [IonIcon]
})
export class FontIconDirective implements OnInit {
constructor(private host: IonIcon) {
}

public ngOnInit(): void {
const name = this.host.name;

if (name) {
this.host.name = undefined;
this.host.src = 'data:text/plain,' + name;
}
}
}
```

Everything works fine if I import from
`import { IonIcon } from '@ionic/angular'`

But if I import the standalone component, it doesn't have "name" and "src" properties
`import { IonIcon } from '@ionic/angular/standalone';`

The non-standalone IonIcon extends Components.IonIcon, which contains there properties:
![image](https://github.com/DarkLeopard/ionic-custom-icon-directive/assets/1048531/c4b97352-8a04-495b-b533-e8834a815769)

But the standalone version doesn't extend it:
![image](https://github.com/DarkLeopard/ionic-custom-icon-directive/assets/1048531/61d6c62b-5d39-47d5-aaad-7624f705415a)

Is this intentional or a bug? It looks like a bug to me, since I see other standalone components do extends the Components interfaces, e.g:
![image](https://github.com/DarkLeopard/ionic-custom-icon-directive/assets/1048531/4e188e1f-3391-433a-aeba-9591afde63c4)

If it is intentional, what type should I inject then, to get access to those properties?

It does work if I leave it non-standalone, but that is the only remaining place where I import non-standalone, and I'd like to avoid that. Also, with the new Angulars ESBuild, vite is throwing these warnings https://github.com/ionic-team/ionic-framework/issues/28576, I suspect due to this non-standalone import

### Expected Behavior

Standalone IonIcon should extend Components.IonIcon

### Steps to Reproduce

No special reproduction steps.
Whenever you use the IonIcon from `import { IonIcon } from '@ionic/angular/standalone';` none of the component properties are exposed. In injection, ViewChild, ContentChild...etc. Whenever you need to programmatically reference it

### Code Reproduction URL

There is no need for a repo

### Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'

Require stack:
- C:\Users\test\AppData\Roaming\nvm\v18.13.0\node_modules\@ionic\cli\lib\project\index.js
- C:\Users\test\AppData\Roaming\nvm\v18.13.0\node_modules\@ionic\cli\lib\index.js
- C:\Users\test\AppData\Roaming\nvm\v18.13.0\node_modules\@ionic\cli\index.js
- C:\Users\test\AppData\Roaming\nvm\v18.13.0\node_modules\@ionic\cli\bin\ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'

Require stack:
- C:\Users\test\AppData\Roaming\nvm\v18.13.0\node_modules\@ionic\cli\lib\project\index.js
- C:\Users\test\AppData\Roaming\nvm\v18.13.0\node_modules\@ionic\cli\lib\index.js
- C:\Users\test\AppData\Roaming\nvm\v18.13.0\node_modules\@ionic\cli\index.js
- C:\Users\test\AppData\Roaming\nvm\v18.13.0\node_modules\@ionic\cli\bin\ionic

Ionic:

Ionic CLI : 7.1.5 (C:\Users\test\AppData\Roaming\nvm\v18.13.0\node_modules\@ionic\cli)
Ionic Framework : @ionic/angular 8.2.3
@angular-devkit/build-angular : 17.3.1
@angular-devkit/schematics : 17.3.1
@angular/cli : 17.3.1
@ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.1.0
@capacitor/android : not installed
@capacitor/core : 6.1.0
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v18.13.0 (C:\Program Files\nodejs\node.exe)
npm : 8.19.3
OS : Windows 10

### Additional Information

I can do this as a workaround, and it seems to work, but it's dirty...
```
import { Directive, OnInit } from '@angular/core';
import { IonIcon } from '@ionic/angular/standalone';
import { Components } from '@ionic/core/dist/types/interface'

@Directive({
selector: 'ion-icon[name]',
standalone: true,
providers: [IonIcon]
})
export class FontIconDirective implements OnInit {
constructor(private host: IonIcon) {
}

public ngOnInit(): void {
const component = this.host;
const name = component.name;

if (name) {
component.name = undefined;
component.src = 'data:text/plain,' + name;
}
}
}
```

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.