DEV Community

loading...

How I upgraded from angular 4 to 7

tkt009
Software developer .Here to learn and contribute. Motto: Help yourself and others.
・2 min read

We have an angular app with 4.0 version. And we needed to upgrade it to 7.
There is an angular upgrade guide https://update.angular.io/. However, it is worth noting the challenges faced and their solutions.In the process of upgrade there were a few takeaways which I want to share.

Here are the steps to upgrade.

  1. check angular cli version using ng --version The angular cli in my project was 1.3.0, and was throwing this warning

Your global Angular CLI version (7.3.9) is greater than your local
version (1.3.0). The local Angular CLI version is used.

What does this mean?
There is a global version of angular cli and a local version of it installed. Since the global version of cli is higher than the local one, this warning is thrown.

Why do we need global version then?
Global version is needed to be able to create a new application using
ng new <app-name>

2.Since I aimed to upgrade to angular 7, next step is to uninstall the local version of cli to the version needed for angular 7.Uninstall using following command
npm uninstall @angular/cli@1.3.0

  1. upgrade to the desired version by checking whihc version of angular you need to install, else it will install the latest angular packages. npm install @angular/cli@7.3.9

Note: cli 7.3.9 installs angular 7.2.0
There's a nice article that explains the angular cli version needed for the specific angular version to be installed. https://medium.com/@ferie/how-to-install-a-specific-angular-version-16d4766341f3

4.upgrade angular packages
ng update @angular/core@7.2.0
when you do so, gives an error:-

Package "codelyzer" has an incompatible peer dependency to "@angular/compiler" (requires "^2.3.1 || >=4.0.0-beta <5.0.0" (extended), would install "7.2.0")

Solution i tried: manually updated the codelyzer package from "codelyzer": "~3.1.1", to "codelyzer": "~4.5.0"
then tried the command again and it worked.

  1. after correcting the above codelyzer issue, try this again ng update @angular/core@7.2.0 it again says the same issue. then delete your node_modules folder and try again. This time it successfully upgrades the angular core package in package.json

6.also upgrade angular material using
ng update @angular/materials

7.Now run the command
ng build --prod
gives this error:
The build command requires to be run in an Angular project, but a project definition could not be found.
Solution: run the following command
ng update @angular/cli@7.3.9 --migrate-only --from=1.3.0
https://www.ozkary.com/2019/01/angular-serve-command-requires-angular-project.html
This was the step missing and not mentioned in angular official upgrade guide.

Hope this helps and makes your upgrade process smoother

Discussion (0)