Angular 8: Unveiling Its Top Features

Google has finally released its latest Angular 8 version a few weeks ago. The latest version has bought a multitude of attractive features that have made Angular 8 unique compared to its previous versions. Also, the Angular team has gone several steps closer to the final release of Angular 9. In this blog, we will discuss the top features of Angular 8.

What’s New in Angular 8

Within the span of seven years, Google has subsequently and frequently released updated versions of the Angular framework. This indicates its devotion to providing a highly secure, advanced, and contemporary web development framework for modern requirements.

Angular is the most popular front-end development program for building mobile apps, desktop apps, and SPAs. Angular 8.0 has brought with it an impressive list of changes and improvements. Let’s explore some of the significant features of Angular 8.0

Differential Loading of Modern JavaScript

One of the significant aspects of a custom web application is that it should be compatible with all the major browsers including Chrome, Safari, Edge, Firefox, and others.

• Legacy JavaScript (ES5) and Modern JavaScript (ES2015+) as the new Command line interface.
• Differential loading is a strategy that enables the command line interface (CLI) to create two separate bundles as per the uploaded apps.
• The CLI will automatically configure the JS bundles based on the client’s browsers.
• The correct bundle will be loaded automatically by the browser & will be able to download smaller, more efficient app bundles that load and render faster.

If you use Angular update, Angular CLI will update your tsconfig.json. Angular CLI looks at the target JS level in your tsconfig.json to determine whether or not to take advantage of Differential Loading.

When the 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.

Modern JS :

Legacy JS :

Angular.io will have approximately 40kB of initial bundle size for modern browsers. Applications generally save 7–20% of their bundle size, depending on the number of modern JavaScript features.

Backward Compatibility of the Angular Router

Angular 8 has added backward compatibility mode to Angular router that makes migration easy from older versions to the latest ones. Thanks to $route APIs which permit lazy loading of Angular JS apps. Hence, it allows developers to upgrade and transfer larger projects easily.

Bazel Support

Bazel is one of the most speculated built-in tools introduced by Google with the release of Angular 8.0. However, Google is already using Bazel support internally for a long time. Recently, it has decided to present it as open source. It is available as an opt-in and is expected to be included in

@angular/cli in Version 9.

Some of the Bazel key advantages are:

• One tool for building an application for both the front end and back end.
• Developers can now build applications as incremental builds and deploy the war files.
• Faster build time, although it normally takes time for the first build but now less time will be consumed for the concurrent builds.
• Bazel offers some out-of-the-box innovative features, including the Eject the Bazel file, which is used as a hidden file by default.

Web Worker Support (PWA)

It is good news for Angular developers that the web worker and delegate support are anticipating additions in the new release. Adding web workers and delegates in an application demands a lot of time and effort when you wish to run it all as a background process.

With the Angular Service Worker and the Angular CLI built-in PWA support, Angular developers can now take benefits from the increased reliability and performance – without needing to code against low-level APIs, developers can achieve native-like applications. Similarly, it can enhance speed performance by shifting the tasks from the main thread.

Introducing Angular IVY

The Angular developers were speculating the release of Angular IVY for a long. It’s finally here. IVY render engine is an essential feature of Angular 8.0 as it uses incremental DOM and forms the foundation of future innovations in the Angular framework.

It changes how the framework internally works, without changing the Angular apps. The Ivy project basically rewrites the Angular compiler and runtime code in order to reach better build times, better build sizes with tree-shaking, and new features like lazy loading of components instead of modules.

Also, Google has introduced a preview version of IVY to receive reviews from active and passionate Angular developers in the Angular development community.

If you want to enable Ivy in your project, just instruct the Angular CLI to enable it using the –enable-ivy command:

Some of the advantages of Angular 8.0 with Ivy:

• Faster re-build time
• Improved template type checking
• Improved payload size
• Great backward compatibility
• Generated code that is easier to read and debug at runtime

Two main concepts on which IVY works:

• Tree shakable (To remove the unused code from the application)
• Memory saving using Incremental DOM

Lazy Loading

Angular 8.0 added support for dynamic imports in router configuration which enables the use of standard dynamic import syntax, instead of a custom string to find out missing or misspelled modules in our application.

Support for New Angular CLI Builders/Architect API
Angular 8.0 makes way for Builders API. It offers a functionality where you can override commands as ng build, ng test and ng lint. Basically, the builders are functions that implement the logic and behavior for a task.

Below is the snippet from .angular-cli.json in the Angular 8 project. You can notice how all commands now have an option called builder from Angular and how you can easily override by providing your own builder.

You can write our own builder using the below-mentioned APIs.

• BuilderContext
• BuilderOutput
• createBuilder

Angular Firebase

The Angular developers can now upgrade to Angular CLI by using Angular Firebase. The Angular Firebase helps in deploying web and mobile applications in several ways. The Firebase also offers to deploy commands to deploy the applications.

The Angular CLI is continuously improving, and now the ng-build, ng-test, and ng-run are equipped to be extended by third-party libraries.

Add support for TypeScript 3.4

In this newest version of Angular, the Angular team has updated Angular’s dependencies which include tools like RxJS and TypeScript to v3.4. Now all the new apps generated via the Angular CLI will use the same newest version of TypeScript by default. Further, 3.4 will provide the following features:

• Faster subsequent builds with the –incremental flag
• Higher-order type inference from generic functions
• Improvements for ReadonlyArray and read-only tuples
• Type-checking for global this

Conclusively

The Angular framework is widely used for creating different types of web and cross-platform mobile applications. The latest Angular 8.0 version is going to ease the life of Angular developers a lot by introducing advanced features described in the post.