Useful Tools for Angular Upgrade

Angular Update Guide, NVM, Madge, etc.

Photo by Franco Antonio Giovanella on Unsplash

Recently, we have upgraded our Angular version from 9 to 13 at work. There happened to be some problems, eventually and here I will describe how we solved them.

https://update.angular.io/ is a very helpful site that describes the things to do for upgrades between specific versions.

https://update.angular.io/

I updated my node version to v17.9.0 to be compatible. You can follow steps provided here (if you are using a Mac):

But the changes would be deployed with a future release so I cloned the project to another folder to avoid problems that will occur when I switch between branches because of the updated dependencies in project’s “node_modules” folder.

I got an error when I ran “ng serve”:

(node:12364) [DEP0111] DeprecationWarning: Access to process.binding(‘http_parser’) is deprecated

Unfortunately, I found out that the new node version is not compatible for old versioned Angular project (StackOverflow link). It was recommended that I downgraded node version but I would need it in our development branch.

So the best recommended solution for my case was to use “nvm”.

I use Homebrew on Mac so I followed the steps described here for installation.

I later installed node version 14 with nvm.

nvm install 14

Now, when I run “nvm list”, this is the output:

nvm command output

Now, whenever I get the same error message in old versioned Angular project, I just run:

nvm use 14

We noticed that Typescript has become more strict 😊. We came across “TypeError: Class extends value undefined is not a function or null” error (which was never thrown before) which turned out to be a circular dependency error (StackOverflow link).

Within comments, “Madge” was recommended to be installed.

For global installation:

npm -g install madge

How to run in your Angular project:

madge --circular --extensions ts <directory_path>
Madge Output Example

You can also view it graphically as defined in its official site with a secondary tool (Graphviz) that requires to be installed but there was no need to use it in our case.

When we ran “ng build -c test” command for test build and ran “http-server ./dist” afterwards, we got “Unhandled Promise rejection: Angular JIT compilation failed error” error (StackOverflow link).

We followed the steps as described in StackOverflow:

  • import ‘@angular/compiler’ at the very top of your main.ts file
  • add below command to your package.json in scripts section.
scripts{
"postinstall": "ngcc --properties es5 browser module main --first-only"
}

From https://iq.js.org/questions/angular/what-is-ngcc:

The ngcc(Angular Compatibility Compiler) is a tool which upgrades node_module compiled with non-ivy ngc into ivy compliant format. The postinstall script from package. json will make sure your node_modules will be compatible with the Ivy renderer. Whereas, Ivy compiler (ngtsc), which compiles Ivy-compatible code.

So, only adding this script will not help. You should also delete your “node_modules” folder and run “npm i” after that. Also, be sure that there is no “aot”: true option left in your angular.json file under “configurations”.

While inspecting Angular JIT Compilation error, I thought it would be because of our outdated dependencies in our project (since their compiled output may not be performed with Ivy compiler). That’s why I thought of finding them out as a list. I came across this StackOverflow link as I searched.

When I run the command below:

npm outdated

A fragment of the output is:

npm outdated output

Depended by” column shows your project’s name (which I blurred).

Package names that are colored with red are the ones we should upgrade. As you can see, “Wanted” and “Latest” versions can differ. “Wanted” shows us the lowest compatible version we can install.

As I said, it was one of the things we tried to overcome the problem but this was not the real cause. I just wanted to add the command in any case of future needs 😊, though.

Happy Coding!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nil Seri

I would love to change the world, but they won’t give me the source code | coding 👩🏼‍💻 | coffee ☕️ | jazz 🎷 | anime 🐲 | books 📚 | drawing 🎨