New Features Introduced in Angular 6

As we all of us know that Google has just released its new version of Angular i.e. 6.0 in the mid of April 2018. It was the first major release from Google in the year 2018 which is mainly focused on the toolchain and also making angular easier for the user to create different types of applications. Except this major version also contains some new features and upgradation in respect to the previous versions.

At the final stage, this release confirms that the new Angular version is much lighter, faster and easier. Developers will obviously prefer it more as it makes their development easier. Also, Angular 6 supports the typescript version 2.7. So with the help of new typescript version, it is much easier to code with conditional type declarations, default declarations and strict class initialization.

Now it’s time to discuss the major changes made in the Angular 6.

1. Angular Elements

Angular is a perfect framework for developing Single Page Application. To create a widget or component that can be included in any existing web page was not a simple or easy task. But in Angular 6, it can be done with the help of Angular Elements. Actually, Angular 6 is the first release which completely supports Angular Elements. Angular Elements is the brainchild of Angular’s favorite Rob Wormald.

The Angular Elements package will give us the ability to create an angular component and then publish that component as a Web Component which can be used in any HTML page (maybe that page is not using Angular Framework) in other environments. It actually takes an angular component and then wraps it within a Custom element as a DOM element so that we can use our favorite angular component in other projects which do not have any support of Angular Framework.

2. Service Worker Support

Service worker is basically a script which runs in the web browser and manages to cache an application. This Service Worker is first introduced in Angular 5. In Angular 6, service worker comes with some bug fixing including some new functionalities. So when we deploy the latest version of the application, sometimes we may need to deactivate or uninstall the existing service worker.

In Angular 5, there is no such straightforward option for doing this or to deactivate service worker. But Angular 6 brings this functionality with the new script file named safety-worker.js which is actually a part of the production bundle which helps us to unregister the existing the service worker.

Angular 6 now supports the configuration of navigation URLs within the Service Workers. The service worker will redirect navigation requests that don’t match any source or data group to the specified index file. Now, we can mention an optional navigational list in ngsw-config.json files which contains the desired URLs.

The only request whose URLs match any of the positive patterns and none of the navigate ones then it will be considered as the navigation requests and handled the right way by the Service Worker. In Angular 6, the service worker remains in the current mode unless the server is reconnected and update the work.

3. Bye Bye Template Element

The <template> element was depreciated since one year ago when Angular 4 is launched. Now it’s time to say goodbye the <template> because it is now removed from the Angular 6 framework. In Spite of using <template>, we need to use <ng-tempalate>

4. i18n

One of the major changes in Angular 6 is in localization or i18n. In Angular 6, i18n is coming with runtime rendering so that there is no requirement of build application once per locale. The currency pipe was improved in Angular 6 in such a way that it makes a lot of sense like it will not round every currency value with 2 digits anymore.

It will the round the currency to the appropriate digits (like it can be 3 digits roundup for Arabic Dinar or 0 round up for Chilean Pesos). If we want to retrieve this values programmatically, then we need to use the i18n function getNumberOfCurrencyDigits(). There are some other formatting functions which are also exposed publicly like formatDate, formatCurrency, formatPercent and formatNumber.

5. Ivy: New Rendering Engine

In Angular 6, the angular team introduced their third rendering engine called IVY. Ivy is the next generation angular rendering engine. In the previous version of Angular (i.e. Angular 2 to Angular 4), angular used View Engine for rendering purpose. Introduction of this rendering engine experienced the increase in speed and a decrease in the application size. The angular team expects the same type of experience with the new rendering engine.

Angular compiles our templates into equivalent TypeScript Code and then the typescript code is compiled along with the TypeScript to Javascript code and then the result is shipped to the users. So Ivy renderer is the new rendering engine which is basically designed to support backward compatibility with existing render and then also focused to improve the speed of rendering and it also optimized the size of the final package. In angular, it will not be the default renderer but we can manually enable it using compiler options. This important feature is not completely released in Angular 6 since it is in experimental mode and we can expect the complete version to come out in the next coming release.

6. ngModelChange

Before, Angular 6 ngModelChange event was emitted before the said form control updating. If we have an event handler for the ngModelChange event that checked the value through the control, the old value will be returned instead of the changed value. Now in Angular 6, ngModelChange has emitted the value after the value is updated in the form control.

