@ionic/angular, Angular 13, typescript and ionicons dependency conflict

Question

Installed environment:

ionic info

Ionic:

   Ionic CLI                     : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.8.5
   @angular-devkit/build-angular : 13.0.2
   @angular-devkit/schematics    : 13.0.2
   @angular/cli                  : 13.0.2
   @ionic/angular-toolkit        : 5.0.3

Capacitor:

   Capacitor CLI      : 3.3.1
   @capacitor/android : 3.3.1
   @capacitor/core    : 3.3.1
   @capacitor/ios     : 3.3.1

Utility:

   cordova-res : 0.15.3
   native-run  : 1.5.0

System:

   NodeJS : v17.0.1 (/usr/local/Cellar/node/17.0.1/bin/node)
   npm    : 8.1.3
   OS     : macOS Monterey

Angular 13 Requires Typescript >= 4.4.2

@ionic/angular latest version is 5.8.5, it uses @ionic/core latest version 5.8.5

@ionic/core has dependency of ionicons version 5.5.3 which is INCOMPATIBLE with Typescript >= 4.4.x

Therefore ionicons has released versions 6, which IS compatible with the Typescript >= 4.4.x

The problem is that the @ionic/core requires outdated version of ionicons (5.5.3). How can I replace that thing, so @ionic/core (which is part of @ionic/angular) would use the latest version of ionicons dependency (6.0.0) ?

Answer 1

You can try using the package - npm-force-resolutions https://www.npmjs.com/package/npm-force-resolutions

and add the following on package.json

"scripts": {
   "preinstall": "npm-force-resolutions",
    ...
},
"resolutions": {
   "ionicons": "6.0.0"
}

Answer 2

Latest ionic version currently supports Angular 12.x.x versions. Try downgrading to Angular 12.x.x. (This from my project dependency)

"npm outdated" output "ionic info" output