Angular 6 Release : Top Upgrades and Features

If you have been an avid user of Angular 5, it’s time to come out of your comfort zone as the next version of the framework has been released -
Angular 6.

Angular has already gone through a power packed year in 2017 with 2 major releases in 9 months with the arrival of Angular 4 in March and Angular 5 in November 2017.

While we saw Angular 5 being centered around being faster, smaller, and easier to use, Angular 6 aims to tread on the same path.

Angular 6 Updates

1. Angular Elements

It is a huge task to create widgets that can be directly added to any existing web pages.

But this will become easier with Angular 6 since you can now easily create an Angular component and publish it as a Web Component which can be directly used in any HTML page.



Angular Elements make it possible now. 

Code Snippet-1

For example, if you have developed Single-Page Application by using JavaScript and jQuery, you will now be able to use Angular-created Web Components in the pages of this app.

This also makes it easier migrate to Angular framework for web application development.

2. Ivy Renderer

This is new backward compatible Angular Renderer which offers a host of benefits like:

● Better speed improvements
● Size reduction of code via gzipped
● Faster compilation of code
● Size reduction of app
● Increased flexibility
● Simpler process of Debugging

IVY Renderer

3. Closure Compiler

Almost all Google Web Applications can be created via the Closure Compiler which is a bundling optimizer that can create Javascript modules.

As compared to other bundlers such as Webpack and Rollup, this compiler can consistently generate smaller bundles.

Angular Vs React Vs Vue Guide

It is also better at dead code elimination.

4. Bazel Compiler

Bazel is a widely used compiler at Google that powers their 500+ apps built in Angular.

More advanced local and distributed caching along with optimized dependency analysis and parallel execution can be expected in this upgrade.

This will make it easier to launch incremental builds by making change only to the code that involves the changed features.

5. Component Dev Kit (CDK)

Further improvements and additions to the CDK can be expected in the Angular 6 release.

CDK is used by the Angular Material Library, which involves more than 30 UI components.

CDK also allows you to build your very own library!

Introduced in December 2017 and being an important component of the framework now, the Angular team is expected to introduce valuable additions such as the Tree Component to help visualize tree structures like a list of files.

CDK Packages                                                                                                                                              CDK Packages in Angular

6. Router

There is no way to know in Angular if navigation has been triggered by Location change or due to an urgent calling.

There should be a capability to handle these two cases separately.

For example, this is useful in cases like scroll position restoration.

The new release plans to add a navigation source field along with a restored navigation ID that will go a long way to help in this domain.

7. Schematics and Ng Update

If you plan to create to your Angular template and want to explore the same with Angular CLI, this is where Schematics will come to your rescue.

Schematics will enable you to create your very own code transformations, just like an Ng update.

An Ng update can be used to automatically update the project dependencies and make automated version fixes to the framework.

code snippet 2-1

8. Service Worker

Important bug fixes and crucial additional features in the Service Worker are expected in the latest Angular 6 update.

The Service Worker is a script that runs in the web browser.

It is useful to manage cache for a web application that improves the load-time for regular users and make the functioning of the app faster.

How to Download the Angular 6 Beta Version

You can download the Beta version of Angular 6 directly by visiting Github.

It can also be downloaded by running a terminal command. Follow these steps for the same:

Launch the terminal

Type the command npm install -g @angular/cli@next

Create a new project via ng new

Alternatively, you can also use the command ng update –next to update a project.

Additional List of Features

To conclude, here is a complete list of features included in the First Release Candidate neatly compiled by Jaxenter:


What are your expectations form the Angular 6 and how impressed are you with this release? We'd love to hear from you -