Tutorial

Angular 5: Upgrading & Summary of New Features

Published on November 1, 2017
author

Alligator.io

Angular 5: Upgrading & Summary of New Features

Angular 5, code named pentagonal-donut, was just announced, and with it comes a few new features as well as a number of internal changes to make Angular apps smaller and faster to execute. In this post we’ll briefly go over some of the most important changes as well as pointers on upgrading. For more details, refer to the announcement blog post, and for in-depth details about all the changes, refer to the official changelog.

Performance

Here are some of the changes that Angular 5 includes to make your apps smaller and faster:

  • The Angular CLI v1.5 was also released today, and with it comes a build optimizer that’s enabled by default. The build optimizer performs a series of additional optimizations on builds, including better tree shaking.
  • The Angular compiler was also improved to enable faster builds and rebuilds. It now uses TypeScript transforms under the hood. Ahead of time and incremental builds are now possible when developing, using the --aot flag with the ng serve command. This should become the default in a future version of the CLI.
  • The intl and Reflect polyfills are no longer needed, which contributes to smaller bundles. Note that the Reflect polyfill is still needed in JIT mode.
  • There’s a new option, preserveWhitespaces, to remove non-significant white space characters from template code, which can further reduce your app’s final bundle size. The option is turned off by default, be it can easily be turned on for your entire app by adding a rule to your global tsconfig.json file and setting the option to a value of false:
tsconfig.json
{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"]
  },
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  }
}

You can also set the option granularly on a per-component basis, or override the project’s default only in specific components:

app.component.ts
import { Component } from '@angular/core';


New Features

updateOn blur or submit

A new option for form fields or entire forms, updateOn, can help with performance by telling Angular to check for validity only on blur or submit events, instead of the default change event.

For example, given a template-driven form that looks like this:

<form #newUserForm="ngForm" (ngSubmit)="onSubmit(newUserForm)">

  <label for="user-name">User Name:</label>
  <input type="text" placeholder="User name"
         required maxlength="25" id="user-name"
         [(ngModel)]="userName" name="userName">

  <button type="submit" [disabled]="!newUserForm.form.valid">
    Register
  </button>
</form>

You can now add the following to the input to have Angular check for its validity only when the input is blurred-out:

<input type="text" placeholder="User name"
      required maxlength="25" id="user-name"
      [(ngModel)]="userName" name="userName"
      [ngModelOptions]="{updateOn: 'blur'}">

You can also apply the rule for the whole form at once:

<form #newUserForm="ngForm"
      (ngSubmit)="onSubmit(newUserForm)"
      [ngFormOptions]="{updateOn: 'blur'}">
  ...
</form>

In the case of reactive forms, you’d add the option like this:

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

Router Events

The Angular router now exposes a few new lifecycle events to make it easy to react to events at a more granular level. The new events are the following: ActivationStart, ActivationEnd, ChildActivationStart, ChildActivationEnd, GuardsCheckEnd, GuardsCheckStart, ResolveStart and ResolveEnd.

@angular/service-worker

A new package to facilitate adding a service worker to your apps, @angular/service-worker, is now available with Angular 5. We’ll dig deeper into using it in a future post.

Upgrading

Upgrading should be a no brainer since there are very few breaking changes. The Angular team has also put together a handy tool to make upgrading as easy as possible.

Here are a few pointers that can be helpful for upgrading. This assumes that you’re upgrading from an Angular 4 app:

  • You can upgrade all your Angular packages with one command:
$ npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@5.0.0

# or, using Yarn:
$ yarn add @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@5.0.0
  • Angular 5 now also depends on TypeScript 2.4.2 and RxJS 5.5.2, so you’ll want to upgrade those packages as well.
  • If you haven’t done so already, change your project’s <template> tags to <ng-template>.
  • If you’re using Flex Layout for Angular, you’ll want to make sure that you’re upgrading to the latest release (beta 10 at the time of this writing), as previous versions make use of OpaqueToken, which was removed in Angular 5.
  • If you haven’t done so already, you can start migrating your http calls over to the new HttpClient, which was introduced with Angular 4.3. The legacy Http module has now been deprecated.
  • If you’re using the date, currency or percent pipes, there may be syntax changes needed, because Angular is now using its own implementation for those pipes instead of relying on the browser’s i18n APIs. Refer to the i18n portion of the changelog for all the details.
  • RxJS version 5.5 was also released recently, and RxJS v5.5.2 is the default for Angular 5 apps. Your code can stay exactly the same, but RxJS is moving to lettable operators to improve tree shaking and make it easier to create custom operators. Because of this, it can be a good idea to start transitioning your observable pipeline code over to the new syntax.

Here’s a quick example with the old syntax:

import { Component, OnInit } from '@angular/core';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/do';

@Component({ ... })
export class AppComponent implements OnInit {
  myObs = Observable.of('Hello', 'Alligator', 'World!');

  ngOnInit() {
    this.myObs
      .do(x => console.log('The do operator is the do operator!'))
      .filter(x => x.length > 8)
      .map(x => x.toUpperCase())
      .subscribe(x => console.log(x));
  }
}

…and the same example with the new lettable operator syntax becomes:

import { Component, OnInit } from '@angular/core';

import { of } from 'rxjs/observable/of';
import { map, filter, tap } from 'rxjs/operators';

@Component({ ... })
export class AppComponent implements OnInit {
  myObs = of('Hello', 'Alligator', 'World!');

  ngOnInit() {
    this.myObs
      .pipe(
        tap(x => console.log('The do operator is now tap!')),
        filter(x => x.length > 8),
        map(x => x.toUpperCase())
      )
      .subscribe(x => console.log(x));
  }
}

Notice how the operators can all be imported from a single import statement, and how they are now combined using the pipe method. When using lettable operators, a few operators change name. For example, the do operator becomes tap.

🎢 With this, you should now be ready to leap into Angular 5 and benefit from the resulting faster and smaller apps.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
Alligator.io

author

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more