0
1.1K
ViewsInterface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIc on' and 'HTMLStencilElement'
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?
3 answers
Answer question0
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.
0
For me I just added "skipLibCheck": true, in tsconfig.json, see code below:
0
Well, the trick replacing the version worked! For me, the issue was triggered when I wanted to build the app, then came up the message for upgrade from angular 12 to 13. After that some error about no recognizing angular modules showed up.
Now I have no error launching tests, but I got the error "has been blocked by CORS policy" when the app is trying to reach the services.
Any further feedback will be appreciated.