Angular 5.0 New things

Angular team has released Angular 5.0 on 1st Nov 2017. They focused on most new features and bug fixes. This release continues our focus on making Angular smaller, faster, and easier to use.

Following things are New:

Angular CLI 1.5 and Angular 5.0.0

Now we are in CLI 1.5, if you install CLI 5.0, automatically you will get the angular 5.0 versions default in your package.json file in angular app.

 Typescript updated  to 2.4

Dynamic import expressions are a new feature and part of ECMAScript that allows users to asynchronously request a module at any arbitrary point in your program.

RXJS was updated to 5.5 version:

This recent release of RxJS fully empowers developers to avoid the side effects of the

previous import mechanism with a new way of using RxJS called “lettable operators”.

These new operators eliminate the side effects and the code splitting .

Tree shaking problems that existed with the previous ‘patch’ method of importing operators.

instead of :

import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/map';

import 'rxjs/add/operator/filter';

names = allUserData

.map(user =>

.filter(name => name);

user below like this:

import { Observable } from 'rxjs/Observable';

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

names = allUserData.pipe(

map(user =>,

filter(name => name),


Buid optimizes.,Bundle size reduced, Speed the app

Ahead -of -time compiler

Converts your angular code before browser downloads and run it

Aot:  faster rendering . few async reauests, smaller download

watch mode files ngc –watch. This command will watch your file what are the file executing

Easier to build progressvie web apps

The build optimizer does is to remove Angular decorators from your application’s runtime code. Decorators are used by the compiler, and aren’t needed at runtime and can be removed. Each of these jobs decreases the size of your JavaScript bundles, and increases the boot speed of your application for your users.

Their goal is to make this angular default option for most developers

->service workers

->small, easier and more powerfull

->Http client module feature added.  from

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

removed map(res=> res.jon()) calls which no longer needed with http client module.

depreacted http in 5.0 version,  for now you can use http in 5.0 but its depreacted. In future they may removed from angular 5.0

Angular Form validation

They added some new feature on forms.

angular 4 form validates the form when we entered the characters.

but in angular 5 they inclueded validation on blur and submit

validation and value updates on `blur` or on `submit`, instead of on every input event

Template Driven Forms


<input name="firstName" ngModel>


<input name="firstName" ngModel [ngModelOptions]={updateOn: 'blur'}>


Validations will be done on submit.

Or you can add for each individual with ngModel options

<input name ="firstName" ngModel[ngModelOptions]={updateOn: 'blur'}>

Or simply you can use the reactive forms

Reactive Forms


new FormGroup(value);

new FormControl(value, [], [myValidator])


new FormGroup(value, {updateOn: 'blur'}));

new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})

Changes with pipes

DepreactedI 18 Npipes module

old pipes will depreacted but you can use now. In future they may removed from angular 5.0

Increase standardization across browsers

Internationalized Number, Date & Currency

Router Life cycle Events:

New lifecycle events to the router, allowing developers to track the cycle of the router from the start

of running guards through to completion of activation. 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. Allow develpers to track the routing cycle used to do things like show spinners, measures performance of guards

GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, Resolve End,

ActivatonEnd, ChildActivationEnd

An example of using these events to start/stop a spinner might look like this:

class MyComponent {

constructor(public router: Router, spinner: Spinner) { => {

if (e instanceof ChildActivationStart) {


} else if (e instanceof ChildActivationEnd) {






Angular Universal State Transfer API and DOM Support

Easily share application state between the server side and client side versions of your application.

And helping developers to perform  server side rendering (SSR) of Angular applications.

By rendering your Angular applications on the server and then bootstrapping on top of the generated HTML, you can add support for scrapers and crawlers that don’t

Support JavaScript, and you can increase the perceived performance of your application.

In 5.0.0, the team has added ServerTransferStateModule and the corresponding BrowserTransferStateModule. This module allows you 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

This means when you fetch the data over http, by transfer data from there server, this means developers no need to make 2nd HTTP request

It supported more DOM manipulations out of the box within server side contexts, improving our support for 3rd party JS and Component libraries that aren’t server-side aware

Improvements on compiler:

They improved compiler to supports incremental compilation. Its provide faster rebuilds,

It builds with AOT, and added new feature to Decorators. And made it possible to smaller bundles

By remove the whitespaces.

Typescript Transforms

Typescript transform, making incremental rebuilds dramatically faster

You can take advantage of this by running ng serve with the AOT flag turned on.

You can take advantage of this by running ng serve with the AOT flag turned on.

ng serve –aot

This will become the default in a future release of the CLI

On this transforms, we don’t need a genDir anymore, and outDir has been changed: we are now always emitting generated files for packages in node_modules.

Preserve Whitespace

Tabs, newlines, and spaces in your templates are recreated and included in the build by the compiler.

You can now choose whether or not to preserve whitespace coming from your components and your application.
1) You can specify this as part of each component’s decorator, where it currently defaults to true.


templateUrl: 'about.component.html',

preserveWhitespaces: false


export class AboutComponent {}

2) specify in tsconfig.json file also: by default its true.

"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "es2015",
"types": []
"angularCompilerOptions": {
"preserveWhitespaces": false
"exclude": [

Decorator Support :

Expression lowering in decorators for lambdas and the value of useValue, useFactory and data in object literals. This allows you to use values that can only be calculated at runtime in decorators for expressions that are lowered.

You can now use a lambda instead of a named function, meaning you can execute code without affecting your d.ts or your public API.


provider: [{provide: SOME_TOKEN, useFactory: () => null}]


export class MyClass {}

-> lower expressions as part of useValue.


provider: [{provide: SOME_TOKEN, useValue: SomeEnum.OK}]


export class MyClass {}

Replace the ReflectiveInjector with StaticInjector

In order to remove even more polyfills, we’ve replaced the ReflectiveInjector with the StaticInjector.

This injector no longer requires the Reflect polyfill, reducing application size for most developers.





Please refer angular blog for more info:

update to angular 5.0 from this below site

If you want to update your angular app to 5.0, just go to below website and give your current version in the fields.

Published on Web Code Geeks with permission by Ramesh Kotha, partner at our WCG program. See the original article here: Angular 5.0 New things

Opinions expressed by Web Code Geeks contributors are their own.

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!


1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook


and many more ....


I have read and agree to the terms & conditions


Ramesh Kotha

Ramesh is a certified Java professional working in financial domain, He is an application developer and has hands on practice with Java and related technologies. He is passionate about Spring and other open source technologies.
Notify of

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newest Most Voted
Inline Feedbacks
View all comments
Sanju Suresh
5 years ago

Nice article, Keep up the good work!

Sathish Kotha
5 years ago
Reply to  Sanju Suresh

Thank You!

Back to top button