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 --version

that 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!