Angular 12: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIcon' and 'HTMLStencilElement'

Ionic Framework
1

After upgrading to Angular 12, I get the following error when running ionic serve:

[ng] Build at: 2021-08-30T19:51:32.148Z - Hash: 7a7351ce16a902a5c859 - Time: 1247ms
[ng] Error: node_modules/ionicons/dist/types/components.d.ts:66:15 - error TS2320: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIcon' and 'HTMLStencilElement'.
[ng]   Named property 'ariaHidden' of types 'IonIcon' and 'HTMLStencilElement' are not identical.
[ng] 66     interface HTMLIonIconElement extends Components.IonIcon, HTMLStencilElement {
[ng]                  ~~~~~~~~~~~~~~~~~~
[ng] Error: node_modules/ionicons/dist/types/components.d.ts:66:15 - error TS2320: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIcon' and 'HTMLStencilElement'.
[ng]   Named property 'ariaLabel' of types 'IonIcon' and 'HTMLStencilElement' are not identical.
[ng] 66     interface HTMLIonIconElement extends Components.IonIcon, HTMLStencilElement {
[ng]                  ~~~~~~~~~~~~~~~~~~
[ng] Error: node_modules/typescript/lib/lib.dom.d.ts:4632:101 - error TS2344: Type 'HTMLElementTagNameMap[K]' does not satisfy the constraint 'Element'.
[ng]   Type 'HTMLElement | HTMLMetaElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | ... 151 more ... | HTMLMarqueeElement' is not assignable to type 'Element'.
[ng]     Type 'HTMLIonIconElement' is not assignable to type 'Element'.
[ng]       Property 'ariaHidden' is optional in type 'HTMLIonIconElement' but required in type 'Element'.
[ng] 4632     getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
[ng]                                                                                                          ~~~~~~~~~~~~~~~~~~~~~~~~
[ng] Error: node_modules/typescript/lib/lib.dom.d.ts:4953:101 - error TS2344: Type 'HTMLElementTagNameMap[K]' does not satisfy the constraint 'Element'.
[ng]   Type 'HTMLElement | HTMLMetaElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | ... 151 more ... | HTMLMarqueeElement' is not assignable to type 'Element'.
[ng] 4953     getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
[ng]                                                                                                          ~~~~~~~~~~~~~~~~~~~~~~~~

Any ideas how to solve this?

Thank you very much! :heart:
Rafael

2

Angular 12 introduced support for TypeScript 4.2.
Angular 12.1 introduced support for TypeScript 4.3.
I do not believe any released version of Angular claims to support TypeScript 4.4.

Is there any chance you forced TS 4.4 onto your project despite warnings of incompatibility?

2 Likes
3

Hey rapropos, thank you very much, you just saved me a lot of work! :slight_smile:

Somehow typescript 4.4 was installed in my project. After running npm install typescript@4.3.5 everything works fine again.

My package.json says "typescript": "^4.3.5", and I already tried deleting the node_modules folder, my package-lock und cleaning npm cache. When running npm install thereafter, typescript 4.4 got installed again.

It’s solved now, great, thanks again!

4

This will keep happening, because:

That’s bad. I recommend never using ^ for typescript dependencies. You want ~ instead, which locks everything but patch level (A.B.*). ^ locks only major versions. Extensive details documented in the docs for node-semver, but the TL;DR:

^4.3.5 = 4.3.6 OK, 4.4.2 OK
~4.3.5 = 4.3.6 OK, 4.4.2 NG

In general, both Angular and Ionic are sensitive to minor version changes in TS specifically. rxjs and zone.js are two other packages that require extra care and caution when upgrading.

5

Oh, damn, true, thanks! ^^

6

Thank you life saver…!! :slightly_smiling_face:

1 Like