Article

The top 5 new features of Angular 8

By Brice Wilson

Angular 8 has been out a few months now, and includes a handful of useful new features developers are already putting to good use. Google’s popular client-side web framework continues to evolve, and the latest major release includes features that focus on performance, stability and tooling.

Here’s a list of the top 5 new features in the framework, along with a bonus teaser at the end. There should be plenty of new features here to help you build better apps today and give you reason to be excited about the future of Angular.

1. Differential loading

Differential loading is a new feature that lets you use version 8 of the Angular CLI to create two different production bundles of your app. Attributes on the <script> tag in your index.html file let the browser request the most appropriate bundle; modern browsers will request a bundle that uses ES2015 JavaScript syntax and will be significantly smaller than the legacy bundle that uses ES5 syntax to maintain support for older browsers. Differential loading is enabled by default for new apps created with version 8 of the CLI, but you can easily enable this feature on your existing apps by upgrading to Angular 8, adding a browserlist configuration file, and setting the “target” option in your tsconfig.json file to “es2015”. The result? Your users with modern browsers get a smaller bundle that loads faster (and puts a bigger smile on their face).

2. New lazy loading syntax

Lazy loading feature modules has been a best practice in Angular for quite a while. That hasn’t changed in version 8, but in place of the proprietary syntax to enable lazy loading, the framework has adopted the more common dynamic import syntax used widely in client-side web development. The new syntax relies less on parsing class names from strings and enables editors and IDEs to check that you’re importing the correct items.

3. Create web workers with the CLI

Angular 8 makes it easier than ever to use web workers to handle CPU-intensive tasks in your apps. Version 8 of the Angular CLI includes a new schematic used with the ng generate command to create and update the necessary files in your project to add a new web worker. The new and updated files include a basic template for your new web worker so you can worry less about boilerplate syntax and more quickly focus on writing the code you want to run on a background thread.

4. Builder and workspace APIs

Although they’re probably not a feature you’ll use on every project, Angular 8 also includes new APIs that allow you to create custom build and deployment commands using hooks into the familiar ng build, ng test, and ng run commands. There are also new APIs that allow you to open and work with the workspace defined in your angular.json file, which should reduce the amount of manual manipulation required to perfectly configure your project.

5. A new guide for old features

The Angular team included a new deprecation guide with Angular 8 to make it easier for developers to keep track of deprecated features and APIs. The creation of this guide should not be misinterpreted as a warning that deprecations will be sprung on the developer community with little time for remediation. In fact, the Angular team is committed to supporting features for two major releases after officially being deprecated. The resulting stability in the framework coupled with the helpful deprecation guide should smooth the transition away from those older features.

On the horizon: Ivy and Bazel

Two of the most highly-anticipated and new features in Angular didn’t actually make it into version 8, but you can try them both out using a new opt-in preview.

Ivy is the code name given to the next-generation compilation and rendering pipeline. The goal with Ivy is to produce smaller, faster application bundles in a way that is transparent to developers using the current rendering pipeline. Bazel is an open-source build and test tool used extensively at Google. The Angular team is working to integrate Bazel into the standard Angular toolset to enable developers to perform faster incremental builds on large projects. Although they aren’t ready for production use, you can opt-in to both tools and take them for a test drive if you’re anxious to see what they offer.

Install Angular 8 today and give it a try! The present and future of the framework appear as bright as ever.

About the author

Brice Wilson has been a professional developer for over 20 years and has used many tools and programming languages during that time. His current interests are centered on web services, single-page web applications and native mobile development. He has worked as a developer and architect for a number of large companies and enjoys learning, experimenting with, and teaching new technologies. He also blogs at BriceWilson.net.