A brief review of all the exciting updates coming with the new Angular 6 release, including Angular Elements, Service Worker improvements and more.

The Angular 6 release is PRETTY DANG EXCITING. Brad Green, Miško Hevery and Kara Erickson got into all the juicy details of this upcoming release at the opening keynote for ng-conf 2018. There’s a lot to cover in the latest release of Angular. In this article, we’ll cover the most exciting features like Angular Elements and the new CLI commands.

Angular Elements 😎

Angular 6 will be the first release that fully supports Angular Elements! Angular Elements was the brain child of Angular’s beloved Rob Wormald and it is one of the most anticipated features of this release.

Angular Elements will give us the ability to use our Angular components in other environments (like a simple jQuery app or VueJS app). It will take an Angular component and wrap it inside a Custom Element (aka DOM element), allowing us to use our sweet sweet Angular components in other projects that don’t have the full Angular ecosystem!

Being able to create and publish a web component in Angular and use it on any HTML page is going to be revolutionary. Imagine being able to package up that favorite Angular date-picker you love and slapping into mom’s React app. With Angular Elements, you can!

To learn more, you can watch Rob’s talk about Angular Elements at ng-conf!

New Rendering Engine: Ivy 😮

Ivy is the next generation of the Angular renderer. Developers shouldn’t notice this change other than their applications being faster and smaller.

This will be the third rendering engine Angular has seen. The second was between version 2 and 4, called the View Engine. After they replaced it the first time, they saw increases in speed and decreases in application size, while having almost no reports of incompatibilities. They are hoping to see the same kind of results this time as well.

Kara Erickson spoke at ng-conf in detail about the new engine. She is on the team and has written more code for the rendering engine than anyone else. Her talk was really interesting and we suggest you check it out, but we will break down the highlights of the new engine for you here, in case you prefer reading over watching. ;)

Update: While we can get excited about it today, Ivy will be released after V6.

Looks good! But slight correction... Ivy will be coming in a later release. Not v6. — Brad Green (@bradlygreen) May 2, 2018

Locality

When the compiler is translating your template into JavaScript, it is only allowed to use info directly available on the component and its decorator (it cannot look at the dependencies). This is in contrast to the current compiler which actually requires global analysis to run. In other words, locality just means that you are only able to look at individual files/components at a time when generating the output.

This is a simple philosophy with huge impacts. For one thing, it allows you to ship AOT precompiled code into npm. Which means that developers don’t have to worry about compiling a particular library into AOT, because it already comes compiled!

This also means that metadata.json is no longer needed, which makes it easier for tools to process your codebase and more tools become compatible with npm packages. It simplifies both the creation and the consumption of packages! And of course, all of this means your compilation will have faster recompile time, a change in one component is less likely to trigger recompilation for the whole app. Pretty nifty!

Tree Shaking

Tree shaking is a build optimization step that tries to ensure unused code doesn’t get used in you final bundle. The Ivy renderer is taking tree shaking to a whole new level. Kara explains it beautifully in her talk, so be sure to check it out!

Instead of rendering template data and passing that in directly into an interpreter that has to know how to do everything, the new renderer is going to generate template instructions directly. This means much smaller bundles and a faster startup time. A side benefit that Kara explained was that these generated instructions are much more human readable and easier to understand and debug. The Ivy renderer is going to be so cool, allowing for things like break points in your template, aka “stack trace heaven.”

This most exciting command will automatically update your @angular dependencies in your package.json file:

ng update

It will try and catch bugs wherever it can to update your code for you and take advantage of new APIs.

The Angular team is hoping this is the start of very low code maintenance while still staying up-to-date with all the things such as:

updating npm dependencies

updating your code (where it can find breaking changes)

updating your RxJS and Angular Material code when deprecations occur

If you are a library vendor, you can create a schematic that will utilize ng update to update your library for people using it!

ng add @angular/pwa ng add @angular/elements ng add @angular/material ng add @nativescript/schematics

ng add is going to be so amazing! It is a way to seamlessly and easily add new capabilities to your application. Behind the scenes it adds a bit of code here and there, and changes your project a smidge where needed to add in the thing you just told it to add. For example, there will be schematics allowing you to add things like Angular Material, Angular Elements, Progressive Web Apps, and Service workers to your existing Angular application!

NativeScript is also creating a schematic so you will be able to ng add NativeScript from the get-go to your Angular 6 application! The Angular team has been working hand-in-hand with the NativeScript team and they will provide additional schematics to extend Angular CLI, build Native Mobile applications with NativeScript, and also extend existing web applications by adding the mobile environment.

Ability to Unregister that Service Worker! 🤓

In my Service Worker talk, I mention how you should be very sure before you build your project and deploy for the first time with a Service Worker. As incredibly amazing as Service Workers are (for things like push notifications and network intercepting and caching), I’ve heard they can be difficult to remove.

In the Angular CLI 1.7 however, the @angular/service-worker will include a safety-worker.js file that will allow you to deactivate the Service Worker at anytime! Yippee skippy! In order to do so, you simply need to serve the content of the safety-worker.js file at the URL of the Service Worker you’d like to unregister.

Besides all of the incredible features we’ve listed above, Angular 6 will support TypeScript 2.7 with things like conditional type declarations, default declarations and strict class initialization. There will also be RXJS 6 support, which will reduce bundle sizes! We here at Progress are SUPA’ pumped about its release and anticipate amazing things to come in the future! 🎉🔥👩🏼‍💻💁💥

To keep track of everything Angular from the basics to the cutting-edge, visit this comprehensive collection of resources. There you will find information not only about the latest Angular news but also about Kendo UI - which, by the way, already includes support for Angular 6! If you’re currently using Kendo UI in an earlier version there are some changes that you should be aware of. We put together this resource to help with an upgrade to Angular 6.