Angular 5 was finally released after several delays yesterday, November 1, 2017. It was also accompanied by Angular CLI 1.5. This is a major release and in line with Angular team promise of major releases twice a year. It focusses on making Angular application smaller, faster and easier to use.

How to upgrade

The Angular Team has built a tool to guide you through the upgrade process from any version of Angular. The tool can be found here.

What’s new?

HTTPClient

Angular introduced HTTPClient in Angular 4.3 found inside @angular/common. The team has marked the original @angular/http for deprecating in Angular 5. If you will upgrade to Angular 5, you will need to update your http to the new one found in @angular/common which is better than the deprecated one.

Build Optimizer

This will be turned on by default in Angular 5. Build optimizer is included in Angular CLI for making your application bundle much smaller by understanding your application. This is done by removing unnecessary parts of your application while also retaining all the necessary parts. It also removes Angular decorators from your application’s runtime code. Decorators are used by the compiler, and aren’t needed at runtime and can be removed. Each of these jobs decrease the size of your JavaScript bundles, and increase the boot speed of your application for your users.

Compiler Improvements

The Angular team has made improvements to Angular compiler to support incremental compilation. This in turn increases the speed of rebuilds especially for productions and build using AOT flag. Also, Angular compiler operates as typescript transform, increasing the rebuilds speeds when using TypeScript 2.3.  You can take advantage of this by using the AOT flag.

ng serve -AOT

“When performing an incremental AOT build of https://angular.io, the new compiler pipeline saves 95% of the build time (from more than 40 seconds to less than 2 seconds on our development machines).”

Large projects with over 1000 components might not benefit from incremental compilation, it’s a known issue. This will be turned on by default to everyone on future versions of Angular CLI as soon as its evident that everyone can benefit from the increased speeds. On top of all that, you can now choose whether you want whitespaces in your application can be preserved on not. The norm has been to preserve them faithfully. You can specify this as part of each component’s decorator, where it currently defaults to true.

@Component({
  templateUrl: 'about.component.html',
  preserveWhitespaces: false
}
export class AboutComponent {}

Improved Decorator Support

Angular now support expression lowering in decorators for lambdas and the value of useValue, useFactory and data in an object literal. This allows you to use values that can only be calculated at runtime in decorators for expressions that are lowered. You can now use a lambda instead of a named function, meaning you can execute code without affecting your d.ts or your public API.

Internationalized Number, Date, and Currency Pipes

Angular will stop relying on the browser API to provide international numbers, dates and currency formatting. This forced developers to rely on polyfill to ensure consistency across all browsers. Instead, the Angular Team has created its own implementation relying on CLDR to provide extensive locale support and configurations for any locales you want to support. You can learn more about this here.

Angular Universal State Transfer API and DOM Support

Angular universal is a project focused on helping developers perform server-side rendering (SSR). This means you can use your server to render your application and then bootstrap on top of the generated code. This is good news to developers as you can now add support for scrappers and crawlers that don’t support JavaScript. It can also boost your application speed leveraging your server capabilities and use of a cache to avoid re-rendering of static pages on request. On top of that, Angular team has added ServerTransferStateModule and BrowserTransferStateModule.

This module will allow you to generate information as part of your rendering with platform-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 your application fetches data over HTTP. By transferring state from the server, this means developers do not need to make a second HTTP request once the application makes it to the client.

The documentation for this will come soon. Also, the Angular Universal Team has added domino to platform server. Domino adds more DOM manipulations out of the box in the server side and has improved Angular support for 3rd party JS and components that are not server side aware.

Other Changes

1. Replaced the ReflectiveInjector with StaticInjector
2. Zone speed improvements
3. Added support for multiple names for your components / directives.
4. You can now run validation and value updates on blur or on submit, instead of on every input event.
5. Angular is now compatible with RxJS 5.5 – The latest version
6. Added new lifecycle events to the router, allowing developers to track the cycle of the router from the start of running guards through to completion of activation.

For more information, visit the official blog announcement here.