What to look for in Angular 8

Angular has never failed in surprising developer world. As expected, Angular 8 has come out (late May 2019) with some major upgrades that deserve some applause. Let’s together walk through some significant features of Angular 8.

Angular Ivy

Angular Ivy is the reason of waiting of many developers. Even though Ivy in Angular 8 is still experimental version and only engaged in Angular 8 as an opt-in preview, something is still better than nothing. Trying out the preview will let you know how well your current Angular application work or don’t work with Ivy.

As user experience of the apps is first priority of many developers, Ivy promises to effectively assist in this matter thanks to a number of new features:

  • Faster complication since the code generated by the Angular compiler is much more simplified now for humans to be able to read and understand.
  • Faster rebuild times.
  • Minimize payload size so it is easier now for browsers to download and parse applications.
  • Without having to modify apps, developers can still get all Ivy’s benefits as Angular Ivy aims to be compatible with existing Angular applications.
  • With Angular Ivy, it is also possible now for developers to debug templates. As template type checking is optimized with Ivy, developers are able to catch more errors at build time so that users can avoid encountering errors at run-time.

Builders API

Angular 8 offers the chance to use Builders API. Angular uses builders for main operations: serve, build, test, lint and e2e.

Fundamentally, builders are functions that implement the logic and behavior for a task that can replace a command which you pass to the createBuilder() method from @angular-devkit/architect package. In this new version, developers can create their own custom builders. It is also possible to see used builders in the angular. json file.

Bazel Support

The Angular framework itself is built with Bazel. Bazel is another open sourced tool created by Google. The tech world irresistibly loves open source.

Bazel allows users to build CLI application, in particular, building both backbends and frontends with the same tool. Despite the fact that Bazel in Angular 8 is still in “opt-in-preview” mode and expected to be ready in Angular 9, it still promises plenty of advantages.

Bazel offers faster build time. Even though first build will be relatively slow, concurrent builds will be significantly faster. Before Bazel, it took up to 60 minutes for CI to get completed but with new version of Bazel support, the whole process finishes within 7.5 minutes.

Besides, build will be incremental. Developers will be able to build and deploy only changes and updates instead of the entire application.

Developers will also have access to remote builds (with cache) on a build farm. Developers can also eject the Bazel files, they are hidden by default.

To add Bazel support, simply use the below command:

Command to add bazel support

Or, you can create a new app with Bazel as well:

Command to create new app with Bazel

Support for Typescript

Angular now uses TypeScript 3.4 (v7 uses 3.2.x). All new applications generated via the Angular CLI will also use the newest version of TypeScript by default.

Angular 8 also includes updates to the latest and greatest versions of Angular’s dependencies, which include tools like RxJS and TypeScript.

Support for $location

Support for $location service has now been added when you upgrade. In particular, a new package angular/ common/ upgrade is added for enhancement and better integration.

The package’s purpose is to help developers with:

  • Retrieving the state from location service.
  • Being able to track all location changes.
  • Being able to read hostname protocol port search properties which were available in AngularJS.
  • MockPlatformLocation API added to test the location service.

Support for web workers

Web Workers are crucial in front-end development world. Web workers allow developers to farm out CPU intensive work to a separate hardware thread, freeing the main thread to update the user interface.

Web Workers are specifically helpful in addressing unresponsiveness of applications while processing data.

In Angular 8, you can totally assign the time-consuming process which you want to run in the background to a web worker.

To generate a new web worker using the Angular CLI, run the below command:

Command to generate new web worker


Angular Firebase

Here is the exciting news: Now you can deploy your application using the Angular CLI. run the below command to deploy the application using the CLI:

command to deploy with Angular Firebase


Lazy Loading

Everybody knows that Lazy Loading is one of the most useful concepts of Angular Routing. It helps cut down the size of large files by lazy loading the files that are required instead of all at once on page load.

On initial load of web page, the bundle size is significantly decreased. This helps to improve user experience a lot!

The setup for a lazy loaded route is simple. Angular CLI has a command for that:

Angular command for lazy loading


Different Loading

The Angular team refers to this as “Differential Loading of Modern JavaScript”. Basically, different loading means new apps generated by Angular CLI now include separate bundles for legacy JavaScript (ES5) and modern JavaScript (ES2015+). This improves performance of Angular 8 apps. Modern browsers with ES2015 support will be able to download smaller, more efficient app bundles that load and render faster than before.

SVG as a template

It is possible to use SVG as a template while in the past, we could only choose between inline HTML and external HTML as template.

At BHSoft we always keep track of our Angular version. Below is the graph showing the speed of updating Angular version at BHSoft. Regular update helps to boost performance as well offers the chance to test all magnificent features that are only available on the newest Angular version. At BHSoft, we always want the best for our customers, therefore, regular update is a must to keep us stay on track and maintain our productivity. Have a look at the graph below to see our update history of Angular version.

BHSoft Angular Version update history


Related post: