What’s New in Angular 5.0?

Don’t misconception that Angular JS and Angular are one, Angular is a TypeScript based framework mainly used to build mobile, web and desktop based applications. Angular development consolidates of templates, dependency injection, tooling and much more. It is maintained and built by Google. So far, Angular has two versions and recently the new version is released – bringing up more ease and smoothness for developing an application.

Pentagonal Donut, the codename of Angular 5.0 is finally out after nine releases of beta versions for over a month or two. You will be surprised to know that user interfaces of big web platforms like Google Adwords, Google Fiber, Adsense, and Winc are developed in Angular.

Though the version is named 5, actually this release is the framework of AngularJS. It took a bit longer for the release but the wait ended with many positive improvements and deprecations to make Angular small and fast.

15 Notable Changes in Angular 5.0

1. Look like Web Apps, but feel like Native Apps

Google-driven Progressive web applications are at hype nowadays. Looking into it, Angular Team strives hard to ease the development process with Angular 5.0. PWA is to get the feel like native mobile application with browser based apps along with add-ons like push notifications and offline experience. Configuration with CLI (Command Line Interface) and @angular/service-worker package make it possible to build support for PWA.

2. Coming up of HttpClient

HttpClient was introduced in version 4.3, and now developers recommend to use it. It came up as a replacement HttpModule from the previous @angular/http library. HttpClient API features are:

• Support for JSON body types.
• No longer to explicitly parsed JSON, it is now by default
• Interceptors let middleware logic to insert in pipeline
• Immutable request/response objects
• Progress events for request upload and response download.
• Post-request verification
• Flush based testing framework.

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

3. i18n polyfills eliminated

Standardization across browsers has been taken care of with new number, date, and currency pipes. Support and configuration to any locales are provided by pipes that rely on CLDR for the same. Old pipes can be used by importing DeprecatedI18NPipesModule after the CommonModule.

import { NgModule } from '@angular/core';
import { CommonModule, DeprecatedI18NPipesModule } from 
'@angular/common';

4. Multiple Export Alias Support

Now, while exporting multiple names can be given to components and directive. It helps users to migrate hassle free without any breaking changes with Angular 5.0.0 development.

5. Build Optimizer

Because of build optimizer tool in Angular v5.0, the application gets more light and quick as it JavaScript size has decreased and even the unnecessary runtime code and other additional parts (so bundle size is decreased) are removed automatically. In Angular 5, build optimizer is by default as builds are created with Angular CLI now.

6. Universal Transfer API & DOM

Domino is added to the platform server so that more DOM based manipulations can occur within server-side contexts. Similarly, two modules are added ServerTransferStateModule and BrowserTransferModule to Angular Universal. Technically speaking, both are included to share code between server and client side of an Angular based application to reinforce the performance as regeneration of same information is pure dodged. i.e. now developers require not make another HTTP request once the application is transferred on client-side.

7. Material Design

CRM, CMS and dashboard projects like large enterprise applications have ready to go templated with Angular 5 development as it supports Material Design components that is compatible for server-side rendering. Everything is simply added in component-specific and modular, so addition or removal of any components is comparatively very simple.

Unfortunately, this feature is still not released, update still under process.

8. Fast Compiler & Improved TypeScript

Faster rebuilds, mainly for production and AOT build are possible only due to a lot of improvements in Angular Compiler. Even TypeScript is upgraded with the latest version 2.3, which allows connecting to standard TypeScript compilation pipeline.

Run ng serve with the AOT flag turned on.

ng serve –aot

Angular compiler pipeline is assumed to save 95% of the build time,

9. Form Validation

Angular 5 forms have the capability to run validation and value updates or even the updated form can even be run on blur and submit rather than on every input event.

Code –

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

10. Decorator Support Improvised

For lambdas, expression lowering is incorporated in decorators. Similarly, in object literals, the value of useValue, useFactory, and data are supported. Now, instead of a named function lambda can be used. Say, for example

Now:

Component({    
provider: [{provide: 'token', useFactory: () => null}]  
})  export class ThisClass {}

Then:

Component({   
 provider: [{provide: 'token', useValue: calculated()}]  
})  export class ThisClass {}

11. New Router Hooks

Right from the start of running guards to the end of activation, router cycles can be tracker with a new feature – Router hooks. For the same, few of the new lifecycle events are added – GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationEnd, and ChildActivationEnd to the router.

12. CLI v1.5

With this version of CLI, v5 projects generation are by default, just like the build optimizer is. Also, in this CLI version TypeScript is configured by default – i.e. without any files or include sections. Loaded processes are indeed eased with this CLI version 1.5.

Also the beta version of CLIv1.6 is out.

13. Animation

Since Angular v4.0, enhanced support for animations is provided so that parent and child elements can efficiently correlate to each other across page transitions. Also, Angular 4.3 had an attribute namely @disable to enable or disable animations. Though the process is bit tiresome, still full animations effect can be seen by getting rid of stagger and keyframes with Angular 5.0.0.

14. Support for Service Workers

@angular/service-worker package provides enough support for service workers, which is basically a conceptual derivative of the package. Earlier service worker was managed and maintained at github.com/angular/mobile-toolkit. The purpose to revamp it was to provide extensive support to other use-cases of various applications.

15. Reactive Programming

Effects of code-splitting and tree-shaking issues have been overcome with the operators that are featured in RxJS reactive programming library version 5.5.2 and above. Even a version is categorized using ECMAScript modules by RxJS.

import { Observable } from 'rxjs/Observable';
import { map, filter } from 'rxjs/operators';
names = allStudentData.pipe(
  map(student => student.name),
  filter(name => name),
);

Deprecated Features

Deprecated or updated features are for a worthy purpose to increase the performance or to remove or update the barriers that affect it. Angular v5.0 deprecated feature listing is –

• Since Angular 4.0, NgFor was taken off, so Angular developers use NgForOf. Fortunately, *ngFor is not affected.
• ReflectiveInjector is replaced by Injector.create.
• Import NgProbeToken from @angular/core instead of @angular/platform-browser.
• ngGetContentSelectors() was deprecated in v4 and now removed even, but is replaced by ComponentFactory.ngContentSelectors.
• <ng-template> is used instead of enableLegacyTemplate. It is expected that enableLegacyTemplate and <template> both will be removed in v6.
• Opaque Token and other such APIs that are deprecated in the previous version is removed in this v5.0.

Comparing all versions of Angular

This can may be considered as a basic difference between Angularjs (Angular 1) and Angular (Angular 2 and onwards).

Core variance is – AngularJS is based on JavaScript with controllers, directives while all others are rewritten in Typescript with components. Angular 2,4 & 5 can be considered as the add-ons with more improvements and advancements in the existing feature listing like mobile support, better performance efficiency and major support to languages like ES5, ES6, Dart.

Bug fixes and Beta Versions

The team of Angular is constantly active. Even though v5.0 is introduced recently, still they came up with major bug fixes in version 5.1.0 and 5.1.1 this December. Story doesn’t end up here. Also, new version – 5.2.0 beta version is introduced and much more upgrades are expected in the upcoming span.

In March or April 2018, it is expected for Angular 6 to come up with same themes alike Angular 5 also providing easier, smaller and quicker web development services. No more rumors or tech talks are still out that justifies the expected features listing coming up in Angular v6.0.