This series of blog posts which I have converted from Youtube videos. I personally have really enjoyed these videos so in order to textually document them, these are essentially some screenshots and rough notes organised. 

This particular post is based on the Traversy Media’s talk. It can be found on the link https://www.youtube.com/watch?v=4i2pOzcz3Zo

The version 5 of the open-source JavaScript, Angular, has been released. Angular follows the similar naming convention as other frameworks such as React and VueJS and thus all versions of Angular are referred to as Angular. At the release of Angular 2, there was a considerable difference with the previous AngularJS but the newer versions have a basic similarity that renders easier upgradation. The version of Angular from 2 – 4 have an underlying difference but the exterior is the same thus the syntax and core application files are the same. The only purpose of the upgrades was the transformation of Angular to be faster, smaller and easier to use. Following are the list of changes that Angular has undergone over these upgrades.

Package Updates:

⚉ The Angular-CLI version 1.5 can install Angular 5.0.0 by default.

⚉ TypeScript has been updated from version 2.4 to 2.5.

⚉ The Reactive Extensions for JavaScript RXJS have been upgraded from version 5.4 to 5.5.

Only these two core packages have been updated. And the changes present in the update can be checked using the change log.

Build Optimizer:

⚉ Build Optimizer is a tool included in the CLI of Angular and is aimed at making the bundles smaller.

⚉ It performs two actions i.e. makes parts of the application “pure” by removing parts of the application that are redundant and remove’s decorators, that are only required by compilers, from runtime code of an application.

⚉ This elimination of code that is not needed results in decreasing the size of production bundles and speeds up the application.

AOT on by Default:

⚉ The Angular Version 5 update provides optimization through AOT i.e. Ahead of Time Compiler which has been made faster than AOT in version 4. This Ahead of Time Compiler, unlike in the previous version, has been configured to be on by default the Angular Version 5. In the previous version –aot flag had to be specified to use it, but it can be used by default during ng build in the Angular Version 5.

⚉ AOT Compiler converts Angular and TypeScript code into efficient JavaScript before the download and running by the browser.

⚉ Ahead of Time Compiler is different than JIT (Just in Time) Compiler which performs a compilation of app at runtime.

⚉ AOT Compiler provides faster rendering, fewer asynchronous requests, smaller download sizes and also detects template error beforehand. All of these features of AOT are aimed at making Angular faster in development and production.

⚉ There’s also a watch mode to compile only the necessary code that can be specified using ngc–watch. A diagnostic flag is also present for checking the amount of compile-time spent in watch mode.

Progressive Web Apps:

The main purpose of Angular has now turned out to be making it easier for building Progressive Web Apps with the framework providing a flawless app-like experience without any browser dependency. The Progressive Web App option has been introduced for the first time in Angular Version 5 and is still in experimentation. Google aims at making the option a default in the upcoming updates for developers during the creation of Angular applications. The Angular Service Worker, which is still in beta testing, will be improved with this upgrade. The features offered by Angular Service Worker are caching static assets by default, caching external resources, providing support for push notifications all of which provide better support for creating Progressive Web Apps using Angular.

New HttpClient:

A new Http client has also been introduced with the upgrade which smaller, faster, easier to use and much more powerful. The Angular Http Library has been deprecated and for import HttpClientModule as was done in previous versions:

Import {HttpClientModule} from ‘@angular/http’;

Has now changed to:

Import {HttpClientModule} from ‘@angular/common/http’;

The previous version code still works in the Angular Version 5 but, since it is deprecated, it will not be available in the next versions. The map(res=>res.json()) calls for Http Clients have been rendered redundant in the new version and is thus not needed to be written.

Angular Form Validation:

Angular Form Validation has also been updated as there were a lot of problems relating to it in the versions, especially in template driven forms. The Validations on forms used to run on ‘blur’ events on every input, so by clicking on the field and clicking out without entering enough characters caused a ‘blur’ event and generated an error. In the new version, this ‘blur’ event can be specified on submission of form i.e. on the ‘on submit’ event. This can be done using the ngFormOptions tag as shown below:

<form [ngFormOptions]=”{updateOn:’submit’}”>

