question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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
  1. install “@ionic/angular” module in the library
npm i @ionic/angular --save
  1. import anything from @ionic/angular:
import { IonicModule } from "@ionic/angular";

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:3
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
Chris2011commented, Mar 2, 2020

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

0reactions
ionitron-bot[bot]commented, Jun 30, 2020

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Interface 'HTMLIonIconElement' cannot simultaneously extend ...
bug : Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIcon' and 'HTMLStencilElement'. Named property 'ariaHidden' of types 'IonIcon' ...
Read more >
Interface 'HTMLIonIconElement' cannot simultaneously extend ...
It seems that ng update updated the typescript version to 4.4, but ionic ion-icon seems to be incompatible with this version of typescript....
Read more >
Interface 'HTMLIonIconElement' cannot simultaneously extend ...
After upgrading to Angular 12, I get the following error when running ionic serve: [ng] Build at: 2021-08-30T19:51:32.148Z - Hash: ...
Read more >
Interface 'HTMLIonIconElement' cannot simultaneously extend ...
Angular 12: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIcon' and 'HTMLStencilElement' ... Any ideas how to solve this? Thank you very ...
Read more >
Ionic stupid simple. - DEV Community ‍ ‍
If You get an error that looks like this: ... 'HTMLIonInputElement' cannot simultaneously extend types 'IonInput' and 'HTMLStencilElement'.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found