Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIc on' and 'HTMLStencilElement'

Question

I have just upgraded my angular ionic app to use angular v13 from angular 12 by running ng update. The update was successful but now I am unable to run the app with below errors

[ng] Error: node_modules/ionicons/dist/types/components.d.ts:66:15 - error TS2320: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIc
on' and 'HTMLStencilElement'.
[ng]   Named property 'ariaHidden' of types 'IonIcon' and 'HTMLStencilElement' are not identical.
[ng]
[ng] 66     interface HTMLIonIconElement extends Components.IonIcon, HTMLStencilElement {
[ng]                  ~~~~~~~~~~~~~~~~~~
[ng]
[ng]
[ng] Error: node_modules/ionicons/dist/types/components.d.ts:66:15 - error TS2320: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIc
on' and 'HTMLStencilElement'.
[ng]   Named property 'ariaLabel' of types 'IonIcon' and 'HTMLStencilElement' are not identical.
[ng]
[ng] 66     interface HTMLIonIconElement extends Components.IonIcon, HTMLStencilElement {
[ng]                  ~~~~~~~~~~~~~~~~~~
[ng]
[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 assigna
ble 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]
[ng] 4632     getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
[ng]                                                                                                          ~~~~~~~~~~~~~~~~~~~~~~~~
[ng]
[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 assigna
ble to type 'Element'.
[ng]
[ng] 4953     getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
[ng]        

The problem is that all the files being complained about are in the node_modules directory. How can I resolve this?

Bork

Answer 1

For me I just added "skipLibCheck": true, in tsconfig.json, see code below:

Thoria

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Poetess

This worked but why? – Jaconet

Thanks! That solved the problem. Ideally, it is better to upgrade Ionic libs, but this solution works well as a short-term fix. The details about this flag can be found here: typescriptlang.org/tsconfig#skipLibCheck – Lexy

Answer 2

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.

The current fix I used was to revert back to typescript version 4.3.5

How to perform this downgrade :

update your package.json -> replace : "typescript": "~4.4.4" with "typescript": "~4.3.5"

then run -> npm install

If someone has more information about the root cause of this incompatibility and an other way of solving this, I am very much interested since I very much would like to upgrade to typescript 4.4.

Well

Tried this but I am unable to run npm i Could not resolve dependency: npm WARN peer typescript@"~4.4.3" from @angular-devkit/[email protected] npm WARN node_modules/@angular-devkit/build-angular. – Bork

I already had this too, can you instead try with : npm install --legacy-peer-deps – Well

Answer 3

The following tsconfig.json configuration works for me.

{
  "compileOnSave": false,
  "compilerOptions": {
    "skipLibCheck": true,
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "es2020",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",

    "lib": ["es2018", "dom"]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

Beverie

be sure update your @angular/cdk": "^13.3.9", your current angular version should be there – Beverie