Angular 8.0 releases with major updates to framework, Angular Material, and the CLI

4 min read

Angular 8.0 was released yesterday as a major version of the popular framework for building web, mobile, and desktop applications. This release spans across the framework, Angular Material, and the CLI. Angular 8.0 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.

The team behind Angular has released a new Deprecation Guide. Public APIs will now support 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). The team will continue to maintain Semantic Versioning and a high degree of stability even across major versions.

Angular 8.0 comes with Differential Loading by Default

Differential loading is a process by which the browser chooses between modern or legacy JavaScript based on its own capabilities. The CLI looks at the target JS level in a user’s tsconfig.json form ng-update to determine whether or not to take advantage of Differential Loading. When target is set to es2015, CLI generates and label two bundles. At runtime, the browser uses attributes on the script tag to load the right bundle.

<script type=”module” src=”…”> for Modern JS

<script nomodule src=”…”> for Legacy JS

Angular’s Route Configurations now use Dynamic Imports

Previously, lazily loading parts of an application using the router was accomplished by using the loadChildren key in the route configuration. The previous syntax was custom to Angular and built into its toolchain. With version 8, it is migrated to the industry standard dynamic imports.

{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.

Angular 8.0 CLI updates

Workspace APIs in the CLI

Previously developers using Schematics had to manually open and modify their angular.json to make changes to the workspace configuration. Angular 8.0 has a new Workspace API to make it easier to read and modify this file. The workspaces API provides an abstraction of the underlying storage format of the workspace and provides support for both reading and writing. Currently, the only supported format is the JSON-based format used by the Angular CLI.

New Builder APIs to run build and deployment processes

Angular 8.0 has new builder APIs in the CLI that allows developers to tap into ng build, ng test, and ng run to perform processes like build and deployment. There is also an update to AngularFire, which adds a deploy command, making build and deployment to Firebase easier than ever.

ng add @angular/fire

ng run my-app:deploy

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

Support for Web Worker

Web workers speed up an application for cpu-intensive processing. Web workers allow developers to offload work to a background thread, such as image or video manipulation. With Angular 8.0, developers can now generate new web workers from the CLI. To add a worker to a project, run:

ng generate webWorker my-worker

Once added, web worker can be used normally in an application, and the CLI will be able to bundle and code split it correctly.

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

AngularJS Improvements

Unified Angular location service

In AngularJS, the $location service handles all routing configuration and navigation, encoding, and decoding of URLS, redirects, and interactions with browser APIs. Angular uses its own underlying Location service for all of these tasks. Angular 8.0 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.

Improvements to lazy load Angular JS

As of Angular version 8, lazy loading code can be accomplished simply by using the dynamic import syntax import(‘…’). The team behind Angular have 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.

These are a select few updates. More information on the Angular Blog.