Dispensing all the speculations regarding its delayed launch, Angular 5 was released successfully in last November. Angular 5 succeeds the version 4.4.0, and is focused on making the framework lighter, faster and easier to use. Angular 5 is a popular JavaScript MVW framework that supports the creation of progressive web applications, and comes with an improved Compiler and Typescript and has a build optimizer tool.

This post will take you through the major changes that has occurred in version 5.

  1. Cuts out Http, recommends HttpClient

Prior to Angular version 4.3, the @angular/http module was used for making HTTP requests in Angular applications. Version 5 of Angular has denounced Http. The HttpClient API from @angular/common/http package that was shipped in version 4.3, is now recommended for use in all applications. HttpClient also supports a parameter object for headers and parameters. This saves the typing effort, as you can see here:

http.get("/api", {
    headers: {
        "X-DEMO-HEADER": "demo"
    },
    params: {
        "foo":  "bar"
    },
})
  1. Supports exporting a component with multiple names

Angular 5 offers the provision to do multiple export alias. While exporting, you can now give multiple names to your components and directives. This enables your users to migrate without breaking changes.

Check out this example:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  exportAs:'dashboard, logBoard'
})
export class AppComponent {
  title = 'app';
}
  1. Doing away with i18n polyfills

Angular 5 eliminates the need for i18n polyfills. Since it arrives with new number, date and currency pipes, it increases standardization across browsers. Localization supported by Angular is based on the export of data from Unicode Common Locale Data Repository (CLDR).

For instance, the default is US-English locale “en-US”. If you require another location or language, you need to import it on the first place.

In this case, the code given below is necessary to import the German locale “de” (equivalent to “de-DE” in the Intl-API) in the AppModule:

import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
  
registerLocaleData(localeDe);

The imported location can now be used as usual:

@NgModule({
  // ...
  providers: [{provide: LOCALE_ID, useValue: 'de'}]
})
export class AppModule{}
  1. Router Lifecycle Events

Angular 5 has introduced some new lifecycle events to the router. The events include GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationEnd, and ChildActivationEnd.

These events support developers to closely track the cycle of the router, right from the beginning, that is from running guards through activation completion.

For example, the implementation of a spinner could appear as shown below:

router.events
    // Event = RouteEvent | RouterEvent
    .filter(e => e instanceof RouteEvent)
    .subscribe(e => {
        if (e instanceof ActivationStart) {
            spinner.start();
        } else if (e instanceof ActivationEnd) {
            spinner.end()
        }
    });
  1. Animations Package

Angular 5 has animations package extended with several syntax ingredients. It uses two transition aliases to respond to numerical value changes, named :increment and :decrement for animating corresponding transitions. Take a look at the following code to see how it works:

@Component({
    animations: [
        trigger("counter", [
            transition(':increment', [ /*...*/ ]),
            transition(':decrement', [ /*...*/ ]),
        ])
    ],
    template: `
    <span [@counter]="count">
    `
})
class MyComponent() {
    count = 1;
}
  1. Angular 5 Compiler is faster

The Angular 5 compiler is faster than its previous versions. Optimizations to the compiler improves execution. It leverages TypeScript transforms. You can take advantage of the compiler by running the following code.

ng serve --aot
  1. Validating Forms in Angular 5

Angular 5 forms offer us the ability to decide when the validity and value of a field or form are updated via on blur or on submit, instead of every input event.

Two examples are given below:

<input name="nickName" ngModel [ngModelOptions]="{updateOn: 'blur'}">

Second example:

<form [ngFormOptions]="{updateOn: 'submit'}">

In the case of Reactive forms, check out the following option:

ngOnInit() {
  this.newUserForm = this.fb.group({
    userName: ['Bob', { updateOn: 'blur', validators: [Validators.required] }]
  });
}
  1. Support for TypeScript 2.4

Angular 5 now extends formal support to TypeScript version 2.4. Since its release of version 4.3, Angular has offered error-free support to TypeScript 2.3. This includes the Strict-Null-Check option.

String-based enums are introduced in TypeScript 2.4. This means that the members of an enum can now be expressed with a string instead of a number. Take a look at the following example.

enum Colors {Red = "RED", Green = "GREEN", Blue = "BLUE",}

In the above case, the string enums cannot be mapped backwards like their number-based relatives. Therefore, a query like Colors [“RED”] cannot catch the string “Red”.

  1. Advanced Build Optimizer

We have already discussed that Angular 5 is designed to be faster, lighter and easier to use. In Angular 5, production builds are created with Angular CLI. This applies the build optimizer by default. The build optimizer helps in increasing the boot speed of your application. It reduces the size of your bundle by removing decorators from application’s runtime codes. Using tree-shaking, build optimizer also removes part of your application that is not required during runtime. With a decreased bundle size, your application runs faster.

  1. Other major changes in Angular 5

Some of the APIs in Angular 4 have been labelled “deprecated” and therefore, are not appearing in Angular 5:

  • The OpaqueTokenis replaced with InjectionToken
  • Removed the parameter constructor of the ErrorHandler
  • ngOutletContext has been removed from NgTemplateOutlet
  • The values “true”, “false”, “legacy_enabled” and “legacy_disabled” are no longer accepted. The Angular Router accepts values only as “enabled” and “disabled” for the parameter initialNavigation.
  • Instead of i18n comments, the ng-container element should be used.
  • In Angular 4, the <template> element was deprecated and <ng-template> was used instead. Hence Angular 5 compiler no longer uses the enableLegacyTemplate by default. Further to this, in Angular 6, the <template> element and the enableLegacyTemplate option will be removed.
  • To support the new @angular/common/http module, the angular/http module has been marked as “deprecated”.
  • The StaticInjector is now used instead of ReflectiveInjector for dependency injection.
  • Injector.create should be used in places where ReflectiveInjector.resolveAndCreate was used before.

 

Meet the next: Angular 6

Angular framework version 6 is expected to roll out in April 2018. While we do not have an idea on the precise features of the new version, Angular team makes it clear that the new version’s focus is to make the applications even faster in terms of runtime and more compact in terms of delivery.

Which feature of Angular 5 did you like the most? Share your thoughts in the Comments section of this blog.

Posted by Surjith P

Surjith is a Senior Software Engineer at Zerone Consulting. He is an enthusiastic developer who loves to explore and write about technology. He has a vast experience in Microsoft technologies. Currently, he is focusing on Angular and Ionic frameworks.

Leave a Reply