fbpx Skip to content

Aquent | DEV6

Angular 6: New Features and Why Upgrade?

Written by: Gagan Kaur

Angular 6 is now available and the theme for this release is FASTER and SMALLER. Unlike Angular 5 it is not a drop-in replacement. It has some noticeable breaking changes. The most notable difference that I’ve found is not in Angular itself but in RxJS. In this post, I’ll walk you through these breaking changes, so you can stay on the happy path while upgrading.

Let’s dive into the blog below to get started.

Preparation Steps Before Upgrade

Step 1: Upgrading RxJS

In RxJS v6, many of the class locations changed affecting your imports.

With RxJS v5.x your imports look as follows:

import { Observable } from 'rxjs/Observable';
 
import 'rxjs/add/operator/map';

With RxJS v6.x they’ve changed a bit:

import { Observable } from 'rxjs';
 
import { map } from 'rxjs/operators';

Another breaking change is the introduction of pipe(). With v5.x, you could map directly from an Http call to manipulate data.

search(q: string): Observable<any> {
 
  return this.getAll().map(data => data
 
    .filter(item => JSON.stringify(item).toLowerCase().includes(q)));
 
}

With v6.x, you have to pipe the results into map().

search(q: string): Observable<any> {
 
  return this.getAll().pipe(
 
    map((data: any) => data
 
      .filter(item => JSON.stringify(item).toLowerCase().includes(q)))
 
  );
 
}

Benefits of using Pipe over dot chaining:

  • A pipeable operator is basically any function that returns a function with the signature: <T, R> (source: Observable<T>) => Observable<R>
  • Pipeable operators are tree-shakeable by tools like webpack or rollup. That means if you remove let say filter from above code snippet, the tree shaking module of the bundlers can recognize that the imported function is not used, and the code of the filter operator won’t be included in the bundles. This was not the case earlier.
  • Unused operators that are being imported in apps can be picked up by a lint rule.
  • Functional composition becomes easier now as you can build your own custom operators.

Additional Notes:

  • If you are still asking this innocent question “why do I need to again upgrade my code I just upgraded my code to Angular 5”. You can still continue your life as it is by installing rxjs-compat.
  • The RxJS v5.x to v6 Update Guide has many more tips for upgrading.

Step 2: It’s high time to start using HTTPClient service (At least it was for me)

Alright, if you are also one of those people like me who were still relying on Http service, it’s time to start using the HttpClient service which was introduced in Angular 4.3.

Some of the feature benefits are:

  • Strongly typed response body access
  • JSON assumed by default (no more need to do .map(t=> t.json())
  • Better support for interceptors as middleware which helps you create global error handling mechanism, global retry mechanism, global HTTP spinner for long running sessions.
  • Immutable request/response objects

Step 3: Dependency Injection has changed

In Angular 6 services can now register themselves. Yes, you heard it right (just like our grown-up kids). So, here’s how you do it.

You can specify providedIn and it will auto-register itself when the app bootstraps.

@Injectable({ providedIn: 'root', }) export class UserService { }

Another use-case is that it can target a specific module for your service.

@Injectable({ providedIn: 'LoginModule', }) export class UserService { }

Step 4: ng update comes to rescue

ng update <package>is a new CLI command which helps you to adopt the right version of dependencies and keep your dependencies in sync. It’s no wonder the Angular team has to come up with this solution otherwise Angular developers will just spend their lives upgrading their apps to ever releasing new Angular versions. To use this command, you need to update your CLI path globally on your machine as well as in the project you want to update.

npm install -g @angular/[email protected]
 
npm install @angular/[email protected]
 
ng update @angular/cli

Step 5: ng add

ng add <package> makes adding new capabilities to your project easy.

For example:

ng add @angular/material

Step 6: Use “angular.json” instead of “.angular-cli.json”

Well, no need to create this file manually for an old project, you can get it auto-generated by running this command.

ng update @angular/cli –from=1 –migrate-only

Step 7: <template> is deprecated

Use <ng-template> instead.

ng update @angular/cli –from=1 –migrate-only

Phew! It’s done. It was not as difficult as it sounded at the start.

Let’s go through some of the other new cool features from Angular 6.

Angular Elements

This first release of this feature allows you to compile Angular components to native web components which you can use in your Angular app or use an Angular component in a non-Angular app.

Check out this video how to do it.

First Look at new Ivy Renderer

This is a new engine for rendering your Angular app. For those who are still new to Ivy Renderer: Angular compiles your templates into equivalent TypeScript code. This TypeScript code is then compiled along with the TypeScript you wrote into JavaScript code, and the result is shipped to your users.

Two major features are:

  • Build time
  • Bundle size

Ivy is not feature-complete yet. This is still very experimental, and the new Ivy renderer is behind a flag that you have to explicitly set in the compiler options (in the tsconfig.json) if you want to give it a try.

"angularCompilerOptions": { "enableIvy": true }

But check this official status tracker to see what you may use already but this will be a real alternative in Angular 7+.

Angular Material and CDK Components

The major addition is the new tree component for displaying hierarchical data.

To start using it, just type in the command.

ng add @angular/material

and you will be able to generate 3 new starter components which are Material Sidenav, Material Dashboard and Material Data Table.

Learn more about Material here.

I will end the blog with this cool Angular Upgrade tool made by Angular team to generate steps to upgrade your target Angular version. At least this will make Angular developer life a bit easier.

Thanks, Angular team!

Sign up for our Angular Course

$1,995 CAD – 4 Days

View Course Details