Top 12 Angular 5 Release Features

The most popular JavaScript framework has been introduced as Pentagonal Donut Angular JS v5. It is the major release with advanced new features, better coding, bug fixes & better support for Google material design framework. Google’s powerful JavaScript framework focuses on making Angular faster, smaller, flexible & easy to use. It is mainly used for building desktop & mobile applications. Here are some breakdown changes in Angular 5 Release:

1. Semantic Build Optimizer

Angular version 5 release feature introduces the semantic build optimizer which can be applied by default to the production builds along with CLI. A semantic build optimizer is a tool introduced in Angular 5 to make the smaller bundles by using semantic understanding of applications.

Build Optimizer Performs Two Important Tasks:

• It will mark the different modules of your application as “pure” & improves the tree shaking issues. It will remove the boilerplate code/unnecessary code of your application that is not needed.
• The Semantic Build Optimizer removes the angular decorator during the runtime from applications. Decorators are not needed at runtime. They are the part of compiler & can be removed easily.

These both tasks help to decrease the size of JavaScript bundles as well as increase the boot speed of the desktop & mobile applications for developers.

2. Angular Universal and DOM Support

Angular Universal is an Angular project for performing server-side rendering SSR of Angular apps. It makes easy for a developer to share application state between the server side & client side versions of applications. Rendering Angular applications on the server helps to add support for scrapers & crawlers because the scrapers don’t support JavaScript. It will improve the performance of the applications.

Angular 5 has included two important modules as ServerTransferStateModule & BrowserTransferStateModule. It generates rendering information using platform server & transfer that information to the client side so as to avoid regeneration of information.

For Example: When the application data fetches over Http server, then the developer doesn’t need to make 2nd Http request once the application makes it to the client. Angular Universal has come up with “Domino” to platform server. Domino means providing support for DOM manipulation with server side, 3rd party JS & component libraries.

3. Typescript Compilation Improvements

The Angular compiler provides faster rebuilds for AOT & production builds. The improved Angular compiler supports incremental compilation & makes it possible for decorators to ship smaller bundles. It operates the Typescript transform that makes faster incremental rebuilds. Typescript transform allows fixing into standard Typescript compilation pipeline.

The compiler has included & recreated the tabs, spaces & newlines in the templates. It depends on the developer to preserve whitespace coming from your components & applications.

As shown in the given code of component’s decorator, it’s currently set default = true.

@Component({
  templateUrl: 'about.component.html',
  preserveWhitespaces: false
}
export class AboutComponent {}

4. Improved Decorator Expression Lowering

Angular 5 offers support for “useValue”, “useFactory” & “data” in object literals as well as expression lowering in decorators for lambdas. The values calculated at runtime in decorators are used for lowered expressions.

Angular 5 ensure the use of lambda over named functions. It means you can easily execute code without working on public API.

Component({
  provider: [{provide: SOME_TOKEN, useFactory: () => null}]
})
export class MyClass {}

5. Internationalized & Standardized Currency Pipes

Previously, Angular is used to depend on the browser so as to provide number, date & currency formatting using browser API. This issue encourages the need for polyfill among the various developers. It means the user was receiving inconsistent results across the browsers.

In Angular JS version5, the newly updated pipes have been introduced that rely on CLDR (Common Locale Data Repository) to provide configuration support for the locale.

6. ReflectiveInjector Replacement

The ReflectInjector has been replaced in the Angular 5 with the StaticInjector to remove polyfills. It reduces the application size for developers. Reflectiveinjector is no longer required.

Old

ReflectiveInjector.resolveAndCreate(providers);

New

Injector.create(providers);

7. Fast & Focused Zone Improvements

Angular 5 improvements make the zone faster. By default, it has focused to bypass zones for better performance in the desktop & mobile applications. You can bootstrap your applications with “noop” to bypass zones.

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

8. exportAs : Angular Microsyntax

Angular JS 5 provide support for multiple names of directives & components. It helps in migration of the components for the developers without affecting any changes. In Angular 5, we can define new names in Angular microsyntax by exporting directives with multiple names. This feature is an important part of the Angular Material project.

@Component({
  moduleId: module.id,
  selector: 'a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]',
  exportAs: 'matButton, matAnchor',
}

9. HttpClient Module :

The New HttpClient brings some useful features for all applications & developers deprecating the old Angular Http library. It is an easier, smaller & powerful medium to make web request in Angular.

To perform update to HttpClient, replace HttpModule with HttpClientModule from @angular/common/http in each module. Add the HttpClient service & remove all map(res => res.json()) calls. These calls are no longer needed.

10. Command Line Interface (CLI) v1.5

Angular CLI v1.5 supports Angular JS V5 & also generates V5 projects. The Angular team has updated the use of .tsconfig files to follow the standard of Typescripts. It configures the Typescript without affecting the files or include sections.

To Install Angular CLI:

npm install -g @angular/cli 

11. Template Driven Forms

Template driven forms use the model-driven approach in which Angular create the FormGroups & FormControls models using directives.Template driven forms are similar to model-driven forms but driven by directives in the template instead of code. We use directives to define a model in the template driven.

Old Version

<input name="firstName" ngModel>

New Version

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

12. Reactive Forms

Angular Reactive forms define the reactive style of programming that ensures the explicit data flow between the non-UI data model & UI oriented form model. Reactive forms reduce the issues of data flow & make it simple for testing & validation. It helps to create the tree of Angular form control objects in component class & combine them to native form elements in the component template

Old Version

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

New Version

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

How Do You Update?

The angular team built the Angular Update Guide to lead you the complete update process. This updated guide will guide you through the changes that will be needed to make applications.

Some known issues related with production builds source maps read here

Final Review:

Angular JS Version 5 delivers the reliable, fast & engaging user experiences for the mobile & desktop applications. Web developers rely mostly on the AngularJS framework for front end development & applications. The Angular labs are working on component Dev kit, ABC (Angular+Bazel+Closure) & Angular elements brand new project. There is plenty of exciting things is going on our Ficode team while working on mobile app development platform. Our focus is to develop applications on various development frameworks as AngularJS, ReactJS, Laravel & CakePHP.