Whats new in Angular v5

irstly let me clarify we don't call it as angular 5, We know there are lot of things happened when angularJS moved to angular 2. But yeah, now onwards it's just angular. Similar to other frameworks. As we don't call react as react 1 or react 2. Below are some of the new features that are shipped along with Angular v5.

1. Angular cli 1.5 now will install angular v5
2. Typescript was updated to 2.4 from 2.3
3. RXJS was updated 5.5

There were some improvements and the new release that was also done as part of version 5. Below are the new features that are shipped with Angular v5.

Build Optimizer

Build optimizer is used to create bundle smaller in size. Basically, it improves performance.

AOT on by default

Earlier in development mode application use Just In Time (JIT) compilation and when we are moving to production mode then we use AOT compilation mode. Reason being is AOT compilation is very slow before angular v5 release hence it increases development efforts. But now we will just have AOT compilation mode throughout the process from development to production.

Watch mode:

Replacement of tsc which we usually use in our TypeScript projects

ngc --watch or ngc -w

Progressive web apps

The major focus of angular by now is progressive web apps. The angular v5 just gives the feel of how progressive app will be. There is lot more work to do and the angular team is still working on improving it.

New HTTP client

Now there is a new package available to handle HTTP request:

import {HttpClientModule} from '@angular/common/http';

instead of

import {HttpClientModule} from '@angular/http';  // It is getting depreciated

Also with new package

map(res=> res.json()) 

is no longer needed.

The below code:

const headers = new HttpHeaders().set('', '');
const params = new HttpParams().set('', '');
return this.http.get('/api/service', { headers, params });

can now be replaced with as shown below with HTTP new package.

const headers = { '': '' };
const params = { '': '' };
return this.http.get('/api/service', { headers, params });

Forms improvement

Form validation on submission is also supported in angular v5.

<!-- Update on submit -->
<form [ngFormOptions]= "{updateOn : 'submit'}">

<!-- Update on blur -->
<input type="text" name="firstName" [ngFormOptions]= "{updateOn : 'blur'}" />

Internationalized Number, Date, and Currency Pipes

Angular v5 has a new number, date, and currency pipes that increase standardization across browsers and eliminate the need for i18n polyfills library. The new number, date and currency now rely on CLDR.

New lifecycle events in Router

There are lot of lifecycle events added to router package to handle various scenarios like showing loader while child component is loading.

The new events are :

1. GuardsCheckStart
2. ChildActivationStart
3. ActivationStart
4. GuardsCheckEnd
5. ResolveStart
6. ResolveEnd
7. ActivationEnd
8. ChildActivationEnd.

RxJs imports

Earlier we need to import RxJs components like as shown below:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';

But now in Angular v5 we can simply import it as shown below:

import { Observable } from 'rxjs/Observable';
import { map, filter } from 'rxjs/operators';

Angular Universal State Transfer API and DOM Support

You can now more easily share application state between the server side and client side versions of your application.

In Angular v5, the angular team has added ServerTransferStateModule and the corresponding BrowserTransferStateModule. This module allows to generate information as part of your rendering with platform-server, and then transfer it to the client side so that this information does not need to be regenerated.

There is not much documentation around it as of now, so I am not really sure of this feature. But yes, this feature exists in angular v5.

exportAs

Support for multiple names for your components/directives. Suppose if there is a requirement where a developer needs to give a new name to component or directive without breaking existing code he can use an exportAs feature to achieve this as shown in the code below:

@Component({
    moduleId: module.id,
    selector: 'code-test',
    exportAs: 'codeTest, codeDone',
    templateUrl : './code-test.component.html
})

preserveWhiteSpaces

Suppose we have two tags like as shown below:

<app-demo></app-demo>  <app-demo></app-demo>

As we can see there is a space in between above two HTML tags so in DOM also we can see the space as usual. But now in Angular 5 if we don't want to show up that space we can configure it like as shown below:

@Component({
     selector : 'app-demo',
     templateUrl : './app-demo.component.html,
     preserveWhitespaces: false
)}

We can set this at component level as shown above. Also, we can set it globally:

platformBrowserDynamic().bootstrapModule(AppModule, { preserveWhitespaces: false });

By default in Angular v5 the default value of preserveWhitespaces is true.

There is a requirement if with a preserveWhitespaces set to false then also we need to add space then we can add it like as shown below:

<app-demo></app-demo>&ngsp;<app-demo></app-demo>

zone speed improvement

To bypass zones, bootstrap your application with ‘noop’ as your ngZone:

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

Apart from the changes specified above there are lot more changes related to performance and bug fixes that were in Angular v5. 

Please let me know if you have any questions in the comment section below.