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

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

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?

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!

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.

Oh, damn, true, thanks! ^^