Monday, 23 April 2018

Angular 5 Features

Angular 5 pent named as "pentagonal-donut" has the following 8 new features:
Optimized build:
In Angular 5, production builds created with the Angular CLI will now apply to the build optimizer by default. The build optimizer removes Angular decorators from your app's runtime codes thereby reducing the size of your bundle and increasing the boot speed of your application.
In addition, the build optimizer removes part of your application that is not needed during runtime via tree-shaking. This action leads to a decreased bundle size and faster application speed.

Server transfer State module:
If you have a screen with country master dropdown, state master dropdown, we end up with multiple HTTP calls from client to the server. Server transfer state generates information as part server side, and then transfers it to the client side so that this information does not need to be regenerated.
The Angular Universal team has added Domino to the platform-server. This simply means more DOM manipulations can happen out of the box within server-side contexts.
Furthermore, two modules, ServerTransferStateModule and BrowserTransferModule have been added to Angular Universal. These modules allow you to generate information as part of your rendering with platform-server and then transfer it to the client side to avoid regeneration of the same information. In summary, it transfers state from the server which means developers do not need to make a second HTTP request once the application makes it to the client.

Incremental builds:
In the previous versions of Angular every time we do a build it builds from scratch, you either change or do no change the code. From Angular 5 it will use typescript transform which was introduced in Typescript 2.3. This will ensure speedy builds of the project.

Removing White spaces:
Previously white spaces, tabs and so on where part of build output. That can now be removed from the project final build output by providing "preserveWhitespaces" as true in the tsconfig.json file as shown in the below code.
{        ...
          ...
  },
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}


Router Life cycle events:
Routing is one of the important part of Angular to create SPA application. In routing we have something called as Route guards. In Angular 5 they have defined routing life cycle which helps to track when router moves from guards to completion state.
The routing life cycle events fire in the following sequence:
  • GuardsCheckStart
  • ChildActivationStart
  • ActivationStart
  • GuardsCheckEnd
  • ResolveStart
  • ResolveEnd
  • ActivationEnd
  • ChildActivationEnd

Export alias support:
Components and directives can now have multiple names. So when you have code changes internally you can expose with new names without breaking the existing code.
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  exportAs:'dashboard, logBoard'
})
export class AppComponent {
  title = 'app';
}


Lambdas in providers (Improved Decorator Support):
Angular 5 now supports expression lowering in decorators for lambdas, and the value of useValue, useFactory, and data in object literals. Furthermore, a lambda can be used instead of a named function like so:
In Angular 5:
  Component({
    provider: [{provide: 'token', useFactory: () => null}]
  })
  export class MyClass {}
Before Angular 5:
  Component({
    provider: [{provide: 'token', useValue: calculated()}]
  })
  export class MyClass {}

Forms Validation in Angular 5 (Blur and submit events):
In Angular 5, forms now have the ability to decide when the validity and value of a field or form are updated via on blur or on submit, instead of every input event.
Example Usage:
<input name="nickName" ngModel [ngModelOptions]="{updateOn: 'blur'}">
Another Example: 
<form [ngFormOptions]="{updateOn: 'submit'}">
In the case of Reactive forms, you can add the option like so:
ngOnInit() {
  this.newUserForm = this.fb.group({
    userName: ['Bob', { updateOn: 'blur', validators: [Validators.required] }]
  });
}

Internationalized Number, Date, and Currency Pipes:
Angular 5 ships with new number, date, and currency pipes that increase standardization across browsers and eliminate the need for i18n polyfills. The pipes rely on the CLDR to provide extensive locale support and configurations for any locales you want to support. To use the old pipes, you will have to import the DeprecatedI18NPipesModule after the CommonModule.
 import { NgModule } from '@angular/core';
  import { CommonModule, DeprecatedI18NPipesModule } from '@angular/common';
  @NgModule({
    imports: [
      CommonModule,
      // import deprecated module after
      DeprecatedI18NPipesModule
    ]
  })
  export class AppModule { }

Faster Compiler in Angular 5:
A lot of improvements have been made to the Angular compiler to make it faster. The Angular compiler now leverages TypeScript transforms. You can take advantage of it by running:
ng serve --aot
Angular.io was used as a case study and the compiler pipeline saved 95% of the build time when an incremental AOT build was performed on it.
Note: TypeScript transforms are a new feature introduced as part of TypeScript 2.3, that allows hooking into the standard TypeScript compilation pipeline.



No comments:

Post a Comment