What's New Introduced in Angular 5

In the last month, the Angular team has launched its next major version which is Angular 5, the new version of the well-known Front-End web framework for web applications development and angular services.
This version is part of Google's plan to launch a new "big" review every 6 months, although sometimes the news is rather scarce. It is not what happens on this occasion, in which version 5 brings many new things and some of them of some importance.

Let's see what's new upgrades introduced in the Angular 5.

HttpClient

In version 4.3 was launched HttpClientwithin @angular/commonas a smaller, simpler and more powerful way to make web requests in Angular. From this new version, Google recommends using it HttpClient for all applications, and stop using the "traditional" library @angular/httpthat is marked as obsolete.

To update to,HttpClient it is necessary to replace in all the modules HttpModuleby HttpClientModule(that is in @angular/common/http), inject the service HttpClientand eliminate all the calls from,map(res => res.json()) that is no longer necessary.

This was one of the great changes already expected since the release of 4.3 and we have finally seen how it has materialized.

New events in the life cycle of the router

New lifecycle events have been added to the router, allowing developers to track the router's cycle from the start of execution to the end of activation. These events could be used for things such as showing the typical spinner (progress element) on a specific router when a child component is being updated, or for measuring the resolution performance of a route.

New events in order of release are, GuardsCheckStartChildActivationStart,  ActivationStart, Guards check End Resolve Start Resolve End, Activation End, and Child Activation End.

An example of using these events to start/stop an element of progress could be:

Compiler improvements

This version improves the Angular compiler to support incremental compilation. This provides faster re-builds of the applications, especially for production builds and compilations with AOT ( Ahead Of Time ). Functionality has also been added to code decorators, and it is now possible to send smaller bundles, eliminating blank spaces.  

TypeScript Transformations

Under the hood, the Angular compiler now functions as a TypeScript transformation, which makes incremental reconstructions much faster. TypeScript transformations were a new feature introduced as part of TypeScript 2.3 that allows you to stick to the standard TypeScript compilation pipeline.

You can take advantage of this by executing ng servewith the AOT flag activated:

You should test it since this will become the default action in a future version of the CLI. There are some known speed problems with projects with more than a thousand component. With this, projects of all sizes will experience these improvements.When performing an incremental AOT compilation of angular.io , the new compilation process decreases the compilation time by 95% (from more than 40 seconds to less than 2 seconds in the development machines of the Angular team).
The goal was to convert the AOT compilation into something fast enough to be able to use it in development time, eliminating the differences sometimes found when putting the apps into production for the first time. That's why it will be enabled by default in a future version of the CLI.As part of this transition to transformations, we no longer need genDir, and it outDirhas changed: now we are always issuing generated files for packages in node_modules.

Preserve the blanks

Until now the compiler faithfully recreated the tabulators, line breaks and template spaces and included them in their compilation. Now we can choose if we want to keep these blank spaces from our components.
We can specify this as part of the decorator of each component, trueits value being default:

Or we can specify it for the entire application in the file ,tsconfig.json  where it is also predetermined as true
In general, specifications at the component level override the specifications of the entire application. In the future, the Angular team expects to set the default value false to save those spaces by default, so keep that in mind. Of course, the labels <pre>are handled intelligently and never touch.

Build Optimizer

Starting with this version 5.0.0, production compilations created with the CLI will now apply the build optimizer by default.
The compiler optimizer is an addition to the command line tool to reduce the resulting packages, using a semantic understanding of your angular application. The compilation optimizer has two main jobs. First, you can mark parts of the application as "pure", which improves the "Tree-Shaking" provided by the existing tools, eliminating additional parts of the application that are not necessary.

The second thing the compiler optimizer does is to remove the Angular decorators from the runtime code of your application. Decorators are used by the compiler, and are not necessary at runtime, and therefore can be deleted.
Each of these works decreases the size of the JavaScript packages and increases the speed at which the application starts.

CLI v1.5

Starting with v1.5 of the Angular CLI, support for Angular v5.0.0 has been added and projects v5 will be generated by default. In addition, in this new version, the compilation optimizer has been activated (see the previous point) by default, so that developers can benefit from smaller final packages.

Angular API Universal State Transfer and DOM support

Now you can more easily share the status of the application between the server-side and client-side versions of the application.
Angular Universal is a project focused on helping developers to perform the server side representation (SSR: Server Side Rendering ) of Angular applications. By rendering the applications on the server and then bootstrapping the generated HTML, we can add support for crawlers that do not support JavaScript and can increase the perceived performance of your application.

