Angular 5.0.0 Pentagonal Donut, is finally out!

The tech industry has an insatiable appetite for the ability to look beyond what one could ever imagine. As these technologies continue to escalate, the present and upcoming years are set to cater technical progress and innovation in the development space. But the only issue with these upcoming technologies is that once you get to know, the next challenge in-line is the decision to adopt it. And this is a point where the most of the people get into a dilemma. The following post is meant to scale down your maximum uncertainties regarding the new “Pentagonal-Donut”, i.e. Angular 5.0.0.

Recently, the latest version 5.0.0 of Angular, pentagonal-donut was released incorporating a set of attention-grabbing features and bug fixes with a sole focus on making Angular smaller, faster and easier in terms of use. Known as the “5” version, the recent upgrade is actually the fourth release for the framework, as the first version, Angular was released way back in 2012. The new release took quite longer than expected, but it was worth the wait! Let’s find out how?

What’s new in Angular 5.0?

Built and maintained by Google, the platform mainly combines declarative templates, end to end tooling and dependency injection with best practices to solve ample of development challenges. Google Adwords, Google Fiber, Adsense, and Winc are some of the most well-known web platforms that make use of Angular to build their interfaces. Announced to the world on November 1, 2017, Angular 5.0.0 brings an array of design-enhancing features to the table. Now being an AngularJS developer, I can go on and on specifying each and every feature in-depth. Due to some space constraint, I would end up shedding some light for why you should care about the Angular 5 release and what one needs to watch out for!

Its Key Features Include:

Progressive Web Applications get simpler

There has already been a lot of spotlight and geek speaks on building PWA and its advantages. The release of Pentagonal donut can be considered as a fruitful attempt to simplify the process of PWA making.  Not only that, it is now even possible to get the features of native mobile applications incorporated with the trending mobile web apps such as push notifications and offline experience. Besides, creating code and configuration with Angular-CLI has now become feasible.

Build Optimizer

The build optimizer tool makes application lighter and faster by simply removing extra runtime code and all the unnecessary parts. Due to which the size of the JavaScript ultimately decreases making the application better. Technically speaking, build optimizer has two main jobs, one is to mark parts of your application as pure, which means removing all the additional parts especially the ones which aren’t needed. Secondly, Angular decorators aren’t removed from the application’s runtime code. Both the jobs end up decreasing the size of your JavaScript bundles and increasing the boot speed of your application for your end-users.

Angular Universal State Transfer API and DOM

Another interesting feature is Angular Universal State Transfer API and DOM. This means you can now easily share application state between the server side and client side versions of your application. Furthermore, the team has added ServerTransferStateModule and the corresponding BrowserTransferStateModule that allows you to generate information as part of your rendering with platform-server. So that it can be easily transferred to the client side. By doing this the information does not need to be regenerated. Apart from this, the addition of Domino to platform-server turns out to be a great achievement. In a layman’s language, Domino means support for more DOM manipulations out of the box within server-side contexts. This also leads to improvement in the support for 3rd party JS and Component libraries especially the ones which aren’t aware of server-side.

Compiler & Typescript Improvements 

A lot of improvements have been made when it comes to the Angular compiler. Due to which faster rebuilds, especially for production builds and builds with AOT has now become possible. The Angular team has also added features to the Decorators and made it possible to ship smaller bundles by removing whitespace.

Introduced in Angular 2.0, Typescript has also been upgraded with the latest versions. It may quite interest you to know that a new feature introduced as part of TypeScript 2.3. This enables us to connect into the standard TypeScript compilation pipeline.

All you need to do is run ng serve with the AOT flag turned on.

ng serve --aot

You must at least give a try! The new compiler pipeline is supposed to save 95% of the build time, i.e. more than 40 seconds to less than 2 seconds on our development machines.

Internationalized Number, Date, and Currency Pipes

The new version arrives with new number, date and currency pipes that result in increasing standardization across browsers and eliminating the need for i18n polyfills. With the help of CLDR, these pipes are able to provide an extensive support and configurations for any locales that you aim for. In order to use the old pipes, you will have to import the DeprecatedI18NPipesModule after the CommonModule.

import { NgModule } from '@angular/core';
  import { CommonModule, DeprecatedI18NPipesModule } from '@angular/common';
 @NgModule({
    imports: [
      CommonModule,
      // import deprecated module after
      DeprecatedI18NPipesModule
    ]
  })
  export class AppModule { }

Upgrading to Angular 5

A nifty tool has been built to make upgrading as easy as possible.

Coming up Next

Obviously, its Angular 6 is on the horizon. However, you will have to wait until March or April 2018. In the meantime, you can explore plenty other exciting goings-on in the Angularverse such as the Angular Labs concept.