bug: @Ionic/angular conflicting peer dependency with @angular/core

[Julien-Marcou]

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

• v4.x
• v5.x
• v6.x

Current Behavior

(This may be related to #23767 but my version of node.js & npm are up to date)

When trying to update Angular from the v12.2.11 to the v12.2.12 I get the following error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: my-app@0.0.0
npm ERR! Found: @angular-devkit/build-angular@12.2.11
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"~12.2.12" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"~12.2.12" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/core@12.2.12
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"12.2.12" from @angular/service-worker@12.2.12
npm ERR!   node_modules/@angular/service-worker
npm ERR!     peerOptional @angular/service-worker@"^12.0.0" from @angular-devkit/build-angular@12.2.12
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR!       dev @angular-devkit/build-angular@"~12.2.12" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/jmarcou/.npm/eresolve-report.txt for a full report.

Looking at the package.json & package-lock.json I could not see any problem for this to occur, so I went and tried to remove some package one by one until I could update Angular without any dependency conflict.

In the end, just by removing the @ionic/angular dependency, I was able to update Angular, which I'm not able to do otherwise.

Expected Behavior

I should be able to update Angular to v12.2.12 with @ionic/angular being installed

Steps to Reproduce

First, create an Ionic project with @angular/ionic

Here's my package.json:

{
  "name": "my-app",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@angular/common": "~12.2.11",
    "@angular/compiler": "~12.2.11",
    "@angular/core": "~12.2.11",
    "@angular/forms": "~12.2.11",
    "@angular/platform-browser": "~12.2.11",
    "@angular/platform-browser-dynamic": "~12.2.11",
    "@angular/router": "~12.2.11",
    "@capacitor/android": "^3.2.5",
    "@capacitor/app": "^1.0.5",
    "@capacitor/core": "^3.2.5",
    "@capacitor/filesystem": "^1.0.5",
    "@capacitor/haptics": "^1.1.2",
    "@capacitor/keyboard": "^1.1.2",
    "@capacitor/splash-screen": "^1.1.5",
    "@capacitor/status-bar": "^1.0.5",
    "@cospired/i18n-iso-languages": "^3.1.1",
    "@ionic/angular": "^5.8.4",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "@robingenz/capacitor-android-dark-mode-support": "^1.0.0",
    "i18n-iso-countries": "^6.8.0",
    "rxjs": "~6.6.7",
    "tslib": "^2.3.1",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.11",
    "@angular-eslint/builder": "^12.6.1",
    "@angular-eslint/eslint-plugin": "^12.6.1",
    "@angular-eslint/eslint-plugin-template": "^12.6.1",
    "@angular-eslint/schematics": "^12.6.1",
    "@angular-eslint/template-parser": "^12.6.1",
    "@angular/cli": "~12.2.11",
    "@angular/compiler-cli": "~12.2.11",
    "@capacitor/cli": "^3.2.5",
    "@types/node": "^16.11.6",
    "@typescript-eslint/eslint-plugin": "^5.2.0",
    "@typescript-eslint/parser": "^5.2.0",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-jsdoc": "^37.0.3",
    "eslint-plugin-prefer-arrow": "^1.2.3",
    "typescript": "~4.3.5"
  }
}

Then, run the following command ng update @angular/core @angular/cli

