Angular 6: Upgrading & Summary of New Features

Angular 6, was just released, and while the amount of new features is minimal, a lot has changed under the hood in terms of tooling. The new tooling additions are especially great for facilitating upgrading and adding new libraries to your apps. In this post we’ll breakdown what’s new with Angular 6 and also go over how to upgrade an app over to this new version.

Additions & New Features

Below you’ll find a summary of the major new additions. Note that this list is not exhaustive, and you can refer to the links in the conclusion for more details.

ng update & ng add

The Angular CLI gets two major new commands: update and add.

With ng update, updating an Angular app is now just a command away. 3rd-party libraries can also hook into the new command, thanks to schematics, to make it easy to update those libraries as well. Under the hood the command will work with the project’s package.json file and use the project’s package manager (npm or Yarn) as well as apply code transforms where needed to update the code or configuration files where necessary.

Similar to ng update, the new ng add command allows to add and configure new libraries into a project with a simple command. For example, installing and setting up Angular Material used to require quite a few steps, but now it can all be done simply with one command:

$ ng add @angular/material

Again with ng add, 3rd-party libraries can create their own schematics for it.

Other CLI changes

Angular projects that use the CLI historically had a configuration file called .angular-cli.json. With version 6 of the CLI, this file is now renamed to angular.json and its structure also changes.

ng new now generates a workspace with a default application. Additional apps can be added to a workspace, making it possible to have multiple apps under one project. Libraries are now also a 1st-class citizen and can be added to a workspace and generated using the CLI:

$ ng g library ng-fancy-lib

Angular Elements

With Angular 6 we get the initial release of Angular Elements, a project that will make it easy to develop components that can be embedded as custom elements into other Angular projects and eventually with other frameworks or even with just vanilla JavaScript.

We’ll look at Angular Elements in a different post, and in the meantime you can watch this great introduction by Jeff Delaney of Angular Firebase.

TypeScript 2.7 & RxJS 6

Angular 6 now depends on TypeScript 2.7 and RxJS 6.

RxJS 6 has new and simpler import paths and gets away with chainable operators in favor of pipeable operators. This makes the library as a whole more tree-shakable and will result in smaller bundles. RxJS 6 contains some breaking changes, but a new package, rxjs-compat, can be installed alongside RxJS 6 to provide a compatibility layer while upgrading your code to the new syntax.

Here’s a sample import that demonstrates the main new import paths:

// creation and utility methods
import { Observable, Subject, pipe } from 'rxjs';
// operators all come from `rxjs/operators`
import { map, takeUntil, tap } from 'rxjs/operators';

As you can see, it’s much easier to remember where to import things from! And as for chained operators versus piped operators, here’s a simple example of the difference:

// before
myObs
  .do(console.log)
  .map(x => x * 2)
  .subscribe(x => {
    console.log('Value is', x);
  });

// after
myObs
  .pipe(
    tap(console.log),
    map(x => x * 2)
  )
  .subscribe(x => {
    console.log('Value is', x);
  });

Ivy renderer

A rewrite of the renderer, code-named Ivy, has also been getting a lot of attention lately. The new renderer should be significantly smaller, which will allow for a smaller final app’s bundle size. A stable version is not available just yet, but it will be made available as an opt-in replacement when the API is complete and stable.

Upgrading

The Angular team has put together a tool, the Angular Update Guide, that makes it easy to migrate your Angular installation to the latest version. For the most part, upgrading will be a matter of following that guide.

Still though, you’ll find below a summarized breakdown of the steps needed to upgrade an Angular 5.2 app that also uses Angular Material over to Angular 6.

Updating the CLI

Update to v6 of the Angular CLI both globally and locally to the project:

# updating using npm
$ npm i -g @angular/cli
$ npm i @angular/cli

# using Yarn
$ yarn global add @angular/cli
$ yarn add @angular/cli

Running ng update

You can now run ng update for the CLI, Angular core and Angular Material.

First, updating the CLI will convert the configuration file to the new format (angular.json) and update various project configs:

$ ng update @angular/cli

Next, run ng update for the Angular core packages:

$ ng update @angular/core

And then you can also run ng update to update Angular Material and RxJS:

$ ng update @angular/material
$ ng update rxjs

Upgrading RxJS

For RxJS, the syntax for the import paths needs to be updated, and operators need to be piped together instead of chained together. Normally that would mean that you have to update your code everywhere RxJS imports and operators are used, but thankfully there’s a package that takes care of most of the heavy lifting: rxjs-tslint.

You can install the package globally:

$ npm i -g rxjs-tslint

# or, using Yarn
$ yarn global add rxjs-tslint

And then you can run the rxjs-5-to-6-migrate command pointing to your app’s tsconfig.app.json file, which is found is a project’s src folder:

$ rxjs-5-to-6-migrate -p src/tsconfig.app.json

Once rxjs-tslint has done its work, you’ll want to run your tests and exercise the app fully to fix any anything that comes up. For example, some syntax changes for RxJS 6 that may have been missed by the tool, or new type errors brought up by TypeScript 2.7.

After everything looks good, you’ll want to remove the rxjs-compat package from your project (leaving it would add unnecessary bloat to your app bundle):

$ npm uninstall rxjs-compat

# or, using Yarn
$ yarn remove rxjs-compat

Further Reading

You may want to dig deeper into the latest additions and migration steps. Here are a few of the key resources to help you with that:

• Angular 6 official announcement
• This other great post from @AlyssaNicoll with a breakdown of the new features
• Full changelog
• Angular Material changelog
• RxJS 6 migration guide
• The 2018 ngConf Day 1 keynote with Brad Green, Miško Hevery, Kara Erickson
• Ben Lesh’s talk about RxJS 6 at ngConf