update angular 8 to 9

Question

I am trying to update from 8 to 9 I get this:

Using package manager: 'npm'
Collecting installed dependencies...
Found 85 dependencies.
Fetching dependency metadata from registry...
    Updating package.json with dependency @angular/material @ "9.2.4" (was "8.2.3")...
    Updating package.json with dependency @angular/cdk @ "9.2.4" (was "8.2.3")...
UPDATE package.json (6742 bytes)
⠸ Installing packages...npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @agm/[email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^9.1.13" from the root project
npm ERR!   peer @angular/common@"^9.0.0" from @angular-material-extensions/[email protected]
npm ERR!   node_modules/@angular-material-extensions/password-strength
npm ERR!     @angular-material-extensions/password-strength@"^6.0.0" from the root project
npm ERR!   15 more (@angular/flex-layout, @angular/forms, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^6.0.0 || ^7.0.0 || ^8.0.0" from @agm/[email protected]
npm ERR! node_modules/@agm/core
npm ERR!   @agm/core@"^1.0.0" from the root project
npm ERR!   peer @agm/core@"^1.0.0-beta.7" from @agm/[email protected]
npm ERR!   node_modules/@agm/js-marker-clusterer
npm ERR!     @agm/js-marker-clusterer@"^1.1.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"^6.0.0 || ^7.0.0 || ^8.0.0" from @agm/[email protected]
npm ERR!   node_modules/@agm/core
npm ERR!     @agm/core@"^1.0.0" from the root project
npm ERR!     peer @agm/core@"^1.0.0-beta.7" from @agm/[email protected]
npm ERR!     node_modules/@agm/js-marker-clusterer
npm ERR!       @agm/js-marker-clusterer@"^1.1.0" 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! 

When I run NG_DISABLE_VERSION_CHECK=1 npx @angular/cli@9 update @angular/material@9 I get this:

Using package manager: 'npm'
Collecting installed dependencies...
Found 85 dependencies.
Fetching dependency metadata from registry...
    Updating package.json with dependency @angular/material @ "9.2.4" (was "8.2.3")...
    Updating package.json with dependency @angular/cdk @ "9.2.4" (was "8.2.3")...
UPDATE package.json (6742 bytes)
⠸ Installing packages...npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @agm/[email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^9.1.13" from the root project
npm ERR!   peer @angular/common@"^9.0.0" from @angular-material-extensions/[email protected]
npm ERR!   node_modules/@angular-material-extensions/password-strength
npm ERR!     @angular-material-extensions/password-strength@"^6.0.0" from the root project
npm ERR!   15 more (@angular/flex-layout, @angular/forms, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^6.0.0 || ^7.0.0 || ^8.0.0" from @agm/[email protected]
npm ERR! node_modules/@agm/core
npm ERR!   @agm/core@"^1.0.0" from the root project
npm ERR!   peer @agm/core@"^1.0.0-beta.7" from @agm/[email protected]
npm ERR!   node_modules/@agm/js-marker-clusterer
npm ERR!     @agm/js-marker-clusterer@"^1.1.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"^6.0.0 || ^7.0.0 || ^8.0.0" from @agm/[email protected]
npm ERR!   node_modules/@agm/core
npm ERR!     @agm/core@"^1.0.0" from the root project
npm ERR!     peer @agm/core@"^1.0.0-beta.7" from @agm/[email protected]
npm ERR!     node_modules/@agm/js-marker-clusterer
npm ERR!       @agm/js-marker-clusterer@"^1.1.0" 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! 

Answer 1

You need to understand how npm dependencies work. In the package.json of agm core you will see that Angular ^9.1.0 is used. Therefore you need to run the same or above version of Angular 9 in order to successfully upgrade.

However, looks like your maps package only supports Angular up to version 10. Considering Angular is releasing version 18 soon, you might want to drop your old package for a newer implementation.

In your package.json, update versions of all angular components to 9.1.0 or above.

Answer 2

Understanding the Error

You can fix your dependencies by understanding the error. Lets take a look at what the first dependency is telling us:

npm ERR! While resolving: @agm/[email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^9.1.13" from the root project
npm ERR!   peer @angular/common@"^9.0.0" from @angular-material-extensions/[email protected]
npm ERR!   node_modules/@angular-material-extensions/password-strength
npm ERR!     @angular-material-extensions/password-strength@"^6.0.0" from the root project
npm ERR!   15 more (@angular/flex-layout, @angular/forms, ...)

• @agm/core has an incorrect formatted semantic version dependency in your package.json.
  • It is asking for version ^9.0.0 of @angular/common on line 5.
  • You are providing ^9.1.13 on line 2.

Yes, these are the same major version, but the semantic version is not the same.

You should be able to fix this by doing one of two things:

1. Find a version of @agm/core that has a semantic version of ^9.1.13 for @angular/common.
2. Change your semantic version to ^9.0.0 in the package.json.

Now you just need to do this will all the errors that get reported.

---

Overrides

If ng update is doing this for you, you can always provide an override in your package.json.

Doing it like this, will override ALL references to @angular/common in any package, with angular this is probably what you want.

{
  "overrides": {
    "@angular/common": "^9.1.13"
  }
}

With other packages this may not be what you want, and in that case you can override just for that package. In this example, @org/package's dependence for other/package will use ^1.2.3, by anything else that uses @other/package will use whatever it asks for.

{
  "overrides": {
    "@org/package": {
      "@other/package": "^1.2.3"
    }
  }
}

---

Last Resort

The last thing to do, which I would do as a last resort, is to add --force to the end of the command. This will force it to install the version even if the sematic versions do not match in this case from the example above ^9.1.13.

NG_DISABLE_VERSION_CHECK=1 npx @angular/cli@9 update @angular/material@9 --force