You'll get the Could not resolve dependency error

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI                     : 6.18.0 (/home/jmarcou/.nvm/versions/node/v16.13.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.8.4
   @angular-devkit/build-angular : 12.2.11
   @angular-devkit/schematics    : 12.2.11
   @angular/cli                  : 12.2.11
   @ionic/angular-toolkit        : not installed

Capacitor:

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

Utility:

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

System:

   NodeJS : v16.13.0 (/home/jmarcou/.nvm/versions/node/v16.13.0/bin/node)
   npm    : 8.1.0
   OS     : Linux 5.10 (WSL 2 on Windows 10)

Additional Information

Here is the workaround I found to solve this problem:

• first remove @ionic/angular from your package.json
• then run ng update with the --allow-dirty option (the only files not commited are the package.json & package-lock.json that have just changed because of the removal of @ionic/angular)
• finally, re-install @ionic/angular

Here is the full command : npm remove @ionic/angular && ng update @angular/core @angular/cli --allow-dirty && npm install @ionic/angular@^5.8.4

[liamdebeasi]

Thanks for the issue. I don't see anything Ionic related in the error provided. It looks like the conflicting peer dependency is @angular/core@12.2.12 not Ionic Angular.

Does the full error mention @ionic/angular at all?

[Julien-Marcou]

This is the full error, it does not mention @ionic/angular, but I could no see anything at all when looking at my package-lock.json that could result in a conflict between @angular-devkit/build-angular & @angular/core (in fact I could not see any problem at all), I was quite lost, that's why I tried removing packaging until it fixed the error.

I don't understand why removing @ionic/angular resolve the conflict, but I mentioned this in case someone encounter this error, so they can work around the problem.

NPM has released a fix about peer dependency, I'll try it to see if it fixes my problem.

[Julien-Marcou]

No more luck, same error with npm 8.1.2

Here is the full report, I had not watched it before, but it does have a mention to @ionic/angular:

eresolve-report.txt

# npm resolution error report

2021-10-30T02:18:59.191Z

While resolving: my-app@0.0.0
Found: @angular-devkit/build-angular@12.2.11
node_modules/@angular-devkit/build-angular
  dev @angular-devkit/build-angular@"~12.2.12" from the root project

Could not resolve dependency:
dev @angular-devkit/build-angular@"~12.2.12" from the root project

Conflicting peer dependency: @angular/core@12.2.12
node_modules/@angular/core
  peer @angular/core@"12.2.12" from @angular/service-worker@12.2.12
  node_modules/@angular/service-worker
    peerOptional @angular/service-worker@"^12.0.0" from @angular-devkit/build-angular@12.2.12
    node_modules/@angular-devkit/build-angular
      dev @angular-devkit/build-angular@"~12.2.12" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
  "code": "ERESOLVE",
  "edge": {
    "type": "dev",
    "name": "@angular-devkit/build-angular",
    "spec": "~12.2.12",
    "error": "INVALID",
    "from": {
      "location": "/home/jmarcou/dev/my-app"
    }
  },
  "dep": {
    "name": "@angular-devkit/build-angular",
    "version": "12.2.12",
    "whileInstalling": {
      "name": "my-app",
      "version": "0.0.0",
      "path": "/home/jmarcou/dev/my-app"
    },
    "location": "node_modules/@angular-devkit/build-angular",
    "isWorkspace": false,
    "dependents": [
      {
        "type": "dev",
        "name": "@angular-devkit/build-angular",
        "spec": "~12.2.12",
        "error": "INVALID",
        "from": {
          "location": "/home/jmarcou/dev/my-app"
        }
      }
    ]
  },
  "current": {
    "name": "@angular-devkit/build-angular",
    "version": "12.2.11",
    "location": "node_modules/@angular-devkit/build-angular",
    "isWorkspace": false,
    "dependents": [
      {
        "type": "dev",
        "name": "@angular-devkit/build-angular",
        "spec": "~12.2.12",
        "error": "INVALID",
        "from": {
          "location": "/home/jmarcou/dev/my-app"
        }
      }
    ]
  },
  "peerConflict": {
    "current": {
      "name": "@angular/core",
      "version": "12.2.11",
      "location": "node_modules/@angular/core",
      "isWorkspace": false,
      "dependents": [
        {
          "type": "prod",
          "name": "@angular/core",
          "spec": "~12.2.12",
          "error": "INVALID",
          "from": {
            "location": "/home/jmarcou/dev/my-app"
          }
        },
        {
          "type": "peer",
          "name": "@angular/core",
          "spec": "12.2.11",
          "from": {
            "name": "@angular/animations",
            "version": "12.2.11",
            "location": "node_modules/@angular/animations",
            "isWorkspace": false,
            "dependents": [
              {
                "type": "peerOptional",
                "name": "@angular/animations",
                "spec": "12.2.11",
                "from": {
                  "name": "@angular/platform-browser",
                  "version": "12.2.11",
                  "location": "node_modules/@angular/platform-browser",
                  "isWorkspace": false,
                  "dependents": [
                    {
                      "type": "prod",
                      "name": "@angular/platform-browser",
                      "spec": "~12.2.12",
                      "error": "INVALID",
                      "from": {
                        "location": "/home/jmarcou/dev/my-app"
                      }
                    },
                    {
                      "type": "peer",
                      "name": "@angular/platform-browser",
                      "spec": "12.2.11",
                      "from": {
                        "name": "@angular/forms",
                        "version": "12.2.11",
                        "location": "node_modules/@angular/forms",
                        "isWorkspace": false,
                        "dependents": [
                          {
                            "type": "prod",
                            "name": "@angular/forms",
                            "spec": "~12.2.12",
                            "error": "INVALID",
                            "from": {
                              "location": "/home/jmarcou/dev/my-app"
                            }
                          },
                          {
                            "type": "peer",
                            "name": "@angular/forms",
                            "spec": ">=8.2.7",
                            "from": {
                              "name": "@ionic/angular",
                              "version": "5.8.4",
                              "location": "node_modules/@ionic/angular",
                              "isWorkspace": false,
                              "dependents": [
                                {
                                  "type": "prod",
                                  "name": "@ionic/angular",
                                  "spec": "^5.8.4",
                                  "from": {
                                    "location": "/home/jmarcou/dev/my-app"
                                  }
                                }
                              ]
                            }
                          }
                        ]
                      }
                    },
                    {
                      "type": "peer",
                      "name": "@angular/platform-browser",
                      "spec": "12.2.11",
                      "from": {
                        "name": "@angular/platform-browser-dynamic",
                        "version": "12.2.11",
                        "location": "node_modules/@angular/platform-browser-dynamic",
                        "isWorkspace": false,
                        "dependents": [
                          {
                            "type": "prod",
                            "name": "@angular/platform-browser-dynamic",
                            "spec": "~12.2.12",
                            "error": "INVALID",
                            "from": {
                              "location": "/home/jmarcou/dev/my-app"
                            }
                          }
                        ]
                      }
                    },
                    {
                      "type": "peer",
                      "name": "@angular/platform-browser",
                      "spec": "12.2.11",
                      "from": {
                        "name": "@angular/router",
                        "version": "12.2.11",
                        "location": "node_modules/@angular/router",
                        "isWorkspace": false,
                        "dependents": [
                          {
                            "type": "prod",
                            "name": "@angular/router",
                            "spec": "~12.2.12",
                            "error": "INVALID",
                            "from": {
                              "location": "/home/jmarcou/dev/my-app"
                            }
                          },
                          {
                            "type": "peer",
                            "name": "@angular/router",
                            "spec": ">=8.2.7",
                            "from": {
                              "name": "@ionic/angular",
                              "version": "5.8.4",
                              "location": "node_modules/@ionic/angular",
                              "isWorkspace": false,
                              "dependents": [
                                {
                                  "type": "prod",
                                  "name": "@ionic/angular",
                                  "spec": "^5.8.4",
                                  "from": {
                                    "location": "/home/jmarcou/dev/my-app"
                                  }
                                }
                              ]
                            }
                          }
                        ]
                      }
                    }
                  ]
                }
              }
            ]
          }
        },
        {
          "type": "peer",
          "name": "@angular/core",
          "spec": "12.2.11",
          "from": {
            "name": "@angular/common",
            "version": "12.2.11",
            "location": "node_modules/@angular/common",
            "isWorkspace": false,
            "dependents": [
              {
                "type": "prod",
                "name": "@angular/common",
                "spec": "~12.2.12",
                "error": "INVALID",
                "from": {
                  "location": "/home/jmarcou/dev/my-app"
                }
              },
              {
                "type": "peer",
                "name": "@angular/common",
                "spec": "12.2.11",
                "from": {
                  "name": "@angular/forms",
                  "version": "12.2.11",
                  "location": "node_modules/@angular/forms",
                  "isWorkspace": false,
                  "dependents": [
                    {
                      "type": "prod",
                      "name": "@angular/forms",
                      "spec": "~12.2.12",
                      "error": "INVALID",
                      "from": {
                        "location": "/home/jmarcou/dev/my-app"
                      }
                    },
                    {
                      "type": "peer",
                      "name": "@angular/forms",
                      "spec": ">=8.2.7",
                      "from": {
                        "name": "@ionic/angular",
                        "version": "5.8.4",
                        "location": "node_modules/@ionic/angular",
                        "isWorkspace": false,
                        "dependents": [
                          {
                            "type": "prod",
                            "name": "@ionic/angular",
                            "spec": "^5.8.4",
                            "from": {
                              "location": "/home/jmarcou/dev/my-app"
                            }
                          }
                        ]
                      }
                    }
                  ]
                }
              },
              {
                "type": "peer",
                "name": "@angular/common",
                "spec": "12.2.11",
                "from": {
                  "name": "@angular/platform-browser",
                  "version": "12.2.11",
                  "location": "node_modules/@angular/platform-browser",
                  "isWorkspace": false,
                  "dependents": [
                    {
                      "type": "prod",
                      "name": "@angular/platform-browser",
                      "spec": "~12.2.12",
                      "error": "INVALID",
                      "from": {
                        "location": "/home/jmarcou/dev/my-app"
                      }
                    },
                    {
                      "type": "peer",
                      "name": "@angular/platform-browser",
                      "spec": "12.2.11",
                      "from": {
                        "name": "@angular/forms",
                        "version": "12.2.11",
                        "location": "node_modules/@angular/forms",
                        "isWorkspace": false,
                        "dependents": [
                          {
                            "type": "prod",
                            "name": "@angular/forms",
                            "spec": "~12.2.12",
                            "error": "INVALID",
                            "from": {
                              "location": "/home/jmarcou/dev/my-app"
                            }
                          },
                          {
                            "type": "peer",
                            "name": "@angular/forms",
                            "spec": ">=8.2.7",
                            "from": {
                              "name": "@ionic/angular",
                              "version": "5.8.4",
                              "location": "node_modules/@ionic/angular",
                              "isWorkspace": false,
                              "dependents": [
                                {
                                  "type": "prod",
                                  "name": "@ionic/angular",
                                  "spec": "^5.8.4",
                                  "from": {
                                    "location": "/home/jmarcou/dev/my-app"
                                  }
                                }
                              ]
                            }
                          }
                        ]
                      }
                    },
                    {
                      "type": "peer",
                      "name": "@angular/platform-browser",
                      "spec": "12.2.11",
                      "from": {
                        "name": "@angular/platform-browser-dynamic",
                        "version": "12.2.11",
                        "location": "node_modules/@angular/platform-browser-dynamic",
                        "isWorkspace": false,
                        "dependents": [
                          {
                            "type": "prod",
                            "name": "@angular/platform-browser-dynamic",
                            "spec": "~12.2.12",
                            "error": "INVALID",
                            "from": {
                              "location": "/home/jmarcou/dev/my-app"
                            }
                          }
                        ]
                      }
                    },
                    {
                      "type": "peer",
                      "name": "@angular/platform-browser",
                      "spec": "12.2.11",
                      "from": {
                        "name": "@angular/router",
                        "version": "12.2.11",
                        "location": "node_modules/@angular/router",
                        "isWorkspace": false,
                        "dependents": [
                          {
                            "type": "prod",
                            "name": "@angular/router",
                            "spec": "~12.2.12",
                            "error": "INVALID",
                            "from": {
                              "location": "/home/jmarcou/dev/my-app"
                            }
                          },
                          {
                            "type": "peer",
                            "name": "@angular/router",
                            "spec": ">=8.2.7",
                            "from": {
                              "name": "@ionic/angular",
                              "version": "5.8.4",
                              "location": "node_modules/@ionic/angular",
                              "isWorkspace": false,
                              "dependents": [
                                {
                                  "type": "prod",
                                  "name": "@ionic/angular",
                                  "spec": "^5.8.4",
                                  "from": {
                                    "location": "/home/jmarcou/dev/my-app"
                                  }
                                }
                              ]
                            }
                          }
                        ]
                      }
                    }
                  ]
                }
              },
              {
                "type": "peer",
                "name": "@angular/common",
                "spec": "12.2.11",
                "from": {
                  "name": "@angular/platform-browser-dynamic",
                  "version": "12.2.11",
                  "location": "node_modules/@angular/platform-browser-dynamic",
                  "isWorkspace": false,
                  "dependents": [
                    {
                      "type": "prod",
                      "name": "@angular/platform-browser-dynamic",
                      "spec": "~12.2.12",
                      "error": "INVALID",
                      "from": {
                        "location": "/home/jmarcou/dev/my-app"
                      }
                    }
                  ]
                }
              },
              {
                "type": "peer",
                "name": "@angular/common",
                "spec": "12.2.11",
                "from": {
                  "name": "@angular/router",
                  "version": "12.2.11",
                  "location": "node_modules/@angular/router",
                  "isWorkspace": false,
                  "dependents": [
                    {
                      "type": "prod",
                      "name": "@angular/router",
                      "spec": "~12.2.12",
                      "error": "INVALID",
                      "from": {
                        "location": "/home/jmarcou/dev/my-app"
                      }
                    },
                    {
                      "type": "peer",
                      "name": "@angular/router",
                      "spec": ">=8.2.7",
                      "from": {
                        "name": "@ionic/angular",
                        "version": "5.8.4",
                        "location": "node_modules/@ionic/angular",
                        "isWorkspace": false,
                        "dependents": [
                          {
                            "type": "prod",
                            "name": "@ionic/angular",
                            "spec": "^5.8.4",
                            "from": {
                              "location": "/home/jmarcou/dev/my-app"
                            }
                          }
                        ]
                      }
                    }
                  ]
                }
              },
              {
                "type": "peer",
                "name": "@angular/common",
                "spec": ">=10.0.0",
                "from": {
                  "name": "@ngx-translate/http-loader",
                  "version": "6.0.0",
                  "location": "node_modules/@ngx-translate/http-loader",
                  "isWorkspace": false,
                  "dependents": [
                    {
                      "type": "prod",
                      "name": "@ngx-translate/http-loader",
                      "spec": "^6.0.0",
                      "from": {
                        "location": "/home/jmarcou/dev/my-app"
                      }
                    }
                  ]
                }
              }
            ]
          }
        },
        {
          "type": "peer",
          "name": "@angular/core",
          "spec": "12.2.11",
          "from": {
            "name": "@angular/forms",
            "version": "12.2.11",
            "location": "node_modules/@angular/forms",
            "isWorkspace": false,
            "dependents": [
              {
                "type": "prod",
                "name": "@angular/forms",
                "spec": "~12.2.12",
                "error": "INVALID",
                "from": {
                  "location": "/home/jmarcou/dev/my-app"
                }
              },
              {
                "type": "peer",
                "name": "@angular/forms",
                "spec": ">=8.2.7",
                "from": {
                  "name": "@ionic/angular",
                  "version": "5.8.4",
                  "location": "node_modules/@ionic/angular",
                  "isWorkspace": false,
                  "dependents": [
                    {
                      "type": "prod",
                      "name": "@ionic/angular",
                      "spec": "^5.8.4",
                      "from": {
                        "location": "/home/jmarcou/dev/my-app"
                      }
                    }
                  ]
                }
              }
            ]
          }
        },
        {
          "type": "peer",
          "name": "@angular/core",
          "spec": "12.2.11",
          "from": {
            "name": "@angular/platform-browser",
            "version": "12.2.11",
            "location": "node_modules/@angular/platform-browser",
            "isWorkspace": false,
            "dependents": [
              {
                "type": "prod",
                "name": "@angular/platform-browser",
                "spec": "~12.2.12",
                "error": "INVALID",
                "from": {
                  "location": "/home/jmarcou/dev/my-app"
                }
              },
              {
                "type": "peer",
                "name": "@angular/platform-browser",
                "spec": "12.2.11",
                "from": {
                  "name": "@angular/forms",
                  "version": "12.2.11",
                  "location": "node_modules/@angular/forms",
                  "isWorkspace": false,
                  "dependents": [
                    {
                      "type": "prod",
                      "name": "@angular/forms",
                      "spec": "~12.2.12",
                      "error": "INVALID",
                      "from": {
                        "location": "/home/jmarcou/dev/my-app"
                      }
                    },
                    {
                      "type": "peer",
                      "name": "@angular/forms",
                      "spec": ">=8.2.7",
                      "from": {
                        "name": "@ionic/angular",
                        "version": "5.8.4",
                        "location": "node_modules/@ionic/angular",
                        "isWorkspace": false,
                        "dependents": [
                          {
                            "type": "prod",
                            "name": "@ionic/angular",
                            "spec": "^5.8.4",
                            "from": {
                              "location": "/home/jmarcou/dev/my-app"
                            }
                          }
                        ]
                      }
                    }
                  ]
                }
              },
              {
                "type": "peer",
                "name": "@angular/platform-browser",
                "spec": "12.2.11",
                "from": {
                  "name": "@angular/platform-browser-dynamic",
                  "version": "12.2.11",
                  "location": "node_modules/@angular/platform-browser-dynamic",
                  "isWorkspace": false,
                  "dependents": [
                    {
                      "type": "prod",
                      "name": "@angular/platform-browser-dynamic",
                      "spec": "~12.2.12",
                      "error": "INVALID",
                      "from": {
                        "location": "/home/jmarcou/dev/my-app"
                      }
                    }
                  ]
                }
              },
              {
                "type": "peer",
                "name": "@angular/platform-browser",
                "spec": "12.2.11",
                "from": {
                  "name": "@angular/router",
                  "version": "12.2.11",
                  "location": "node_modules/@angular/router",
                  "isWorkspace": false,
                  "dependents": [
                    {
                      "type": "prod",
                      "name": "@angular/router",
                      "spec": "~12.2.12",
                      "error": "INVALID",
                      "from": {
                        "location": "/home/jmarcou/dev/my-app"
                      }
                    },
                    {
                      "type": "peer",
                      "name": "@angular/router",
                      "spec": ">=8.2.7",
                      "from": {
                        "name": "@ionic/angular",
                        "version": "5.8.4",
                        "location": "node_modules/@ionic/angular",
                        "isWorkspace": false,
                        "dependents": [
                          {
                            "type": "prod",
                            "name": "@ionic/angular",
                            "spec": "^5.8.4",
                            "from": {
                              "location": "/home/jmarcou/dev/my-app"
                            }
                          }
                        ]
                      }
                    }
                  ]
                }
              }
            ]
          }
        },
        {
          "type": "peer",
          "name": "@angular/core",
          "spec": "12.2.11",
          "from": {
            "name": "@angular/platform-browser-dynamic",
            "version": "12.2.11",
            "location": "node_modules/@angular/platform-browser-dynamic",
            "isWorkspace": false,
            "dependents": [
              {
                "type": "prod",
                "name": "@angular/platform-browser-dynamic",
                "spec": "~12.2.12",
                "error": "INVALID",
                "from": {
                  "location": "/home/jmarcou/dev/my-app"
                }
              }
            ]
          }
        },
        {
          "type": "peer",
          "name": "@angular/core",
          "spec": "12.2.11",
          "from": {
            "name": "@angular/router",
            "version": "12.2.11",
            "location": "node_modules/@angular/router",
            "isWorkspace": false,
            "dependents": [
              {
                "type": "prod",
                "name": "@angular/router",
                "spec": "~12.2.12",
                "error": "INVALID",
                "from": {
                  "location": "/home/jmarcou/dev/my-app"
                }
              },
              {
                "type": "peer",
                "name": "@angular/router",
                "spec": ">=8.2.7",
                "from": {
                  "name": "@ionic/angular",
                  "version": "5.8.4",
                  "location": "node_modules/@ionic/angular",
                  "isWorkspace": false,
                  "dependents": [
                    {
                      "type": "prod",
                      "name": "@ionic/angular",
                      "spec": "^5.8.4",
                      "from": {
                        "location": "/home/jmarcou/dev/my-app"
                      }
                    }
                  ]
                }
              }
            ]
          }
        },
        {
          "type": "peer",
          "name": "@angular/core",
          "spec": ">=8.2.7",
          "from": {
            "name": "@ionic/angular",
            "version": "5.8.4",
            "location": "node_modules/@ionic/angular",
            "isWorkspace": false,
            "dependents": [
              {
                "type": "prod",
                "name": "@ionic/angular",
                "spec": "^5.8.4",
                "from": {
                  "location": "/home/jmarcou/dev/my-app"
                }
              }
            ]
          }
        },
        {
          "type": "peer",
          "name": "@angular/core",
          "spec": ">=10.0.0",
          "from": {
            "name": "@ngx-translate/core",
            "version": "13.0.0",
            "location": "node_modules/@ngx-translate/core",
            "isWorkspace": false,
            "dependents": [
              {
                "type": "prod",
                "name": "@ngx-translate/core",
                "spec": "^13.0.0",
                "from": {
                  "location": "/home/jmarcou/dev/my-app"
                }
              },
              {
                "type": "peer",
                "name": "@ngx-translate/core",
                "spec": ">=13.0.0",
                "from": {
                  "name": "@ngx-translate/http-loader",
                  "version": "6.0.0",
                  "location": "node_modules/@ngx-translate/http-loader",
                  "isWorkspace": false,
                  "dependents": [
                    {
                      "type": "prod",
                      "name": "@ngx-translate/http-loader",
                      "spec": "^6.0.0",
                      "from": {
                        "location": "/home/jmarcou/dev/my-app"
                      }
                    }
                  ]
                }
              }
            ]
          }
        }
      ]
    },
    "peer": {
      "name": "@angular/core",
      "version": "12.2.12",
      "whileInstalling": {
        "name": "my-app",
        "version": "0.0.0",
        "path": "/home/jmarcou/dev/my-app"
      },
      "location": "node_modules/@angular/core",
      "isWorkspace": false,
      "dependents": [
        {
          "type": "peer",
          "name": "@angular/core",
          "spec": "12.2.12",
          "from": {
            "name": "@angular/service-worker",
            "version": "12.2.12",
            "whileInstalling": {
              "name": "my-app",
              "version": "0.0.0",
              "path": "/home/jmarcou/dev/my-app"
            },
            "location": "node_modules/@angular/service-worker",
            "isWorkspace": false,
            "dependents": [
              {
                "type": "peerOptional",
                "name": "@angular/service-worker",
                "spec": "^12.0.0",
                "from": {
                  "name": "@angular-devkit/build-angular",
                  "version": "12.2.12",
                  "whileInstalling": {
                    "name": "my-app",
                    "version": "0.0.0",
                    "path": "/home/jmarcou/dev/my-app"
                  },
                  "location": "node_modules/@angular-devkit/build-angular",
                  "isWorkspace": false,
                  "dependents": [
                    {
                      "type": "dev",
                      "name": "@angular-devkit/build-angular",
                      "spec": "~12.2.12",
                      "error": "INVALID",
                      "from": {
                        "location": "/home/jmarcou/dev/my-app"
                      }
                    }
                  ]
                }
              }
            ]
          }
        }
      ]
    }
  },
  "strictPeerDeps": false,
  "force": false,
  "isMine": true
}

[liamdebeasi]

Thanks. The error here is not with Ionic Angular, and this appears to be a defect in npm 7.

The dependency @angular/core@12.2.12 satisfies the SemVer dependency of @angular/core@>=8.2.7 for @ionic/angular. I did some digging and other Angular users appear to have the same problem (see angular/angular-cli#22009 and angular/angular-cli#21204).

As noted in your error, the conflicting package is @angular/core@12.1.12:

Conflicting peer dependency: @angular/core@12.2.12

The recommended approach from the Angular team is to use the --force flag when upgrading. I am going to close this as this is not a bug in Ionic. Thanks!

[jtweeks]

Try deleting your package.lock file and node_modules then try again

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.