Angular Update Guide, NVM, Madge, etc.
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.
Angular Update Guide
https://update.angular.io/ is a very helpful site that describes the things to do for upgrades between specific versions.
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 deprecatedUnfortunately, 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”.
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 14Now, when I run “nvm list”, this is the output:
Now, whenever I get the same error message in old versioned Angular project, I just run:
nvm use 14Madge
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 madgeHow to run in your Angular project:
madge --circular --extensions ts <directory_path>
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.
Test Build Error — “Angular JIT Compilation Failed”
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”.
npm outdated
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 outdatedA fragment of the output is:
“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!
