During the opening keynote at this year’s ng-conf, the Angular team announced Angular 6.

This release ships with some genuinely interesting additions. Let’s walk through them.

Angular Elements

Angular Elements is, in my opinion, the standout feature of this release. It lets you create Angular components and reuse them outside Angular. You can wrap a component as a Custom Element and drop it into a Vue.js app, a React app, or anything else that speaks HTML.

Ivy

With every Angular release, Google tries to squeeze more speed out of the framework. This time they’ve introduced a new rendering engine called Ivy.

Ivy acts as both renderer and view engine. It takes your components and their templates and compiles them down to HTML and JavaScript. Two new concepts drive it: Locality and tree-shaking.

From a developer’s perspective, nothing changes. You keep writing components the same way. But the generated code is lighter, and the compilation process runs faster. The update is invisible to you but the benefits are real.

Those benefits include faster build cycles and smaller bundles. Ivy also makes it possible to debug templates (you can set breakpoints in them now).

Locality

Currently, Angular’s compilation runs static analysis across the entire codebase and spits out a metadata.json file with compile instructions. Scanning everything slows things down and carries extra baggage.

Locality flips that. Ivy compiles one file at a time. It looks at the component in isolation, without needing to see its dependencies.

Tree Shaking

Tree shaking isn’t Angular-specific, but Angular now uses it inside Ivy. It’s a build-time optimisation step. Imagine a project with a pile of dependencies, some of which never get called. Tree shaking strips them out, trimming the final bundle.

Remove whitespaces

Angular 6 sets the default compiler option to preserve whitespaces. You can toggle this via the preserveWhitespaces switch in tsconfig.json.

Service Worker

Angular 6 brings two service worker improvements. First, navigation: you can now redirect navigation requests using ngsw-config.json. This file specifies which files and data URLs the Angular service worker should cache, and how it should update them.

Second, a safety-worker.js file is now included, making it easy to deactivate existing service workers.

No more <template> element

The <template> element was deprecated back in Angular 4. In Angular 6, it’s gone completely.

URL serialisation

This one’s a bug fix. Characters like parentheses weren’t being properly serialised in route parameters. Angular 6 encodes them correctly, along with semicolons, the plus sign, and the ampersand in URL paths.

Form validation

Previously, ngModelChange would still show the old value if you passed a handler to it (rather than the $event keyword). Angular 6 now shows the updated value when using a handler too.

Validator for Form Builder

Before, you could only attach a single validator to a FormArray. Angular 6 lets you add multiple validators through FormBuilder.array(): FormBuilder.array([], [Validator1, Validator2, ValidatorN]);

Schematics

The Angular team has always cared about developer productivity. Schematics improve that through the Angular CLI. Think about setting up a package like Angular Material: you need to install it, add modules, grab a stylesheet, wire it all up. With Schematics, you can automate those steps. There’s a lot to learn here. Read more about Schematics.

Updated RxJS

Angular 6 now ships with RxJS 6.0.

Lazy loading

Lazy loading isn’t new in Angular 6, but lazy loading without the router is. Lazy loading ensures only the modules needed at startup get loaded, keeping everything else deferred. Before, the router gave you an API for runtime lazy loading, but the CLI didn’t have matching support. Angular 6 changes that. The angular.json config file can now specify an array of modules to load lazily.

ng add & ng update

Two new commands in the Angular CLI. ng add drops a new library into your project. ng update refreshes all @angular dependencies from package.json. Note that ng add also modifies your codebase (the same way generating a new component touches several files).

Additional changes

A handful of other bug fixes ship with Angular 6. Those fall outside the scope of this article, but you can review the full changelog (pay special attention to breaking changes): https://github.com/angular/angular/blob/master/CHANGELOG.md#600-2018-05-03