Upgrading from 7.0.4 to Angular 9 a true use case
I happen to be an organizer for Women Techmakers Barcelona International Women’s Day. Any event of that size (200 attendees in 2019, nearly 80 submissions to the c4P this year), needs a website. I volunteered to create and maintain the website last year and, of course, I did it with Angular. At that time the version of the CLI I had installed globally, was 7.X.X and that’s the version we have until today.
I don’t think I will migrate the site effectively today, because we’re amidst the organization and there is so much going on! But I wanted to use it to test the new automated upgrade capabilities of Angular 9 CLI and the Ivy compiler after the upgrade.
The repo is hosted in Github and published on Github pages and has a redirection to a GDG domain, and it very much serves its purpose, I was not thinking it was a priority to update it. However, I think it can be used as a tool for experimentation.
Let’s see how this implementation gets or not straight forward updated via the CLI. First things first. Let’s check what’s the current global version for angular CLI I have on my computer.
The first thing to do is to fork a copy of the repository and then verify the versions installed.
We do that by running
ng --versionthat will give us a lot of information, including the node version we’re running at a global level. For me, this was the output.
Looks like there is a lot to update here!
But is this something we want to override at a global level? Not so sure of that! I ran several applications, some at work, and that combo of node 10.11.0 and Angular 7.x.x., is doing its job well! Let’s do it locally instead!
First of all, I was curious about what would happen if I did effectively run the commands
ng update @angular/cli @angular/core
Of course, I was expecting something like this. I still have to investigate what the `packageGroup metadata of package angular/cli is malformed` , means.
But let’s do the regular procedure and, in the same way as I have already multiple times advised to go when having to upgrade an angular app (especially if the size is large), upgrade to a most immediate version, instead. In this case, I will go directly to version 8, because I am interested in experimenting on how straight forward this can be. Please remember I am doing this on a copy, of a versioned repository. So if it breaks, it’s not a big deal.
Can we now go from 8 to 9 with the update command? Let’s try.
Oops, the first thing to notice is that this update requires node 10.13 or 12.0 at a minimum. And remember I had 10.11.0 globally, so I will need to upgrade that first. I can do that locally with nvm
nvm install 10.13.0
Let’s now try again! But first, I had to reinstall all the packages because I was in a new version of node! When you install a new version of node locally, you need to install angular and the CLI globally for this version. Once done, you also need to run `npm install` to install all the dependencies.
Now we’re ready to finally do the upgrade. Will it work?
Yes! Now it worked and also I am getting a log of potential issues, like an incomplete provider definition, and undecorated class, or the automatic migration of Renderer to Renderer2. I am a bit afraid of all that and what will happen when I try to serve this locally. Let’s see…
The good part is it did compile without errors (after removing a module I was importing, that no longer was available.
What about now, will I be able to serve this?
Amazing. Everything is working as expected! That was definitely straight forward. I may definitely migrate the live version after all! That can give me information to share, on how well it plays with Github pages.
For now, I will write the next article, deploying this application to Netlify, and getting some metrics on performance, as a form of comparison.
Thanks for reading!
