Tutorial

Angular 8: Upgrading & Summary of New Features

Published on May 29, 2019
Default avatar

By Alligator.io

Angular 8: Upgrading & Summary of New Features

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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.

If you’re trying to upgrade from a different version than Angular 7 you can use the official Angular upgrade guide for instructions on how to proceed.

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Alligator.io

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel