Codementor Events

Everything You Need to Know about Angular 5.0

Published Nov 10, 2017
Everything You Need to Know about Angular 5.0

One of the biggest problems Angular faces is market validation. It became instantly popular with developers when released (AngularJS 1.0). However, five years down the line, it faces stiff competition from React, Vue, and other lightweight JavaScript libraries.

Furthermore, Angular 2 taking a massive three year development cycle made developers question the reliability of the framework. To add to that, the debatable architectural decisions just made matters worse.

However, to keep up with the competition in the JavaScript ecosystem, Angular decided to move swiftly with the development of its framework and release a major release every six months. In keeping with that, Angular has launched the next major release — Angular 5.0.

While the team definitely lived up to the estimated timeline, it released just a few new features and necessary bug fixes, making us question whether this is indeed worthy of being called a major release.

Here are 8 new features of Angular 5.0 that you should know about

Build Optimizer:

With Angular 5.0, production builds created with the Command-Line Interface will now apply the build optimizer directly. This will help make the bundles even smaller using the Angular application's semantic understanding.

The build optimizer marks parts of the application as pure, thereby improving the tree shaking provided by the existing tools and removing additional parts of the application that aren’t needed.

Additionally, the build optimizer removes Angular decorators from the application’s runtime code, once again reducing the size of the bundles and also increasing the boot speed of the application.

Angular Universal State Transfer API:

Angular 5.0 allows developers to share application state between the server side and client side versions of the application. Developers can now perform server side rendering (SSR) of Angular applications and add support for scrapers and crawlers that don’t support JavaScript.

The ServerTransferStateModule and the BrowserTransferStateModule enable generation of information as part of the rendering with platform-server and then transfers it to the client side so that this information does not need to be regenerated.

Also, the addition of Domino allows support for more DOM manipulation out of the box within server side contexts. This would improve the support for third party JS and Component libraries that aren’t server-side aware.

Compiler Improvements:

The Angular compiler now supports incremental compilation. This means faster rebuilds, especially for production builds and builds with AOT.

Improved Decorator Support:

Angular 5.0 supports expression lowering in decorators for lambdas and the value of useValue, useFactory, and data in object literals. This allows the use of values that can only be calculated at runtime.

Internationalized Number, Date, and Currency Pipes:

Angular 5.0 eliminates the need for i18n polyfills using the new number, date, and currency pipes. These also increase standardization across browsers.

StaticInjector:

Rhe ReflectiveInjector has now been replaced with the StaticInjector. This injector no longer requires the Reflect polyfill, reducing application size for most developers.

Before
ReflectiveInjector.resolveAndCreate(providers);
After
Injector.create(providers);

HttpClient:

The HttpClient used in version 4.3 to make web requests in Angular is now the default for Angular 5.0.

New Router Lifecycle Events:

The new lifecycle events in the router allows developers to track the cycle of the router from the start of running guards through to the completion of activation.

Conclusion:

The Angular 5.0 release may not have remarkably striking features, but it indeed makes life simpler for Angular developers. If you are planning on migrating your application to Angular 5.0, you can refer to the Angular Update App for quick instructions.

Discover and read more posts from Jonathan Pereira
get started