bug: TS2320: Interface 'HTMLIonInputElement' cannot simultaneously extend types 'IonInput' and 'HTMLStencilElement'

[emeryao]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

since angular 20.2.0 released recently and typescript v5.9 is being supported

I upgraded dependencies of my project and the message pop up when serving the project

X [ERROR] TS2320: Interface 'HTMLIonInputElement' cannot simultaneously extend types 'IonInput' and 'HTMLStencilElement'.
  Named property 'autocorrect' of types 'IonInput' and 'HTMLStencilElement' are not identical. [plugin angular-compiler]

    node_modules/@ionic/core/dist/types/components.d.ts:4326:14:
      4326 │     interface HTMLIonInputElement extends Components.IonInput, H...

X [ERROR] TS2320: Interface 'HTMLIonSearchbarElement' cannot simultaneously extend types 'IonSearchbar' and 'HTMLStencilElement'.
  Named property 'autocorrect' of types 'IonSearchbar' and 'HTMLStencilElement' are not identical. [plugin angular-compiler]

    node_modules/@ionic/core/dist/types/components.d.ts:4888:14:
      4888 │     interface HTMLIonSearchbarElement extends Components.IonSear...

and my project went well with angular@v20.1.* and typescript@v5.8.*

Expected Behavior

Success to build and serve

Steps to Reproduce

1. update deps with angular@v20.2.0 and typescript@v5.9.2
2. try to serve with npx ng serve

Ionic Info

Ionic:

Ionic CLI : 7.2.1 (C:\Users\USER\AppData\Local\npm-cache_npx\f6fddb685269761d\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 8.7.2
@angular-devkit/build-angular : not installed
@angular-devkit/schematics : 20.2.0
@angular/cli : 20.2.0
@ionic/angular-toolkit : not installed

Capacitor:

Capacitor CLI : 7.4.2
@capacitor/android : 7.4.2
@capacitor/core : 7.4.2
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v24.6.0 (C:\Program Files\nodejs\node.exe)
npm : 11.5.2
OS : Windows 10

---

Sorry for my poor English 😆

[IAM5K]

Facing same issue in new app.

{
  "dependencies": {
    "@angular/animations": "^20.0.0",
    "@angular/common": "^20.0.0",
    "@angular/compiler": "^20.0.0",
    "@angular/core": "^20.0.0",
    "@angular/forms": "^20.0.0",
    "@angular/platform-browser": "^20.0.0",
    "@angular/platform-browser-dynamic": "^20.0.0",
    "@angular/router": "^20.0.0",
    "@angular/service-worker": "^20.0.0",
    "@capacitor/android": "7.4.3",
    "@capacitor/app": "7.0.2",
    "@capacitor/core": "7.4.3",
    "@capacitor/haptics": "7.0.2",
    "@capacitor/ios": "7.4.3",
    "@capacitor/keyboard": "7.0.2",
    "@capacitor/status-bar": "7.0.2",
    "@ionic/angular": "^8.0.0",
    "firebase-tools": "^14.14.0",
    "ionicons": "^7.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^20.0.0",
    "@angular-eslint/builder": "^20.0.0",
    "@angular-eslint/eslint-plugin": "^20.0.0",
    "@angular-eslint/eslint-plugin-template": "^20.0.0",
    "@angular-eslint/schematics": "^20.0.0",
    "@angular-eslint/template-parser": "^20.0.0",
    "@angular/cli": "^20.0.0",
    "@angular/compiler-cli": "^20.0.0",
    "@angular/language-service": "^20.0.0",
    "@capacitor/cli": "7.4.3",
    "@ionic/angular-toolkit": "^12.0.0",
    "@types/jasmine": "~5.1.0",
    "@typescript-eslint/eslint-plugin": "^8.18.0",
    "@typescript-eslint/parser": "^8.18.0",
    "eslint": "^9.16.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsdoc": "^48.2.1",
    "eslint-plugin-prefer-arrow": "1.2.3",
    "jasmine-core": "5.9.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "5.9.2"
  },
}

Hope we get fix soon.
Message for the testing team, atleast test once before release.

[loganmurray-infor]

FYI you can force a build by adding "skipLibCheck": true to your tsconfig.json's compilerOptions, but also hoping this gets resolved soon.

[pedrodominguesp]

Facing same issue in new app

[davidsarkany]

FYI you can force a build by adding "skipLibCheck": false to your tsconfig.json's compilerOptions, but also hoping this gets resolved soon.

You need to add "skipLibCheck": true

[loganmurray-infor]

You need to add "skipLibCheck": true

Whoops, corrected.

[brandyscarney]

Thanks for the issue!

You should be able to work around this by downgrading TypeScript:

npm i typescript@5.8.3 --save-exact

[brysonreese]

Confirmed downgrade to typescript@5.8.3 worked in my case. Thank you much!

[SoraNoIseki]

This fixed the issue for me, works fine with TypeScript@5.8.3 too. Thanks!