What's new in Angular 8

Angular 8 was released on May 28, 2019. Angular 8 provides features like Differential loading, Dynamic imports for lazy routes, Web workers, TypeScript 3.4 support and Angular Ivy & Bazel as an opt-in preview features.

Differential loading
With differential loading, the Angular production build will produce 2 separate bundle files. One ES5 bundle for legacy browsers. Another ES6 bundle for the latest browsers which support ES6 features. This helps in improving the loading speed and performance in modern browsers since this bundle file is smaller in size.

Attributes on the <script> tag in your index.html file let the browser request the most appropriate bundle; modern browsers will request a bundle that uses ES2015 JavaScript syntax and will be significantly smaller than the legacy bundle that uses ES5 syntax to maintain support for older browsers.

Differential loading is enabled by default for new apps created with version 8 of the CLI. If disabled we can enable it by adding a browserlist configuration file and setting the “target” option in your tsconfig.json file to “es2015”

Web Worker

JavaScript by default executes in a single thread model if the primary thread is helping up performing a CPU intensive task than the other requests should wait in the queue till the primary thread is released. Web Workers help in improving this, web workers help execute long-running tasks in a separate thread so that the main thread can handle users' requests in the browser. Communication between the Angular component and the web worker will be done by sending message communication.

Angular CLI includes a new schematic used with the ng generate command to create and update the necessary files in your project to add a new web worker.

ng generate web-worker <location>

Lazy Loading Route Import Syntax
The syntax for Lazy loading feature module has changed in Angular 8, now we can directly import the module using an arrow function syntax.

Old Syntax

loadChildren: './feature/feature.module#LazyModule'

Angular 8 Syntax

loadChildren: () => import('./feature/home.feature').then(m => m.HomeModule)

Builder and workspace APIs

Angular CLI provides a number of commands like ng build, ng serve, etc for the process like linting, building, or testing. The commands use an internal tool called Architect to run CLI builders, which apply another tool to accomplish the desired task. With Angular version 8, the CLI Builder API is stable and available to developers who want to customize the Angular CLI by adding or modifying commands.

The Architect API has tools to schedule and coordinate tasks used by the CLI for its command implementations. It uses functions called Builders as the implementation of a task and the workspace’s angular.json to resolve projects and targets to their builder implementation. Builders are functions that implement the logic and behavior for a task that can replace a command, for example running the linter.

Angular provides some builders that are used by the CLI for commands such as ng build, ng test, and ng lint. Default target configurations for these and other built-in CLI builders can be found (and customized) in the "architect" section of the workspace configuration file, angular.json. You can also extend and customize Angular by creating your own builders, which you can run using the ng run CLI command.

Bazel
Bazel is a build and test tool. Bazel is not production-ready, it is an opt-in preview for Angular 8. Bazel performs incremental builds, which means that it will only build what has changed since the last build. Bazel does this by building a task graph based on the inputs and outputs set throughout the application and evaluating which ones need a rebuild. Therefore, the first build will take some time, but the subsequent builds should take much less time. This enables the application to scale without affecting the build times too much.

To user Bazel in Angular applications, we first need to install Bazel globally.

npm i -g @angular/bazel

and then you can use Angular CLI to generate a new application already configured for Bazel:

ng new myProject --defaults --collection=@angular/bazel

Ivy
Ivy is the next-generation compilation and rendering pipeline. The goal with Ivy is to produce smaller, faster application bundles in a way that is transparent to developers using the current rendering pipeline.  In Angular 8 a preview version of Ivy is introduced, it is not production-ready it is an opt-in preview for Angular 8

IVY provides 2 main features which help reduce bundle size and faster builds.

Tree shakable: To remove the unused code so that the application can pay attention to only the code it’s using. Hence, it results in faster run time and a smaller bundle.

Local: To recompile only the components that are changing which would result in a faster compilation.

To enable Ivy in Angular8 application we need to use the --enable-ivy switch as follows

ng new myProject --enable-ivy 

This will add the following configuration to the tsconfig.json file

"angularCompilerOptions": {  

                "enableIvy": true 

}

The above configuration can also be manually added. If we want to use Ivy for our application in debug mode with AOT compilation mode, then use the --aot switch as follows.

ng serve --aot