Version 8 of Angular — Smaller bundles, CLI APIs, and alignment with the ecosyst...

The 8.0.0 release of Angular is here! This is a major release spanning the entire platform, including the framework, Angular Material, and the CLI with synchronized major versions. This release improves application startup time on modern browsers, provides new APIs for tapping into the CLI, and aligns Angular to the ecosystem and more web standards.

Photo by Angular TPM, Manu Murthy

How to update to version 8

Visitupdate.angular.io for detailed information and guidance. For most developers, one command should take care of this update:

ng update @angular/cli @angular/core

Differential Loading by Default

Differential loading is a process by which the browser chooses between modern or legacy JavaScript based on its own capabilities. We now take advantage of this by default by performing a modern build (es2015) and a legacy build (es5) of your application. When users load your application, they’ll automatically get the bundle they need.

If you use ng update, we update your tsconfig.json for you to take advantage of this. Our CLI looks at the target JS level in your tsconfig.json to determine whether or not to take advantage of Differential Loading.

When target is set to es2015 , we generate and label two bundles.

At runtime, the browser uses attributes on the script tag to load the right bundle.

<script type="module" src="…"> // Modern JS

<script nomodule src="…"> // Legacy JS

Onangular.io we saved over 40kB of initial bundle size for modern browsers. From the community we’ve heard that applications generally save 7–20% of their bundle size, depending on the amount of modern JavaScript features they take advantage of.

The bundle size on angular.io shrunk by about 41Kb

Learn more aboutdifferential loading.

Route Configurations use Dynamic Imports

We highly recommend you lazily load parts of your application using the router. This is accomplished by using the loadChildren key in your route configuration.

Previously this looked like:

{path: '/admin', loadChildren: './admin/admin.module#AdminModule'}

This syntax was custom to Angular and built into our toolchain. With version 8 we’re migrating to the industry standard dynamic imports .

Now this will look like:

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

This will improve the support from editors like VSCode and WebStorm who will now be able to understand and validate these imports for you.

If you use ng update , we’ll update your code automatically to use the new best practice.

Builder APIs in the CLI

In the same way that Schematics allow you to tap into ng new ng generate ng add and ng update , we’ve released new Builder APIs that allow you to tap into ng build ng test and ng run to perform processes like build and deployment.

Check out our blog post on these new APIs .

Or read the API documentation .

We’ve also been working with cloud providers to begin taking advantage of these APIs. Today you can try the latest version of AngularFire , which adds a deploy command, making build & deploy to Firebase easier than ever:

ng add @angular/fire
ng run my-app:deploy

Once installed, this deployment command will both build and deploy your application in the way recommended by AngularFire.

Workspace APIs in the CLI

Previously developers usingSchematics had to manually open and modify their angular.json to make changes to the workspace configuration. With 8.0, we’re introducing a new API to make it easier to read and modify this file.

Read more about the available Workspace APIs .

Web Worker Support

Web workers are a great way to speed up your application if you do any sort of cpu-intensive processing. Web workers allow you to offload work to a background thread, such as image or video manipulation. We use web workers onangular.io for in-app search indexing.

You can now generate new web workers from the CLI. To add a worker to your project, you can run:

ng generate webWorker my-worker

Once you have a web worker, you can use it normally in your application, and the CLI will be able to bundle and code split it correctly:

const worker = new Worker(`./my-worker.worker`, { type: `module` });

Read more about web workers in the Angular CLI .

AngularJS Migration Improvements

If you use the $location service in an AngularJS application, Angular now provides a LocationUpgradeModule that enables a unified location service that shifts responsibilities from the AngularJS $location service to the Angular Location Service. This should improve the lives of applications using ngUpgrade who need routing in both the AngularJS and Angular part of their application.

Read more about the Unified Angular Location Service .

We’ve also documented best practices around lazy loading parts of your AngularJS application from Angular, making it easier to migrate the most commonly used features first, and only loading AngularJS for a subset of your application.

Read more about Lazy Loading AngularJS .

New Deprecation Guide

We are committed to maintaining Semantic Versioning and a high degree of stability even across major versions. For our public API, we are committed to supporting features for N+2 releases. This means that a feature that is deprecated in 8.1 will keep working in the following two major releases (9 and 10). For example, we are deprecating platform-webworker in version 8.

We are making it easier to find deprecations and removals in Angular. For a comprehensive list of all deprecations, see the newDeprecation Guide.

Ivy & Bazel

We know there’s lots of excitement for our forthcoming opt-in previews. We’ll be providing individual updates on these next week on this blog, so stay tuned!

Contributors and Collaborators

A special thanks to Manfred Steyer for contributing to Differential Loading, Craig Spence to Dynamic Import support, Jason Miller to Web Worker bundling support. This release was brought to you by 286 contributors: