What’s New in Angular 8 & How to Upgrade New Features

Google continues to enhance Angular which led to the creation of numerous versions in a span of five years. With its rapid growth, the latest version has become one of the most widely used frameworks with over a million developers using it.

The 8.0.0 release of Angular is here! This is a major release spanning the entire platform, such as framework, Angular Material, and the CLI with 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.

New Angular 8.0 Features

Differential Loading of Modern JavaScript

  • Legacy (ES5) and modern (ES2015+) will now be included in the Command Line Interface (CLI) as part of the build process.
  • Differential loading is a strategy allowing the CLI build two separate bundles according to deployed application.
  • Modern bundle contains modern syntax leverages built-in support in modern browsers, ships less.
  • CLI will be configured to produce these JavaScript Bundles based on whichever browser the client is using.
  • These will be differentially loaded to improve the loading speed and Time to Interactive (TTI) for modern browsers.

Angular Router Backwards Compatibility

Ivy Rendering Engine

  • Google introduced a preview version of Ivy with the objective to receive feedback from the Angular Developer community related to Ivy. It is currently in the production environment right now.
  • Ivy is the new and latest Angular Compiler as well as a tool serving as a new rendering pipeline.
  • Generates significantly small bundles and can perform incremental compilation in simple manner.
  • Ivy forms the foundation of future innovations in the Angular world.
  • Many sections in the Angular have been changed, after switching to Ivy, the existing application will just work same as earlier. But this will help reduce the size of the bundles.

Bazel Support

  • Faster build takes time (while first build is time-consuming the concurrent builds take less time).
  • Use for incremental build and deploy only what has been changed rather than change the entire app.
  • Eject the Bazel file which is normally hidden.
  • Incremental Build: Ability to build and deploy only what has changed rather than the entire App.You can eject the Bazel files, they are hidden by default.

Web Worker

  • Add web workers and delegate tedious and time-consuming processes which you want to run in the background to a web worker.
  • Run the below command to generate a new web worker using the Angular CLI
  • Web workers help run scripts in background without interfering with the user interface.
  • In order to increase efficiency, bundling support will be integrated into the CLI for web workers.
  • By moving the tasks off the main thread, it enhances the application’s speed.

Opt-In Usage Sharing

  • Upon developer’s consent, the telemetry will collect information such as commands used and build speed.
  • Opt-in metric will provide Angular team more insight on how developers are using Angular and what can be done to further improve it.

Dependency Updates

Future Plans of Angular

  • Ivy’s full roll out is expected in version 9 of Angular.

How to update to version 8

ng update @angular/cli @angular/core

Conclusion

Originally published at https://www.hiddenbrains.com on July 8, 2019.

Albert Smith is a Digital Marketing Manager with Hidden Brains, a leading enterprise web & mobile app development company specializing in IoT, Cloud & Big Data