What to Expect in Angular Version 5.0.0

0
649
Angular Version 5 0

Angular Version 5 0

Angular Version 5.0.0 : Features, changes and improvements to expect.

Angular version 5.0.0, Pentagon-donut, was released on 1st November 2107, in an ongoing effort by the Angular team to increase uptake and make Angular smaller, faster and easier to use by developers. The new release comes with multiple new features as well as major bug fixes and compatibility features.

In this article, we are going to take a look at the change log of the new Angular 5.0.0. which includes new features that have been enhanced and which have been scrapped.

1) Build Optimizer
In Angular 5.0.0, the CLI by default will apply the build optimizers on all production builds. The build optimizer tool aims at making your Angular application bundles smaller. It achieves this by first understanding the semantics of the Angular application, and marks the parts of the code that are pure and automatically removes the parts of code that are not required. Also, the build optimizer is able to get rid of Angular decorators from the runtime code of your application. By doing this, the build optimizer is able to decrease the size of the JavaScript Bundles in your application which translates to faster boot speeds for your application.

2) Angular Universal State Transfer API and DOM Support
In Angular 5.0.0, the developer can now easily perform server side rendering(SSR) of their applications, with the help of Angular Universal, which is a project that will facilitate easier sharing of application state between the server and client end versions. This will enable the developers to increase perceived performance of their applications by adding support for scrappers and crawlers that are not compatible with JavaScript through the server side.

The Angular team has added ServerTransferStateModule and corresponding BrowserTransferStateModule

The modules provide the developer with information regarding the platform-server rendering, and transfers the information to the client end. This means that the developer is only required to make a Single HTTP request after transferring the state from the server unlike previously where two requests were necessary.

Domino has also been added to the platform-server. The inclusion of Domino makes Angular 5.0.0 compatible with DOM manipulations on the server side which improve 3rd party JavaScript and Component libraries support for Angular applications.

3) Major Compiler Improvements. (CLI v1.5)
With release of Angular 5.0.0, comes the release of CLI v1.5 to support it. The CLI will generate v5 projects by default.

The compiler supports incremental compilation and Ahead of Time compilations (AOT). The overall effect of this is that rebuilds are faster for production builds, where the CLI with the build optimizer, results in smaller bundles. Also the compiler can operate as a Typescript transform, which also significantly increases the speed of incremental rebuilds. To turn on this feature, run the command mentioned below, with the AOT flag turned on.

Tests have shown that the new compiler pipeline is able to save upto 95% of the build time. By making AOT compilations faster, it is hoped that the developers will not face differences especially when going to production for the first time. The Angular team is hoping that in the future releases of the CLI, it will turn AOT on by default.

4) Whitespace Preservation.
In previous versions of Angular, the compiler has been automatically including tabs, new lines and spaces in the build. However in Angular 5.0.0, you can choose whether to preserve the white spaces in your applications and components or not.

For application wide preservation of the whitespaces, by default is set true, but if you need it to be off, you can specify in your tsconfig.json.

In future, the Angular team hopes to turn the default to false, which will by default result in less space usage.

5) Internationalized Number, Date, and Currency Pipes
In earlier versions of Angular, the developer relied on the browser to provide number, date and currency formatting by using the I18N APIs. In Angular 5.0.0, the number, date and currency pipes have been updated and a new built included which will hopefully increase standardization and reduce dependencies on the I18N polyfills which at times result in inconsistent results across different browsers, hence affecting the users experience.

The new pipes will be relying on CLDR so as to provide a wide locale support and configurations for any location that the developer needs to set.

However a developer who prefers to continue using the I18N polyfills, can do so by importing DeprecatedI18NPipesModule

6) StaticInjector
StaticInjector has been added to replace the ReflectiveInjector. The aim of this is to reduce further the reliance on polyfills. The StaticInjector does not require the Reflect polyfill, which in turn reduces the size of the applications due to less polyfills.

Previous versions of Angular.
ReflectiveInjector.resolveAndCreate(providers);

Angular 5.0.0.
Injector.create(providers);

7) Zone speed optimizations
In Angular 5.0.0, zones have been made faster by default, and now one can entirely bypass zones for performance focused applications. If you wish to bypass zones, bootstrap your project with ‘noop’ as your ngZone.

8) RxJS 5.5.2.
Previously, developers had issues with import mechanisms, in Angular 5.0.0, the use of RxJS has been set to v5.5.2 or later versions. Also a new way of using RxJS, “lettable operators”, has been developed which will resolve some of the side effects of code splitting and tree shaking problems associated with the previously used patch method of importation of operators.

RxJS also has a version that uses ECMAScript Modules. Angular CLI v1.5 by default will use this version of RxJS, which also goes a long way in saving the bundle size of the application. Developers who don’t use the Angular CLI are also recommended to use this version of RxJS.

9) New Lifecycle Events to the router.
In Angular v5.0.0, new lifecycle events have been added to the router, which will allow tracking of the cycle of the router from the start of running guards through to completion of activation. The new lifecycle events are very helpful when it comes to measuring the performance of guards and resolvers as well as when one needs information on the spinner on a specific router outlet when a child is updating.

These new lifecycle events are GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationEnd, ChildActivationEnd.

10) Improved Angular Forms
In Angular 5.0.0. it is now possible to run validation and value update on ‘blur’ or ‘submit’. Previously, this was after every input event.
Considering the importance of forms in many applications, and as the validation or value changes may trigger heavier processes within an application, it is desired that these processes only run when necessary and as less as often, hence this new improvement to Angular forms does so by taking control of validation and value changing time. Also now the developer can specify asyncValidators directly in the options object. Previously it was specified as a third parameter.

Conclusion: –
Angular 5.0.0. has been developed with a lot of emphasis on reducing bundle size, increasing boot speed, enhance standardization and increasing the ease of development of Angular applications for the developer. If one wants to update to this version, Angular Update Guide will help offer guidelines on how to go about it including how to update your already existing app and all the relevant information you may need.

LEAVE A REPLY

Please enter your comment!
Please enter your name here