The Angular team has scheduled the release of version 8.0 of the JavaScript framework. Above all, it brings optimizations under the hood, which should accelerate the launch of applications. Thanks to differential loading, browsers download the build for the appropriate JavaScript edition. The combination of rendering pipeline and compiler Ivy can optionally be used in a preview version.

JavaScript à la carte

The recently activated differential loading describes a process in which the browser is assigned the code in the appropriate JavaScript variant. Previously, Angular relied on ECMAScript 5 for compatibility. The subsequent ES2015 (ES6) not only made JavaScript more efficient, but allowed smaller bundles as well.

Therefore, Angular now creates two different builds: one for older browsers, one for ES5 compatible and one for ES2015. The browser gets the right bundle based on the script tag:

<script type = "module" src = "..."> // Modern Variant 

<script nomodule src = "..."> // Legacy Variant

The decisive factor for creating the two variants is the target JavaScript version in the compiler options of the “tsconfig.json” file.

"compilerOptions": { 
  ... 
  "target": "es2015", 
  ... 
}

Ivy sprouts up slowly

Regarding the long planned integration of Ivy, the official announcement of Angular 8 is still behind and refers to upcoming blog posts. The combination of renderer and compiler in the “tsconfig.app.json” can be activated as follows:

"angularCompilerOptions": {"enableIvy": true}

Ivy brings several benefits, including smaller bundles and incremental compilation, but it requires some major changes to the Angular base. Existing applications will continue to function unrestrictedly on Ivy, which is probably the main reason for the integration of the preview version. The Angular team wants to collect feedback from developers on how well custom applications are working with Ivy. For new projects, however, it still recommends the classic View Engine.

Managed slave jobs

Although the Web Worker topic is only indirectly related to Angular, it is making progress with the current release. Basically, they ensure that JavaScript applications offload part of the calculation into separate threads because JavaScript is not inherently multithreaded. The command line of Angular (the Angular CLI) now provides a command to create new Web Workers :

ng generate webWorker my-worker

It also manages the allocation of bundles to the Web Worker. The prerequisite for this is that the Angular project has the right configuration.

Custom syntax for dynamic imports

Other noteworthy innovations include an adaptation to the lazy loading, which remains unchanged from the work, but gets a new syntax, which is based on the standard approach for dynamic imports . So will from the previous

{path: '/ admin', loadChildren: './admin/admin.module#AdminModule'}

with Angular 8 following notation:

{path: `/ admin`, 
loadChildren: () => 
import (`. / admin / admin.module`) .then (m => m.AdminModule)}

As a nice side effect, development environments or source code editors like Visual Studio Code and WebStorm recognize and validate the new syntax of the importstatements.

Other enhancements, such as the builder APIs in the Angular command window, can be found in the Angular blog.