bug: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIcon' and 'IonIcon'

[ildar-icoosoft]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

I'm trying to use Ionic components in my angular library (npm module). I've created the angular library using this manual. Then I've installed @ionic/angular to package.json dependencies. And if I import anything from "@ionic/angular" (for example "import { IonicModule } from "@ionic/angular";") I'm getting many errors like this in "node_modules/ionicons/dist/types/components.d.ts(63,13):":

TS2320: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIcon' and 'IonIcon'.
 Named property ''icon'' of types 'IonIcon' and 'IonIcon' are not identical.

TS2320: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'HTMLStencilElement' and 'HTMLStencilElement'.
  Named property 'forceUpdate' of types 'HTMLStencilElement' and 'HTMLStencilElement' are not identical.

Expected behavior:

import should not cause errors

Steps to reproduce:

1. Generate new angular library:

ng new my-workspace --create-application=false
cd my-workspace
ng generate library my-lib

2. install "@ionic/angular" module in the library

npm i @ionic/angular --save

3. import anything from @ionic/angular:

import { IonicModule } from "@ionic/angular";

[joelmeaders]

I'm getting this error across the board when attempting to use Ionic 5 RC 1 in a project upgraded from Ionic 4.11.10.

EDIT: Nevermind. Everything was upgraded except @ionic/core for some reason and updating it fixed this issue for me.

[LifeIsStrange]

I have the same issue using the defacto standard for creating a ionic vue app https://dev.to/aaronksaunders/build-your-first-ionic-vue-app-18kj

(ps: I'm using typescript)

[Chris2011]

Same here, update of ionic/core to 5.0.4, ionic/vue to 0.0.9 didn't fix it.

[dandoingdev]

@Chris2011 did you manage to resolve this? Same problem here.

[Chris2011]

@dangerdan unfortunately not, after I tried to use Vue with Ionic and find my self that I don't like Ionic for the components and there interaction, I removed Ionic completely and use Vue + Vuetify + Cordova.

[dandoingdev]

Thanks for the reply. I love Ionic with Angular, but finding it unusable with Vue. I'll check out Vuetify too. Thanks.

[liamdebeasi]

Thanks for the issue. Is this an issue with the latest version of Ionic Framework (the Ionic Angular issue)? If so, can you provide a repo with the code required to reproduce the issue?

As for Vue, Ionic Vue is still in early beta, so this is not something we recommend for production apps. We are working on Ionic + Vue 3 integration, so expect more on that soon!

[ionitron-bot]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!