{"id":52294,"date":"2017-11-07T13:45:51","date_gmt":"2017-11-07T08:15:51","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=52294"},"modified":"2017-11-14T14:09:09","modified_gmt":"2017-11-14T08:39:09","slug":"moving-to-angular-5-find-out-yay-or-nay","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/moving-to-angular-5-find-out-yay-or-nay\/","title":{"rendered":"Moving to Angular 5? Find out Yay or Nay!"},"content":{"rendered":"

AngularJS is quickly evolving and we have witnessed two major updates in the past 14 months. Now, this popular JavaScript framework has set a new milestone with its major release of Angular 5.0 on November 1, 2017.\u00a0T<\/span>he progressive web apps and material design powered by Google will be however available in the next few days.<\/p>\n

The all-new Angular 5 has exciting new features and fixes to previous bugs aimed at making Angular more compact, simplify its use and reduce the code size.\u00a0<\/span><\/p>\n

Here is the breakdown of all the new changes that Angular 5 brings to the table:<\/strong><\/h2>\n

Build optimizer:<\/b><\/h3>\n

The all-new Angular 5 comes with a build optimizer by default. It is a tool that performs additional <\/span>optimizations on builds, including better tree shaking. It is a command-line tool which decreases the size of the application by chucking away the waste lines of code or code not required.\u00a0<\/span>This will ultimately improve or increase the boot speed of the application for the end user.<\/span><\/p>\n

Material Design components are more compatible:<\/b><\/h3>\n

With Angular 5, the material design components\u00a0have become more user-friendly with server-side rendering. However, there are certain issues that Google is still fixing.\u00a0<\/span><\/p>\n

Progressive Web Apps:<\/b><\/h3>\n

Progressive Web Apps<\/a> deliver a rich user experience for all the mobile devices making them more engaging, reliable and fast. PWA is an allied between Mozilla and Google which aims at developing a browser-based application\u00a0providing a native-like experience.<\/span><\/p>\n

In the new version of Angular, Google has given\u00a0an\u00a0attention to making it easier for development teams to build PWA and this allows the apps to get cached in the browser. However, Google is working on building support for making CLI (Command in Line ) more capable. <\/span>\u201cWe\u2019re trying to find the right set of defaults so that it just would be the default option for most developers, for both desktop and mobile web,\u201d said Brad Green, a Google engineering director.\u00a0<\/span><\/p>\n

Improving the compiler:<\/b><\/h3>\n

The compiler is an essential part of the Angular framework<\/a>, which has been improved with the latest version of Angular and is now being operated as TypeScripts transform to enable faster builds and rebuilds. Moreover, it will now <\/span>support the incremental assembling way better than before.\u00a0<\/span><\/p>\n

ReflectivesInjector replaced by StaticInjector:<\/b><\/h3>\n

The ReflectivesInjector has been replaced by StaticInjector so as to eliminated more polyfills, which as a result will make the application size concise for developers.<\/span><\/p>\n

Before<\/em><\/strong><\/p>\n

ReflectiveInjector.resolveAndCreate(providers);<\/span><\/p>\n

After<\/em><\/strong><\/p>\n

Injector.create(providers);<\/span><\/p>\n

Pipes for the international number, currency, and dates:<\/b><\/h3>\n

Angular 5<\/a> introduce pipes for the international number, currency, and dates. As a result, this will increase the standardization across browsers and eliminated the <\/span>dependency on i18n polyfills by making use of their own implementation for these pipes.<\/span><\/p>\n

HttpClient:<\/b><\/h3>\n

HTTPClient was introduced in Angular 4.3, which is now updated with the new version of Angular 5. The all-new updated version of HTTPClient is making the developers deprecate the previous @angular\/http library. In order to update HttpClient, developers need to replace HttpModule with HttpClientModule from @angular\/common\/http in each of the modules, inject the HttpClient service, and \u00a0eliminate any map(res => res.json()) calls, which are no longer required. \u00a0\u00a0<\/span><\/p>\n

Support for Sharing Codes:<\/b><\/h3>\n

With angular 5, sharing codes between client side and server side version of the application are now much easier. For this to happen, Google has introduced Angular Universal State Transfer API and DOM support. Angular Universal provides a support to the developers in order to perform server-side rendering of Angular applications. In a way to add support to the crawlers and scrapers which does not support JavaScript, developers have to first render their Angular application on the server and then they can bootstrap the application on top of the generated HTML. This will increase the overall performance of the application.<\/span><\/p>\n

RxJS Reactive Programming Library update:<\/b><\/h3>\n

With the new update, developers would become easy to eliminate the side effects of previous patch method of importing operators of code-splitting and tree-shaking problems. This new way of using \u00a0RxJS is called \u201c<\/span>lettable operators<\/span><\/a>\u201d. Also in addition to this, the ECMAScript module helps the RxJS to distribute the version. Moreover, the new Angular CLI will pull in ECMAScript by default. <\/span><\/p>\n

So now instead of<\/i><\/b><\/p>\n

import { Observable } from ‘rxjs\/Observable’;<\/span>
\n<\/span>import ‘rxjs\/add\/operator\/map’;<\/span>
\n<\/span>import ‘rxjs\/add\/operator\/filter’;<\/span>
\n<\/span>names = allUserData<\/span>
\n<\/span>.map(user => user.name)<\/span>
\n<\/span>.filter(name => name);<\/span><\/p>\n

The following would be used now <\/i><\/b><\/p>\n

import { Observable } from ‘rxjs\/Observable’;<\/span>
\n<\/span>import { map, filter } from ‘rxjs\/operators’;<\/span>
\n<\/span>names = allUserData.pipe(<\/span>
\n<\/span> \u00a0map(user => user.name),<\/span>
\n<\/span> \u00a0filter(name => name),<\/span>
\n<\/span>);<\/span><\/p>\n

Easy Migration for the Users:<\/b><\/h3>\n

Angular 5 have added multiple names for components and directives. This will give\u00a0an advantage to the users as they can migrate easily. It is possible to add a new name in the Angular mircosyntax without breaking the existing code and this can be done by exporting a directive with multiple names.<\/span><\/p>\n

Angular Forms:<\/b><\/h3>\n

For many applications, forms play an important part and with Angular Forms, it becomes easy for developers to take control of the validation and value updates on \u2018blur\u2019 or on \u2018submit\u2019 instead of every input event.<\/span><\/p>\n

The Router:<\/b><\/h3>\n

There has been an addition of new lifecycle events to the router in order to allow the developers to track the router cycles from the start of running guards until completion of activation. Following are the new events:<\/span><\/p>\n