What’s new in Angular 5

Our favorite open-source Javascript based framework is back again. With more exciting features and promises. What are they and how they…

What’s new in Angular 5

Our favorite open-source Javascript based framework is back again. With more exciting features and promises. What are they and how they will help or affect the developers? Let’s dive deep-


The Angular 5 has deprecated the previous @angular/http library. From now they are recommending HttpClient for all applications.

Question is why they have done that?

In earlier Angular version (4.3), they shipped HttpClient in @angular/common as a smaller, easier, and more powerful way to make web requests in Angular. Developers praised the effort which has certainly boosted them to take this new stand.

Now to update to HttpClient, one will need to replace HttpModule with HttpClientModule from @angular/common/http in each of your modules, inject the HttpClient service, and remove any map(res => res.json()) calls, which are no longer needed.

With the new feature, one now will be able to directly use object literals as headers or parameters, whereas we had to use the classes HttpHeaders and HttpParams.

So the below code:

const headers = new HttpHeaders().set(‘Authorization’, ‘secret’); 
const params = new HttpParams().set(‘page’, ‘1’); 
return this.http.get(‘/api/users’, { headers, params });

can now be simplified into:

const headers = { ‘Authorization’: ‘secret’ }; 
const params = { ‘page’: ‘1’ }; 
return this.http.get(‘/api/users’, { headers, params });

Build Optimizer

With this new release, Angular keeps working on making the framework smaller, faster and easier to use. Take the “Build Optimizer” as an example. From the Angular 5.0.0, production builds created with Common Line Interface (CLI) will now apply the build optimizer by default.

TypeScript Transforms

Under the hood, the Angular compiler now operates as a TypeScript transform. It will stimulate the incremental rebuilds dramatically. The programmers can take advantage of it by running ng serve with the AOT flag turned on. This is a major development. As per their official blog, this will become the default in a future release of the CLI.

Preserve Whitespace

With the new Angular 5, one can now choose whether or not to preserve whitespace coming from your components and your application. Earlier tabs, newlines and spaces in your templates have been faithfully recreated and included in your build by the compiler.

One can specify this as part of each component’s decorator, where it currently defaults to true.

Or one can specify it application wide in tsconfig.json, where it also currently defaults to true.

Improved decorator support

Now Angular 5 supports expression lowering in decorators for lambdas and the value of useValue, useFactory and data in object literals. It will allow the programmers to use values that can only be calculated at runtime in decorators for expressions that are lowered.

New Router Lifecycle Events

In Angular 5, they have added new lifecycle events to the router. It will help the developers to track the cycle of the router from the start of running guards through to completion of activation.

Furthermore, these events could be used for things such as showing a spinner on a specific router outlet when a child is updating or to measure performance of guards and/or resolvers.

Updates on number, date and currency pipes

In Angular 5, there are new number, date, and currency pipes that increase standardization across browsers and eliminate the need for i18n polyfills.

This is another major improvement. Previously in Angular, the programmers have to reply on the browser to provide number, date and currency formatting using browser i18 APIs. In this scenario, there was a need for a polyfill for most developers where the users were seeing inconsistent results across browsers. Plus, the developers don’t have a satisfied expectation there.

In Angular 5, there is an update on the pipes. It will help to use their implementation, relying on the CLDR to provide extensive locale support and configurations for any locales you want to support.

How to update?

Please go to Angular Update Guide to undergo the process and learn about the changes. This guide will help the programmers immensely and guide you across the changes one will need to make to their application.

Want to build your next application in Angular 5.0? Contact us now.

Source of Image and information