Upgrading from 7.0.4 to Angular 9 a true use case
Tags: angular9, angularupdate, angular, ivy
Published: 2020-05-30 11:21:19

---
title: Upgrading from 7.0.4 to Angular 9 a true use case
published: true
date: 2020-02-14 21:53:21 UTC
tags: angular-9,angular-update,angular,ivy
canonical_url: https://medium.com/@nataliafrontend/upgrading-from-7-0-4-to-angular-9-a-true-use-case-207d07c0922a
---

I happen to be an organizer for [Women Techmakers Barcelona](https://twitter.com/wtmbcn) 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.

![](https://cdn-images-1.medium.com/max/1024/1*8qW6MY7EQRSW0geTxH35Dw.png)<figcaption>Checking your current version of Angular CLI, globally</figcaption>

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

![](https://cdn-images-1.medium.com/max/1024/1*KAGUJTYdc_nPZIdQjY7zlA.png)<figcaption>Results of executing update without a version target</figcaption>

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.

![](https://cdn-images-1.medium.com/max/1024/1*e7aUpPxcqreMFN7VSMxc_A.png)<figcaption>Result of updating to the next major version, in this case, 8.x.x</figcaption>

Can we now go from 8 to 9 with the update command? Let’s try.

![](https://cdn-images-1.medium.com/max/1024/1*qwfD6GlnOxAN18SNOGLCxQ.png)<figcaption>Angular update mechanism to version 9, needs node v10.13 o v12.0</figcaption>

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

![](https://cdn-images-1.medium.com/max/1024/1*-6Eb2eHlYx9B9Qk7ck98VQ.png)

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?

![](https://cdn-images-1.medium.com/max/1024/1*1wsI39ZfkipLw8xqUeRmqg.png)<figcaption>Angular 7.0.3 updated to Angular 8, to Angular 9</figcaption>

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.

![](https://cdn-images-1.medium.com/max/1024/1*np41rF-TuPEqDoznRdYEvQ.png)<figcaption>Compilation and build successful!</figcaption>

What about now, will I be able to serve this?

![](https://cdn-images-1.medium.com/max/1024/1*D4iv7wff2AZr8uJSQ-Q9OA.png)<figcaption>Just WOW! It works!</figcaption>

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](https://medium.com/@nataliafrontend/deploying-an-angular-9-site-to-netlify-with-netlify-cli-8206b8c1dad), and getting some metrics on performance, as a form of comparison.

Thanks for reading!