The interface 'HTMLIonIconElement' is not able to extend both 'IonIcon' and 'HTMLStencilElement' types at the same time

After upgrading my Angular Ionic app to use Angular v13 from Angular 12 with the command ng update, I encountered errors preventing me from running the application successfully.

[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]

All the problematic files are located in the node_modules directory. How can I fix this issue?

angulartypescriptionic-frameworkangular13

Answer №2

After running ng update, it appears that the typescript version was updated to 4.4. Unfortunately, I encountered an issue with ionic ion-icon being incompatible with this particular version of typescript.

To address this problem, I decided to revert back to typescript version 4.3.5 as a temporary fix.

If you need to perform a similar downgrade:

Modify your package.json file -> replace : 

"typescript": "~4.4.4"
with 
"typescript": "~4.3.5"

then execute the following command -> npm install

I am eager to learn more about the root cause of this compatibility issue and open to other potential solutions for upgrading to typescript 4.4.

Answer №3

I have found success with the following setup in my tsconfig.json file.

{
  "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
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Encountering issues with NPM run build not working during Docker build process

Encountering an error while running docker build is causing frustration. Docker runs npm install -f, and changing it to npm install did not solve the problem. The lengthy logs cannot be posted here, but can be viewed in detail here. Here's a snippet o ...

angulardockernpmnpm-install

Using Angular 8 to Pass Form Data to Another Component via a Service

Is there a way to send all the Formgroup data as a Service in Angular to Another Component without using ControlValueAccessor? I want the receiver to automatically receive the value data whenever someone enters information on a form. I am attempting to mo ...

htmlcssangularangular8

An unexpected error occurred in the file node_modules/@firebase/firestore/dist/index.d.ts at line 27:28 - Please insert a ']' at this location

When adding firebase to my Angular app, I encountered an error while running ng serve: ERROR in node_modules/@firebase/firestore/dist/index.d.ts:27:28 - error TS1005: ']' expected. 27 [K in keyof T & string as `${Prefix}.${K}`]+?: T[K]; ...

angulartypescriptfirebasenpmfirebase-realtime-database

Issue with Angular 12.1: Unable to retrieve value using "$event.target.value"

I am just starting to dive into the world of Angular and have been using YouTube tutorials as my guide. However, I have encountered an error in one of the examples provided. Below is the code snippet that is causing me trouble. HTML <input type=" ...

angulartypescript

AngularJS utilizes a dynamic library for each controller

Is it possible to include a Dynamic Library for each controller in angularjs when using two controllers within one angular module? In order to implement this, I will need to add the appropriate header Lib script for each controller. For example: For Con ...

androidangularjsionic-framework

Building a personalized React component poses challenges when working with MUI REACT interfaces

I am looking to develop a unique component that will display two different elements, an icon, and a title. However, I seem to be encountering errors from TypeScript regarding the declaration of my interface. The error message reads: Property 'map&apos ...

reactjstypescriptmaterial-ui

Tips for effectively narrowing the `undefined` type

Why am I getting this error message? const func = (a: unknown) => { if (a && typeof a === 'object' && 'b' in a) { a.b; } }; The error message I'm receiving is: Property 'b' does not exist on ty ...

typescripttypescript-typings

Guide on utilizing a module in TypeScript with array syntax

import http from "http"; import https from "https"; const protocol = (options.port === 443 ? "https" : "http"); const req = [protocol].request(options, (res) => { console.log(res.statusCode); }); error TS2339 ...

typescriptnode-modules

Is there a way to expand the color options of mui using Typescript?

I'm attempting to expand the color options provided by mui. While overriding primary, secondary, and other preset colors works smoothly, I'm struggling with creating a custom set of colors right after. Despite numerous examples available without ...

reactjstypescriptmaterial-ui

An issue has occurred: [ERR_REQUIRE_ESM] You must utilize the import statement in order to load an

These are the snippets of code I'm working with: index.ts import { MikroORM } from "@mikro-orm/core" import { __prod__ } from "./constants"; import { Post } from "./entities/Post"; import microConfig from "./mikro-o ...

node.jsreactjstypescriptpostgresql

Executing a Parent Function from a Child Component in Angular 11

I have successfully passed values between Angular components using Input/Output several times before, but I am currently facing a unique situation for which I cannot find a solution: There are two components involved: home.component (parent component) T ...

angulartypescript

The routing functionality in an Angular Element seems to be malfunctioning when used in a separate Angular project. Instead of displaying the expected routes, only the "<router-outlet></router-outlet>" tags are visible on the website

The current situation: Our team is facing the challenge of integrating multiple angular frontend micro-services into a single application. To achieve this, we have chosen to use the Angular-Elements approach which resulted in a large JS-file when exportin ...

angularweb-componentangular-elements

Ways to deduce or implement intellisense for parameter types in overloaded functions

Currently, I am developing an Electron application where numerous events are being passed around with specific listeners assigned to each event. One example is BrowserWindow.on: Electron.BrowserWindow.on(event, listener) The event can take on values such ...

node.jstypescripteventselectron

Setting up the newest version of Angular (v15) along with Bootstrap (v5) using .scss files

What is the process for integrating Angular with bootstrap and SASS (.scss files)? ...

angularsassbootstrap-5

Leverage process.env variables within your next.config.js file

Currently, I have an application running on NextJS deployed on GCP. As I set up Continuous Deployment (CD) for the application, I realized that there are three different deploy configurations - referred to as cd-one.yaml, cd-two.yaml, and cd-three.yaml. Ea ...

typescriptgoogle-cloud-platformnext.jsdeploymenti18next

Incorporating a JavaScript library into Angular 7

I am looking to add Cleave.js and Rellax.js libraries to my project. Currently, I have successfully imported jQuery. These libraries require specific attributes in the HTML code. What is the best way to import these libraries? angular.json "scripts" ...

node.jsangular

An issue arises when using enums in TypeScript

Let's analyze this demonstration. Initially, an enum is created as follows: enum myEnum { a = 'a', b = 'b' } The next step involves creating a similar enum but with the addition of one more numeric value! This alteration is c ...

typescriptenums

Tips on incorporating jstree into an Angular 2 application with TypeScript and @types/jstree

Hello, I am new to ng2 and have a question that may seem obvious to some. I recently installed the jstree library using npm in my angular-cli application by running the command npm i jstree --save. Following this, I also installed the types for jstree wi ...

angulartypescriptjstree

Tips for sorting through and minimizing data based on the most recent date

info = { start: 1, data: [ { name: 'Maria', date: '2020-02-15 }, { name: 'Paula', date: '2020-06-10 }, { name: 'Eva', date: '2020-12-05 }, { name: 'Sophia', date ...

javascriptarraystypescriptobject

Creating a wrapper component to enhance an existing component in Vue - A step-by-step guide

Currently, I am utilizing quasar in one of my projects. The dialog component I am using is becoming redundant in multiple instances, so I am planning to create a dialog wrapper component named my-dialog. my-dialog.vue <template> <q-dialog v-bin ...

javascripttypescriptvue.jsquasar-frameworkquasar