top

What's New In Angular 5?

Angular, Google’s most popular JavaScript MVW framework frequently used by developers worldwide for developing desktop, mobile, and web applications finally has upgraded the version, Angular 5.0.0 on November 1, 2017, after 9 releases of beta versions. This Angular 5 release was mainly focused on making Angular framework smaller, faster, and easier to use. In this article, we will see what's new introduced in Angular 5.1. Progressive Web ApplicationProgressive Web Apps are generating much hype these days. In old versions of Angular, building PWAs were a bit complicated. But, it is now easier to build PWAs with the launch of Angular 5. With this latest version of Angular, it is now possible to get the feel like native apps with mobile web apps along with add-ons like offline experience and push notifications. This is made possible as Angular can create code and configuration on its own with Angular-CLI and it offers service workers through the @angular/service-worker.Use the following command to activate PWA support in your application:$ ng set apps.0.serviceWorker=true2. Build Optimizer toolIn Angular 5, production builds created with the Angular CLI will now apply the build optimizer by default. The build optimizer tool in Angular 5 makes the application faster and lighter by eliminating unnecessary additional parts and runtime code as well. This decreases the size of the JavaScript bundles and enhances the speed of the application.3. Angular Universal State Transfer API and DOMDomino is added to the platform-server by the Angular Universal team. It implies that more DOM manipulations are supported within server-side contexts, enhancing the support for third-party component libraries and JS libraries that aren’t server-side.  Moreover, the team has added BrowserTransferModule and ServerTransferStateModule. These modules enable you to transfer information between the server and client-side versions of the application. so that regeneration of the same information is dodged. This is helpful for developers when their application fetches data over HTTP. This means there is no need to make another HTTP request once the application reached client-side.4. HttpClientThe HttpClient was first introduced in 4.3 version and now the Angular team has made some improvements to this update with Angular 5.0. From this new version, developers are recommending HttpClient for all applications, and stop using the precious @angular/http library.To use the updated HttpClient, you should replace the HttpModule with HttpClientModule from @angular/common/http, inject the HttpClient service, and remove the map(res => rex.json()) calls that is no longer required.5. Compiler and Typescript improvementsThis new version brought a lot of improvements in Angular Compiler to make re-builds of the applications faster, mainly for AOT and production builds. And the TypeScript is also upgraded to the latest version i.e TypeScript 2.4, which allows connecting to the standard TypeScript compilation pipeline.You can use this by running:ng serve --aot6. Multiple Export AliasNow in Angular 5, while exporting you can give multiple names to your directives and components. Exporting a component/directive with multiple names can help users to migrate smoothly without breaking changes.7. Enhanced Decorator supportFor Lambdas, Angular 5 is delivered with expression lowering support in decorators, and the value of data, useFactory, and useValue are supported in object literals. Moreover, a lambda can be used as an alternative to the named function.  For example:Before Angular 5Component({    provider: [{provide: 'token', useValue: calculated()}]  })  export class MyClass {}In Angular 5Component({    provider: [{provide: 'token', useFactory: () => null}]  })  export class MyClass {}8. RxJS 5.5.2Angular 5 shipped with RxJS 5.5.2 allows you to dodge previous import mechanism side effects with a new approach to use RxJS called “lettable operators”. These new operators remove the tree-shaking/code splitting and side-effects problems that existed previously with the ‘patch’ method of importing operators.Furthermore, RxJS delivers a version that uses ECMAScript modules. By default, the new Angular CLI includes this version, saving considerably package size. You should focus on this new distribution even if you are not using the Angular CLI.9. CLI v1.5With this version of the Angular CLI, all the projects are generated by default on Angular 5. Moreover, the build optimizer is activated by default in this new version which can benefit developers from smaller packages.10. AnimationAngular 5 now came with some updates in Animations, where you can animate by using :increment and :decrement based on numerical value changes. In this version of Angular, you can activate and deactivate the animations using values that are associated with data binding. The .disabled attribute of the trigger value is constrained to do this.Conclusion:Angular 5 arrived with a bundle of new features and improvements. All these Angular 5 updates that came with very useful tools will definitely help you to build your application faster and more advanced. The Angular team has developed AngularJS to a great extent with the launch of Angular 5. Without a doubt, Angular is a superheroic framework that is valuable for both users and developers. Hope, this Angular 5 tutorial was helpful and clear for you to understand the major updates and breaking changes introduced in version 5 of AngularJS.Angular 6.0.0, the next version of Angular 5 is launched officially on May 4, 2018. This is a major release focused more on the tool chain, less on the underlying framework and on making it simpler to move rapidly with Angular in the future. We will discuss more about Angular 6 and its new features in our next blog.
Rated 4.0/5 based on 45 customer reviews
Normal Mode Dark Mode

What's New In Angular 5?

Susan May
Blog
10th May, 2018
What's New In Angular 5?

Angular, Google’s most popular JavaScript MVW framework frequently used by developers worldwide for developing desktop, mobile, and web applications finally has upgraded the version, Angular 5.0.0 on November 1, 2017, after 9 releases of beta versions. This Angular 5 release was mainly focused on making Angular framework smaller, faster, and easier to use. In this article, we will see what's new introduced in Angular 5.