7. ElementRef<T>

In previous versions of angular, when we wanted to create the reference of an element in the template, we could use @ViewChild or @ViewChildren or inject the host using ElementRef directly. But, the problem is that ElementRef had its nativeElement property typed as any. But now in Angular 6, we can use type ElementRef more strictly if we want.

@ViewChild('login' ) login:  ElementRef<HTMLInputElement>; ngAfterViewInit()  { this.loginInput .nativeElement.focus (); }

8. Bazel Compiler

Bazel Compiler is actually a build system or mechanism which is used in nearly all software built at Google. This compiler only rebuilds what is necessary to build. Since our source code changes very often, so it does not make any sense to rebuild the entire application for every little change. In spite of rebuilding the entire application, we must build only that code part which actually changes and also that code that depends on that changes. So with the help of advanced local and distributed caching, optimized dependency analysis and parallel execution, we can achieve fast and incremental builds. From the Angular 6 release, we will start having this compiler support.

9. RxJS 6.0
Angular 6 now uses RxJs 6 internally. So we need to update our application accordingly. These changes provide developers an increase in performance and easier to debug ajax call stacks and improvement in modularity also making it as backward compatible as possible. But RxJs changed the way import things.

In RxJS 5, you were probably writing:

import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/of'; import 'rxjs/add/operator/map'; const squares$: Observable<number> = Observable.of(1, 2).map(n => n * n);

RxJS 5.5 introduced the pipeable operators:

import { Observable } from 'rxjs/Observable'; import { of } from 'rxjs/observable/of'; import { map } from 'rxjs/operators'; const squares$: Observable<number> = of(1, 2).pipe( map(n => n * n));

And RxJS 6.0 changed the imports:

import { Observable, of } from 'rxjs'; import { map } from 'rxjs/operators'; const squares$: Observable<number> = of(1, 2).pipe(map(n => n * n));

So as per the above code demonstration, we need to change the import of RxJs across our application for Angular 6. But I will say we don’t need to change this right now. Because RxJS released a library called rxjs-compat, which allows us to use RxJS version 6.0 with the old version syntaxes.

10. Tree Shaking

Angular 6 moved from modules referencing services to services referencing modules to make the angular app smaller. Tree shaking is a build optimization step which tries to ensure any unused code does not get used into your final bundle. Instead of rendering template data and passing that directly into the interpreter which knows how to do everything. The new renderer is going to generate the template instructions directly. This results in much smaller bundles and a faster startup time.

There is a new way defined Injectable Service in Angular 6. In this way, we can register a provider, directly inside the @Injectable() decorator, using the new providedIn attribute. It accepts ‘root’ as a value or any module name of our application. When we use ‘root’, it means this injectable will be registered as a singleton object in the application and we don’t need to add it to the providers of the root modules. In the same way, if we use provideIdIn : LoginModule, then injectable is registered as a provider of the LoginModules without adding it to the providers of the modules.

So in the above section, we discuss the most important features of the Angular 6. In addition to these features, there are also several features like:

1. The router sometimes hits a race condition while a route is being instantiated and a new navigation request arrives. This issue has been solved in Angular 6
2. Avoid overriding ngInjectableDef in the decorator if present on the type.
3. Angular Material Library uses Component Dev Kit (CDK) which provided 30+ UI components. CDK also allows us to build our own library of UI components using Angular Material.
4. Angular CLI generates Angular artifacts using the technology called Schematics. If you decide to create your own template Angular team has added ng-add command in Angular-CLI which let's user to download and install new packages in your angular app.
5. If the user wants to upgrade it's angular app from Angular 5 to Angular 6 so angular team added support for ng-update to its Angular-CLI which let the user update and upgrade packages.
6. The 2.6 version of Typescript’s “resolveModuleName” started to require paths passed to be separated by '/' instead of being able to handle '\'.
7. Improved decorator error messages
8. Enable size tracking of a minimal CLI render3 application
9. The Angular team has decided to extend the long-term support (LTE) to all major releases starting with v4
10.  Web pack module bundler has been updated to version 4 es and have Angular CLI explore it, Schematics will help you with this

Hope you found this information helpful.