Angular 8: Upgrading & Summary of New Features

Angular 8 has arrived and with it a bunch of workflow and performance improvements. Like we did for the previous few releases, let’s go over what’s new with Angular 8 as well as how to go about upgrading your Angular 7 apps over to Angular 8.

Angular 8 Release Highlights

I’d say that the number of apparent new features in Angular 8 are limited, but there are still a few goodies indeed:

Differential loading

Your Angular 8 apps will now be automagically more performant, thanks to differential loading.

With differential loading, two bundles are created when building for production: a bundle for modern browsers that support ES2015+ and a bundle for older browsers that only support the ES5 version of JavaScript. The correct bundle will be loaded automatically by the browser, thanks to the support of ES6 modules in newer browsers.

This new feature results in the largest single performance improvement for Angular v8. Newer browsers will be able to load less code and load a much smaller amount of polyfills.

You don’t have to do anything special to benefit from differential loading, the ng build command with the --prod flag will take care of bundling everything so that differential loading is working out of the box:

$ ng build --prod

Dynamic imports for lazy routes

Lazy-loaded routes now use the standard dynamic import syntax instead of a custom string. This means that TypeScript and linters will be better able to complain when modules are missing or misspelled.

So a lazy-loaded import that looked like this:

{ path: '/cart', loadChildren: './cart/cart.module#CartModule' }

Will now look like this:

{ path: `/cart`, loadChildren: () => import(`./cart/cart.module`).then(m => m.CartModule) }

The change in syntax will be taken care of for you if you’re using the ng upgrade command to upgrade your app.

CLI workflow improvements

The CLI is continuing to improve, and now the ng build, ng test and ng run are equipped to be extended by 3rd-party libraries and tool. For example, AngularFire already makes use of these new capabilities with a deploy command.

What about Ivy and Bazel?

We’ll have to wait a little bit more for Ivy, the new rendering engine, and Bazel, the new build system, to be ready for official use with Angular. An opt-in preview of the two should be available shortly.

Upgrading from Angular 7 to Angular 8

As it has been the case for the previous few releases, upgrading an app from Angular 7 over to Angular 8 is a breeze. That’s especially true if you’ve already migrated over to using the new HttpClient and to RxJS 6.

In the simplest of cases, you only have one command to run to upgrade over to Angular 8:

$ ng update @angular/cli @angular/core

With that command, your lazy loaded route imports will be migrated to the new import syntax automatically.

A few things to keep in mind about the upgrade process:

• Some new syntax errors might pop out. That’s due to Angular now using TypeScript 3.4, which might surface some issues that were not highlighted before.
• You’ll want to make sure you’re using Node.js version 12 or later. You can check which version of Node you’re using by running $ node -v. And if you need to get the newest version, just head over to the official download page for Node.

Upgrading Angular Material

If your app makes use of Angular Material, you’ll want to follow with this command:

$ ng update @angular/material

This command will also take care of changing your Angular Material component imports to each specific component rather than importing from the global @angular/material.

Learning More

• Angular 8 now depends on TypeScript 3.4. Check out the release highlights to know what has changed with this new version of TypeScript.
• If your app uses Angular Material, I encourage you to have a glance at the release notes for v8.
• Stephen Fluin from the Angular team has put together a series of videos that demonstrate the new features in Angular 8.