I just want to clarify this is not a step-by-step update process. It is just a post that I would have liked to read before updating my project.
You enter into a development project. There is some code already, but outdated. That's what happened to us. The angular project we were working on, was Angular 9.
There are 2 paths here.
- Keep going with the current version of the angular project (outdated).
- Try to update it to the latest Angular version.
Both have their issues that we have to handle...
Like any other developer 😎, I googled "angular update version" and the very first entry was the official angular page for update your project, there just have to select your current angular project version and the one you want to migrate to.
Unfortunately, it is not recommended, moving across multiple major versions. So we have to update from 9 to 10, then from 10 to 11, and so on.
Just follow the guide and remember to add the --force flag when you run ex.ng update @angular/core@10 @angular/cli@10, otherwise, your project will not update.
Here starts the good part...
First of all, if you're working in a git repository (as I strongly recommend do it), your current branch have to be clean (No unstash changes).
There is a special error not documented, It is caused by the update process itself, it'll replace the browserslist file with a new one .browserlistrc
Unknown error from PostCSS plugin. Your current PostCSS version is 8.3.0, but postcss-preset-env uses 7.0.35. Perhaps this is the source of the error below.
You have to delete the .browserlistrc file to solve the problem and create a new .browserlistrc with the following code:
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support
# You can see what browsers were selected by your queries by running:
# npx browserslist
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
After getting to version 12, if you run the command ng update in the terminal it is going to show the libraries that can be updated. To update them run ex.ng update @angular/cdk @angular/material ngx-ui-loader
Depends on your code, you may or may not get extra errors. The most common way to get rid of them is to delete the node_modules folder and the package-lock.json file, and run npm install again.
There are cases when a specific library isn't working with another one. If you don't want to deal with the refactoring now, just downgrade that library and keep working.
Finally, run ng version to check the library's version.