In 5.0.0, the Angular team has added Server Transfer State Module and the BrowserTransfer State Module corresponding one. This module allows you to generate information as part of the representation on the server, and then transfer it to the client side so that this information does not need to be regenerated. This is useful for cases such as when our application obtains data through HTTP. When transferring server status, this means that developers do not need to make a second HTTP request once the application reaches the client.

Another change that comes from the Angular Universal team is the addition of Domino, a DOM server-side simulator with Node.js. Domino means that we support more ready-to-use DOM manipulations in server-side contexts, improving our support for JS libraries and third-party component libraries that are not up-to-date on the server side.

Internationalization of pipelines for numbers, dates and currencies

Angular 5 has introduced new pipes for numbers, dates and currencies that increase the standardization of the process of internationalization between browsers and eliminate the need to use polyfills to achieve it.In previous versions of Angular each browser was used to obtain the appropriate format for these types of data, which caused users to see inconsistent results between browsers and, to correct it, it was necessary to use polyfills that always generated the same result.

In Angular 5.0.0 the pipes have been updated to use an own implementation, relying on the CLDR to provide ample support of local configurations and the regional configurations that you may need. Here is a spreadsheet that compares the behaviour of these pipes between versions 4 and 5.
If you do not want to use these new pipes yet, you can import the module DeprecatedI18NPipesModuleto access the previous behaviour. You can get more details about the changes in the Angular 5 changelog .

It is replaced ReflectiveInjector with StaticInjector

To eliminate even more polyfills, it has been replaced ReflectiveInjector with the new one StaticInjector. This injector no longer requires the polyfill, Reflect which reduces the size of the application for most cases.

Before you used:

Now:

Zone speed improvements

In Angular 5.0.0 the zones are faster by default, and it is even possible to completely avoid some areas in case our application needs a great performance.

To avoid the zones, we can start the application with noop a value for ngZone:

You can see a complete example in the ng-component-state project .

ExportAs

Added support for multiple names for the same component or policy. This can be very useful to help our users to migrate the component without breaking the application.This functionality has already been used as part of the Angular Material project, when the prefixes were changed, and can also help other component authors:

Forms

Angular Forms adds update On Blur / Submit

Forms are a very important part of many applications, and if they have some kind of validation that is done on the server side or validations trigger heavy server processes that would be advisable to run less often. For this reason, it is now possible to execute validations and updates of values in the event bluror in,submit instead of in each entry event. In this way, we can take control of the emporización of the validations and of the change of values at the level of control or a complete form.

In addition, we can now specify asyncValidators directly in the options object, instead of specifying it as a third parameter.

Template-based forms

Before we wrote:

Now we can write:

or even:



Reactive forms

Before_

 Now:


RxJS 5.5

Angular now uses RxJS 5.5.2. This recent version of RxJS allows you to avoid the side effects of the previous import mechanism with a new way to use RxJS called "lettable operators". New, operators eliminate side effects and code division problem and tree shaking that existed previously with the method to "patch" the import of operator.

we can exclude:

Now we can write:

In addition, RxJS now distributes a version that makes use of ECMAScript modules. The new angular CLI includes this version by default, which will result in considerable savings in package size. But even if we are not using the Angular CLI we should aim for this new distribution.

Migration assistance and precautions

Angular 5.0.0 is an important update within the Front-End library and includes some important features, performance improvements and some features that have been marked as obsolete. As promised, the people of Google have launched a small migration tool that helps you in the process of passing an app from Angular 4.x to 5.0.0. It should not be too complicated to make such a migration.

There are some unresolved incidents which will be addressed in future patches. The most important is that sometimes you can produce source code maps that can cause errors which I think is not very important and version 5.0 is ready to be used in production.

Conclusion:

Angular 5 came loaded with new features and significant improvements. It is smaller and faster.The Angular team has done a fantastic job on the angular 5 and improved the AngularJS development to great extent.
The next major version of Angular is planned for March or April 2018 and shall become the framework version 6. Even though the exact features have yet to be determined, the Angular team already has announced that the latest version’s focus applications should be even faster at runtime and more compact in delivery. Until then, it’s likely that experiments from the Angular-Labs will be stable and adopted into the framework or AngularCL.

Check Our trending Blog on : Should I Use Angular 1 Or Angular 2?