Angular 6.0 - What's New And How To Upgrade

Google has just released a new version of Angular; i.e. 6.0 in mid-April 2018. It was the first major release from Google in 2018 and mainly focused on the toolchain and also making Angular easier for the user to create different types of applications. This major version also contains some new features and upgrades with 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 as it makes their development more easy. Also, Angular 6 support the Typescript version 2.7. So with the help of the new Typescript version, it is very easy to code with conditional type declarations, default declarations and strict class initialization.

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

Angular Elements

Since Angular is a perfect framework for developing Single Page Applications, to create a widget or component that can be included in any existing web page was not a simple 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  Rob Wormald. The Angular Elements package will give us the ability to create an Angular component and then publish that component as a Web Components 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.

Service Worker Support

Service worker is basically a script which runs in the web browser and manages to cache an application. This Service Worker was 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 deactivating 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 is helps us to unregister the existing 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 navigation Url's list in ngsw-config.json files which contain the desired URLs. Only requests whose URLs match any of the positive patterns and none of the negative ones will be considered as 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 updates the work.

Bye Bye Template Element

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

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 to build applications once per locale. The currency pipe was improved in Angular 6 such that it makes a lot of sense, like it will not round every currency value with 2 digits anymore. It will then round the currency to the appropriate digits (like it can be 3 digit roundup for Arabic Dinar or 0 roundups 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.

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 versions of Angular (i.e. Angular 2 to Angular 4), Angular used View Engine for rendering purposes. Introduction of this rendering engine means an increase in speed and decrease in the application size. Angular team expects the same type of experience with the new rendering engine.

Angular compiles our templates into equivalent TypeScript Code and then the code is compiled along with the TypeScript to Javascript code and then the result is shipped to users. So Ivy renderer is the new rendering engine which is basically designed to support backward compatibility with existing rendering and then also focused on improving the speed of rendering and optimizing 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 the complete version will come in the next release.

ngModelChange

Before, Angular 6 ngModelChange event was emitted before the said form control update. 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 omitted the value after the value is updated in the form control.

ElementRef<T>

In previous versions of Angular, when we want to create the reference of an element in the template, we can 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();
}

 

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 out sourced code changes often,  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 is actually changed and also that code that depends on that change. So with the help of advanced local and distributed caching, optimized dependency analysis and parallel execution, we can achieve fast and incremental builds. From Angular 6 release, we will start having this compiler support.

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 make it easier to debug ajax call stacks and make improvements in modularity, also making it as backward compatible as possible. But RxJs changed the way to 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.

Tree Shaking

Angular 6 moved from module 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 from much smaller bundles and a faster startup time.

There is a new way to define 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 discussed the most important features of Angular 6. Except for 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, the Angular team has added ng-add command in Angular-CLI which lets users download and install new packages in your Angular app.
5. If the user wants to upgrade the Angular app from Angular 5 to Angular 6 the Angular team added support for ng-update to its Angular-CLI which lets 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. 8Enable 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

Upgrading to Angular 6

The Angular team built an awesome tool to make upgrading as easy as possible.

Click on the link - https://update.Angular.io/ and check your update process

 

 Thanks for reading this blog.