All Articles

How to upgrade Ionic Angular v8 to v9 with all the errors I got along the way

I have an Ionic v5 that I just created a month ago and it is using version 8 of Angular. Of course, v9 is out now and I want to use the latest version and because I expected Ionic to generate the v9 version but it didn’t :(.

First, update the ionic depencies first by running

npm install @ionic/angular@latest @ionic/angular-toolkit@latest --save

Then update the Angular dependencies

$ ng update @angular/core @angular/cli --force

Your app should be updated by now.

Below are the errors that I encountered before I successfully updated my app.

The “@angular-devkit/schematics” package cannot be resolved from the workspace root directory. This may be due to an unsupported node modules structure.

Please remove both the “node_modules” directory and the package lock file; and then reinstall.

If this does not correct the problem, please temporarily install the “@angular-devkit/schematics” package within the workspace. It can be removed once the update is complete.

Thanks for informing me console.log. So I removed the node_modules and package-lock.json and install the @angular-devkit/schematics with this command

npm install @angular-devkit/schematics --save-dev

Then, I tried to run this command again

$ ng update @angular/core @angular/cli

Then I got a different error :(

Package “@angular/platform-browser” has a missing peer dependency of “@angular/animations” @ “9.1.7”.

Incompatible peer dependencies found.

Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.

You can use the ‘—force’ option to ignore incompatible peer dependencies and instead address these warnings later.

I tried the the same command with —force option

$ ng update @angular/core @angular/cli --force

That did the trick!

Here’s my previous versions of angular packages

"dependencies": {

"@angular/common": "~8.1.2",

"@angular/core": "~8.1.2",

"@angular/fire": "^5.4.2",

"@angular/forms": "~8.1.2",

"@angular/platform-browser": "~8.1.2",

"@angular/platform-browser-dynamic": "~8.1.2",

"@angular/pwa": "^0.901.4",

"@angular/router": "~8.1.2",

"@angular/service-worker": "~8.1.2",

And the updated one

"dependencies": {

"@angular/common": "~9.1.7",

"@angular/core": "~9.1.7",

"@angular/fire": "^5.4.2",

"@angular/forms": "~9.1.7",

"@angular/platform-browser": "~9.1.7",

"@angular/platform-browser-dynamic": "~9.1.7",

"@angular/router": "~9.1.7",

"@angular/service-worker": "~9.1.7",