3

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?

Owen Kelvin
  • 14,054
  • 10
  • 41
  • 74

2 Answers2

5

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

enter image description here

Joundill
  • 6,828
  • 12
  • 36
  • 50
safaDev
  • 59
  • 2
  • 1
    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](/help/how-to-answer). – Community Dec 13 '21 at 09:20
  • This worked but why? – Mike Kormendy Jul 21 '22 at 02:55
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.

oiawo
  • 146
  • 2
  • 7
  • Tried this but I am unable to run `npm i` Could not resolve dependency: npm WARN peer typescript@"~4.4.3" from @angular-devkit/build-angular@13.0.2 npm WARN node_modules/@angular-devkit/build-angular. – Owen Kelvin Nov 13 '21 at 13:19
  • I already had this too, can you instead try with : `npm install --legacy-peer-deps` – oiawo Nov 13 '21 at 17:04