New Features: What is new in Angular 6

What is new in Angular 6, What are new Features and Improvements in Angular 6, angular 6 features, angular 6 road map, angular 6 new features


In the Differences Between Angular 4 and Angular 5, we have seen that Angular framework has got many new features in both of them, and the Angular 5 could address few of the bugs that were present in the version 4. Here, in this one, we are about to see What is new in Angular 6. As promised by Google, every year there would be the release of two upgrades to the Angular framework, it is also interesting to know What is new Features and Improvements in Angular 6.

Angular 6

With the progression of the version increase, developers of the Angular framework have been trying to make the framework to be as small and faster as possible. Hence, this would be an automatic feature that the successive versions would have. Apart from this, there are other ones listed below.
Angular 6.0 New Features

Support for Latest Typescript

The version 6 of angular now supports the Typescript 2.7. This latest version of Typescript eases the task of coding to the Angular users. Conditional type declarations, strict class initialisation, and default declarations are few of those classy features that Typescript offers in 2.7 and gladly angular are supporting it.

Ivy: For backward Compatibility

In the new angular, you would find a tool called as Ivy Renderer wherein it does give the ability to be compatible backward. The focus is on speed and reduction in size to ensure that the app is smaller and would work faster. This feature is available as an optional flag as a part of experimentation.

Faster Compilation

Are you fed up of long compilation times? Most of the times, howsoever good the code be, the process eats up time as the compilation would involve the entire code regardless of it being used in the application or not. Angular 6 reduces this kind of strain by introducing the Bazel Compiler which would rebuild only that which is necessary but not the entire application. It is very profoundly used at Google for all the software that has been built by them.

Improvised Service Worker

Html 5 has a feature called service worker. What it does is, to run a script in the background without disturbing the application flow and is used for memory caching. Angular 6 works on the bugs that came along, when service worker was introduced in Angular 5.

ng – update, ng  - add

These two commands are going to work the best that anyone would dream about. Using ng update CLI command, you could update your app dependencies based on the JSON file you have defined. Hence, you would not be in a dilemma on installing new updates as the command will check for the right version and does the task of synchronisation. The ng add takes care of proper installation of new dependencies.

Tree Component

The CDK or what is known as Component Dev Kit now comes equipped with Tree Component so that the list of files could be visualized as a tree structure.

Comfortable Switchover to Angular

Applications that previously weren't using Angular could now easily adopt the framework and use its components to convert the non SPA(Single Page Application) to SPA without taking the pain to rewrite the entire code as it used to be the case with the earlier versions.

Closure Compiler

Many times, in an application, over a set of rigorous development phases, some code render to be worth of no use anymore. The closure compilation process, the one which is popularly used by all the Google applications, creates smaller bundles of Js codes by eliminating the scrap out of the application. Thus you could expect a cleaner and effective JS modules.

What is new in Angular 6

Modifications to Router

Two important features navigation source and restored state have been incorporated into NavigationStart. The source of the trigger of this event leads to two different use cases where one is the imperative trigger while the other is location change and hence, these both would need to be handled differently.

Template component to be declared differently

You shall be using the <ng-template> that existed long ago and this is a replacement for the practice of using <template>.

Set your app size

There is a new feature called App Budget in Angular 6 package wherein you could set the threshold limit of your app bundle size. So, when you use this, it warns you about the size when app grows to somewhere near it by throwing errors or warning messages.

Relevant Reading


Anjan Kant

Outstanding journey in Microsoft Technologies (ASP.Net, C#, SQL Programming, WPF, Silverlight, WCF etc.), client side technologies AngularJS, KnockoutJS, Javascript, Ajax Calls, Json and Hybrid apps etc. I love to devote free time in writing, blogging, social networking and adventurous life

Post A Comment: