Home > Angular > Angular 5.0 New things

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 => user.name)

.filter(name => name);

user below like this:

import { Observable } from 'rxjs/Observable';

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

names = allUserData.pipe(

map(user => user.name),

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

Before

<input name="firstName" ngModel>

After

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

OR

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

Before

new FormGroup(value);

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

After

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) {

router.events.subscribe(e => {

if (e instanceof ChildActivationStart) {

spinner.start(e.route);

} else if (e instanceof ChildActivationEnd) {

spinner.end(e.route);

}

});

}

}

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.

@Component({

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": [
"test.ts",
"**/*.spec.ts"
]
}

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.

Component({

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

})

export class MyClass {}

-> lower expressions as part of useValue.

Component({

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.

Before

ReflectiveInjector.resolveAndCreate(providers);

After

Injector.create(providers);

Please refer angular blog for more info:

https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced

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.

https://angular-update-guide.firebaseapp.com/

Advertisements
Categories: Angular
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: