This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Update an Angular App to the Latest Version using Automatic Code Migrations

    Juri StrumpflohnerJuri Strumpflohner

    One of the goals of the Angular team is to keep everyone aligned with the latest version. To allow doing so, they started to establish 6 months major release cycles, LTS support and much more. But one of the biggest innovations is for sure to introduce Angular Schematics for automatic code migrations. In this lesson we'll take a simple Angular 5 application. The goal is to learn about the different steps that have to be applied. We will use a very simple demo application in order to easily be able to walk though the migration process. The same approach can be applied however to real world applications, with the difference that in larger apps some steps may obviously require a bit more effort.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:01 This Angular application has been developed here with version 5 at that time. You can see we also use here an older version of the Angular CLI, as well as RxJS 5, which is currently already at version 6.

    00:14 The application generally is actually not that difficult for the purpose of showing you how the update process works. The application in general also has a simple service only.

    00:23 That is, the people service it uses here an observable. You can see that we use the older API of RxJS, where we directly access those static methods. Here, we import the observable at the very top, and then we statically add those mappings like OAuth and map operator on top of that observable, which we then make use down here.

    00:46 If you have already given a look at newer versions of RxJS, the pipe operators are the recommended use case. This is because those global static methods which we add are global, and therefore we cannot apply tree shaking on top of our bundle, which has a negative impact on the bundle size.

    01:06 Let's take a look how we can upgrade this project to the latest version. In order to do so, I'm using here that update Angular IO guide, which is a guide from the Angular team, which allows you to select your starting version.

    01:18 In this case, let's use here the 5.0We want to go to version 6.

    01:25 Then you can click the button below, and it will give you some updates of what you have to do. What we are interested in here is especially the upgrade after Angular CLI and Angular Core packages.

    01:36 The first step here if you go the package/json is to upgrade our Angular CLI. Here we have the version 1.6.3 and we definitely want to update that first to the latest version. What I do is npm install @angular/cli@latest. Once we have installed that, you can see now the version number has been adjusted to the version 6.08.

    02:00 Starting with version 1.7, the Angular CLI start to introduce such update scripts. Behind the scenes, they were created with Angular schematics, and transform your code in that you can directly update to a new version.

    02:13 Let's apply this update script here off the CLI directly. We simply copy it in here on our command line. As you can see now, the code base is being transformed. You can see here the Angular update script deleted the angular-cli.json file, created a new one, and also updates here the tsconfig, the package.json, and also the common configuration files for us.

    02:35 Once the update process finished here, let's quickly take a look at our Git history. You can see here the angular-cli.json file has been deleted. The reason is that the new Angular CLI -- starting from version 6 -- uses a new format, which is now in the angular.json file. Also, the format internally has changed quite a lot.

    02:55 This allows the Angular CLI to be more flexible, and in future also allow external builders to hook into the process seamlessly. You can also see that the common files have changed, and some couple of other files.

    03:05 The next step now is to actually upgrade Angular itself. Right now, we have just adapted our struct to the new Angular CLI, version 6.08 in this case.

    03:14 Now we also want to update all of the Angular packages. Again, we can use here the Angular update script, but now we don't update Angular CLI, but we update here Angular Core.

    03:25 Let's copy those over and again execute that migration script. Once that update finishes, you can see how see how the package.json has been updated correctly.

    03:38 A last step which we want to do is to basically update here RxJS. RxJS is a very fundamental part of our Angular application. They have provided some migration scripts as well.

    03:49 If you take a look here further down, you can see here that we can install that rxjs-tslint as the global package, and then we will get such a binary, which we can bind to our tsconfig file, which will then basically convert our Angular application to the latest version. I have already installed this one, so let's simply copy over the migration binary script.

    04:11 Also, note that right now, our application already works. Because RxJS has installed such an RX compatibility package. You can see that we use the newest version of RxJS, as well as the compatibility package, which allows us to use the old API even though it has been deprecated in the latest version.

    04:28 In the long run, however, you definitely want to run that migration script from RxJS. We can execute this one and point it to our tsconfig-json, and then the automatic migration script from RxJS will start and convert our codebase.

    04:46 You can see here we get a small report. It detected some kind of errors in our file and it fixed those. It gives us also some warning. Let's go into our people.json file and take a look how that changed.

    04:59 As you can see, first of all, we here get directly those single operators imported. You can see here the of operator is being imported as an observable of, from the RxJS package. Also, further down here, we don't use those static methods of server.of anymore, but rather we directly reference this single function. Also, the pipe operator has been introduced.

    05:22 Our codebase has been converted successfully into the new format. We can now start our application and see whether it still runs. Let's refresh here our screen to see if the application still runs and outputs the format we expected.

    05:38 Obviously, that migration might differ quite a lot depending on complexity of your application. Note however that if you go to that update Angular IO page, you can also set here the complexity level of your application. Based on that, you will get a more detailed migration scenario, like a lot more detailed API changes which you have to adapt.

    Discuss

    Discuss