1. Progressive Web Application

Progressive Web Apps are generating much hype these days. In old versions of Angular, building PWAs were a bit complicated. But, it is now easier to build PWAs with the launch of Angular 5. With this latest version of Angular, it is now possible to get the feel like native apps with mobile web apps along with add-ons like offline experience and push notifications. This is made possible as Angular can create code and configuration on its own with Angular-CLI and it offers service workers through the @angular/service-worker.

Use the following command to activate PWA support in your application:

$ ng set apps.0.serviceWorker=true

2. Build Optimizer tool

In Angular 5, production builds created with the Angular CLI will now apply the build optimizer by default. The build optimizer tool in Angular 5 makes the application faster and lighter by eliminating unnecessary additional parts and runtime code as well. This decreases the size of the JavaScript bundles and enhances the speed of the application.


3. Angular Universal State Transfer API and DOM

Domino is added to the platform-server by the Angular Universal team. It implies that more DOM manipulations are supported within server-side contexts, enhancing the support for third-party component libraries and JS libraries that aren’t server-side.  

Moreover, the team has added BrowserTransferModule and ServerTransferStateModule. These modules enable you to transfer information between the server and client-side versions of the application. so that regeneration of the same information is dodged. This is helpful for developers when their application fetches data over HTTP. This means there is no need to make another HTTP request once the application reached client-side.


4. HttpClient

The HttpClient was first introduced in 4.3 version and now the Angular team has made some improvements to this update with Angular 5.0. From this new version, developers are recommending HttpClient for all applications, and stop using the precious @angular/http library.

To use the updated HttpClient, you should replace the HttpModule with HttpClientModule from @angular/common/http, inject the HttpClient service, and remove the map(res => rex.json()) calls that is no longer required.


5. Compiler and Typescript improvements

This new version brought a lot of improvements in Angular Compiler to make re-builds of the applications faster, mainly for AOT and production builds. And the TypeScript is also upgraded to the latest version i.e TypeScript 2.4, which allows connecting to the standard TypeScript compilation pipeline.

You can use this by running:

ng serve --aot


6. Multiple Export Alias

Now in Angular 5, while exporting you can give multiple names to your directives and components. Exporting a component/directive with multiple names can help users to migrate smoothly without breaking changes.


7. Enhanced Decorator support

For Lambdas, Angular 5 is delivered with expression lowering support in decorators, and the value of data, useFactory, and useValue are supported in object literals. Moreover, a lambda can be used as an alternative to the named function.  For example:

Before Angular 5

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

In Angular 5

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


8. RxJS 5.5.2

Angular 5 shipped with RxJS 5.5.2 allows you to dodge previous import mechanism side effects with a new approach to use RxJS called “lettable operators”. These new operators remove the tree-shaking/code splitting and side-effects problems that existed previously with the ‘patch’ method of importing operators.

Furthermore, RxJS delivers a version that uses ECMAScript modules. By default, the new Angular CLI includes this version, saving considerably package size. You should focus on this new distribution even if you are not using the Angular CLI.


9. CLI v1.5

With this version of the Angular CLI, all the projects are generated by default on Angular 5. Moreover, the build optimizer is activated by default in this new version which can benefit developers from smaller packages.


10. Animation

Angular 5 now came with some updates in Animations, where you can animate by using :increment and :decrement based on numerical value changes. In this version of Angular, you can activate and deactivate the animations using values that are associated with data binding. The .disabled attribute of the trigger value is constrained to do this.


Conclusion:

Angular 5 arrived with a bundle of new features and improvements. All these Angular 5 updates that came with very useful tools will definitely help you to build your application faster and more advanced. The Angular team has developed AngularJS to a great extent with the launch of Angular 5. Without a doubt, Angular is a superheroic framework that is valuable for both users and developers. Hope, this Angular 5 tutorial was helpful and clear for you to understand the major updates and breaking changes introduced in version 5 of AngularJS.

Angular 6.0.0, the next version of Angular 5 is launched officially on May 4, 2018. This is a major release focused more on the tool chain, less on the underlying framework and on making it simpler to move rapidly with Angular in the future. We will discuss more about Angular 6 and its new features in our next blog.

Susan

Susan May

Writer, Developer, Explorer

Susan is a gamer, internet scholar and an entrepreneur, specialising in Big Data, Hadoop, Web Development and many other technologies. She is the author of several articles published on Zeolearn and KnowledgeHut blogs. She has gained a lot of experience by working as a freelancer and is now working as a trainer. As a developer, she has spoken at various international tech conferences around the globe about Big Data.


Website : https://www.zeolearn.com

Leave a Reply

Your email address will not be published. Required fields are marked *

Top comments

Sarath Nelavalli

11 May 2018 at 12:41pm
Given an awesome and valuable information.. Very easy language, any one can understand.. Finally thanks for the info.

SUBSCRIBE OUR BLOG

Follow Us On

Share on

other Blogs

20% Discount