The ‘blur’ event can also be generated on individual inputs using ngModelOptions as shown below:

<input name=”firstName” ngModel [ngModelOptions]=”{updateOn:’blur’}”>

Thus, the functionality of Angular has been updated to include new features without accounting for much change in syntax. This Validation option is applicable to ‘Reactive’ forms as well.

Changes with Pipes:

Pipes are template filters and are available either as Core Pipes or Custom Pipes which can be created and customized by the developer. In Angular 5, the Number, Date and Currency Pipe has been internationalized. This is done to increase standardization and to eliminate the need for polyfill library which was used for this purpose and depended on the browser for providing these formatting functionalities. This has thus resulted in the deprecation of the old Pipes but the ‘DeprecatedI18NPipesModule’ can still be imported and used.

New Router Lifecycle Events:

The Angular Version 5 has added new Lifecycle Events or Hooks for routers. It provides the capability of specifying certain points in loading components which can now be done through routers. It has the ability to show spinners on specific router outlets when a child component is loading or to measure the performance of router guards, like for Authentication guards etc. The Hooks that can be used in Angular 5 are:

✔ GuardsCheckStart

✔ ChildActivationStart

✔ ActivationStart

✔ GuardsCheckEnd

✔ ResolveStart

✔ ResolveEnd

✔ ActivationEnd

✔ ChildActivationEnd

Another functionality with regards to a router that has been added in this upgrade is the reloading of the page as the router receives a request with the same URL. This functionality was ignored in the previous version limiting the creation of a true refresh button in an application. This can be specified in the ngModule on the same URL navigation that can be set to either reload or ignore (default).

RxJS 5.5 Imports:

The syntax for importing certain operators from RxJS operator has also been upgraded to reduce the size of code and make it more clean. The syntax used for importing map or filter operators was:

import { Observable } from ‘rxjs/Observable’;

import ‘rxjs/add/operator/map’;

import ‘rxjs/add/operator/filter’;

names = allUserData

.map(user => user.name)

.filter(name => name);

These operators can now be imported in a destructed way as:

import { Observable } from ‘rxjs/Observable’;

import { map , filter } from ‘rxjs/operators’;

names = allUserData.pipe(

.map(user => user.name),

.filter(name => name),

);

Angular Universal Transfer API:

⚉ Angular Universal is also an improvement as it provides server-side rendering of Angular applications and helps enhance performance. Angular Version 5 has thus made it easier to share application state between server and client.

⚉ The ServerTransferStateModule which has been introduced in Angular Version 5 which optimizes fetching the data over HTTP, for instance, the state transference from the server renders making a second HTTP request for performing the same task as redundant.

⚉ Angular Universal provides better support for the DOM by offering more DOM manipulation or support functionalities with the server-side context.

Other Changes and Optimizations:

There have been additional changes and optimizations such as:

preserveWhitespace Option:

It also provides the option to preserve Whitespace in the template. The Whitespaces such as tabs and newlines get recreated and are included in the build by the compiler, these Whitespaces can now be preserved in the component decorator or by editing the TypeScript config file value which is by default ‘true’ and can be changed to ‘false’ to preserve the Whitespaces.

exportAs:

It can be used to add multiple names for components and directives.

Zone speed improvements

Zone, which is an execution context that allows hooking into asynchronous tasks, can also be bypassed to improve performance output. The Zones can easily be bypassed by putting the ngZone value as ‘noop’ inside the bootstrapModule method call in the main TS file as shown in the following piece of code:

platformBrowserDynamic().bootstrapModule(AppModule,{ngZone:’noop’}).then( ref => {} );

Conclusion

• The Version of Angular 5 does not provide a lot of changes regarding development.
• The applications running on Angular 4 may not face any problems when updated to Angular 5 by updating TypeScript to version 22.4.
• The only problems that might occur can be related to Pipes because of the deprecated syntax especially in the Date and Currency Pipes.
• It is also more effective to use the new HTTP Client that has been introduced in Angular Version 5.
• The major changes in this new version are mostly related to performance and speed enhancement as well as optimization.
• The upgradation has little impact on the present syntax and still provides support even with the little changes present.

­