What's new in Angular 6

by Gerard Sans |  @gerardsans

by Gerard Sans |  @gerardsans

Google Developer Expert

Google Developer Expert

International Speaker

Spoken at 75 events in 23 countries

Blogger

Blogger

Community Leader

900

1.4K

Trainer

Master of Ceremonies

Master of Ceremonies

Angular Academy

Semantic Versioning

Semantic Versioning

X . Y . Z

   MAJOR       MINOR        PATCH  

Semantic Versioning

  • v2 Sept 2016
  • v4 March 2017
  • v5 Sept/Oct 2017
  • v6 March 2018
  • v7 Sept/Oct 2018

Long Term Support (LTS)

  • Only critical fixes and security patches
  • Angular v5 LTS begins with v6

Goals

  • Fixed release calendar
  • Incremental upgrades
  • Stability
  • Reliability

Timeline

Angular v2

Future ready

2016

Angular v4

Stable and performant

4.2 Animations

New angular.io website

4.3 HttpClient

2017

Angular v5

Smaller, Faster and Easier to use

PWA support

SSR. Material components

Bazel. Build time tools

2017

Angular v6

Smaller, Faster and Easier to use

Webpack 4. RxJS 6. TS 2.7

Angular Elements. Ivy Renderer

Tooling improvements

2018 

Angular v6

New Features (1/2)

  • Webpack v4. Further optimizations
  • Services are now tree-shakeable
  • Support inline, multiline, jsdocs comments
  • preserveWhitespaces false by default

  • APIs for: formatNumber, formatPercent, formatCurrency and formatDate

New Features (2/2)

  • Forms. Multiple validators for array API
  • Router. New properties NavigationStart
    • navigationSource, restoredState
  • Service worker. Safety-script to uninstall
  • Testing. New optional arguments
    • whenStable(done, timeout, update)
// BEFORE
@Component({
  template: `<my-element #my-element></my-element>`
})
class MyComponent {
  @ViewChild('my-element') myElement:ElementRef;
  ngAfterViewInit() {
    this.myElement.nativeElement; // type is "any"
  }
}
app/my.component.ts

Optional type ElementRef

// AFTER
@Component({
  template: `<my-element #my-element></my-element>`
})
class MyComponent {
  @ViewChild('my-element') myElement:ElementRef<MyElement>;
  ngAfterViewInit() {
    this.myElement.nativeElement; // type is “MyElement”
  }
}
app/my.component.ts

Optional type ElementRef

Angular CLI

Angular CLI 1.7

  • Add Webpack v4 support

  • Support for upgrades

    • ng update --next

  • ​Ability to specify budgets for your apps

    • bundle, initial, allScript, all, anyScript, any

    • baseline, max, min, warning, error

    • bytes, KB, MB, %

15th Feb

Angular CLI v6

  • Add Webpack v4 final

  • Upgrade to webpack-dev-server v3

  • Support aditional Lazy Load Modules

  • Support for prepackaged schematics

    • ng add @angular/material
{
  "compilerOptions": {
    "experimentalDecorators": true,
    ...
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "preserveWhitespaces": false,
    "enableResourceInlining": true,
    "enableIvy": true,
  }
}
tsconfig.json

Resource Inlining Support

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  { }
app/app.component.ts

Before

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

@Component({
  selector: 'my-app',
  template: `<hello></hello>`,
  styles: [`p { font-family: Lato; }`]
})
export class AppComponent  { }
app/app.component.ts

After

RxJS v6

RxJS v6 Goodies

  • Friendly imports
    • rxjs, rxjs/operators
  • EcmaScript spec compliant
    • Pipeable operators
    • Avoid reserved keywords
  • Simplified API
    • Result Selectors removed

Operator Renames

 do         throw          switch         finally

  tap      throwError     switchAll      finalize

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/filter';

const isOddNumber = (x: number) => x%2!==0;
Observable.interval(1000)
  .filter(isOddNumber);  

// --0--1--2--3--4--5-- interval
// -----1-----3-----5-- filter
src/app.component.ts

Listing odd numbers - RxJS v5.5

import { interval } from 'rxjs';
import { filter } from 'rxjs/operators'; 

const isOddNumber = (x: number) => x%2!==0;
interval(1000).pipe(
  filter(isOddNumber)
);

// --0--1--2--3--4--5-- interval
// -----1-----3-----5-- filter
src/app.component.ts

Listing odd numbers - RxJS v6

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/throw';
import 'rxjs/add/observable/finally';

Observable.throw("💩").subscribe({
  error: e => l(`Error: ${e}`)
})

Observable.throw("💩")
.catch(e => of("No worries. Sorted!😃"))
.finally(() => { /* code */ })
.subscribe(v => l(v));
src/app.component.ts

Error Handling - RxJS v5.5

import { throwError } from 'rxjs';
import { catchError, finalize } from 'rxjs/operators';

throwError("💩").subscribe({
  error: e => l(`Error: ${e}`)
})

throwError("💩").pipe(
  catchError(e => of("No worries. Sorted!😃")),
  finalize(() => { /* code */ }),
).subscribe(v => l(v));
src/app.component.ts

Error Handling - RxJS v6

Animations

// <div [@fade]="fade" fast></div>
// <div [@fade]="{ value: fade, params: { type: 'fast' }}">
const hasAttribute = (attribute: string) => 
  (fromState: string, toState: string, 
    element: any, params: {[key:string]: any}
  ): boolean => 
  element.hasAttribute(attribute) || (params && params.type==attribute);
}

export const fade = trigger('fade', [
  state('fadeIn', style({ opacity: 1 })),
  state('fadeOut', style({ opacity: 0.1 })),
  transition(hasAttribute("fast"), animate('100ms linear')),
  transition('fadeIn <=> fadeOut', animate('400ms linear')),
]);
animations.ts

Dynamic transition matcher

Forms

export class HelloComponent {
  version: FormControl = new FormControl('6.0.0', Validators.required);
  form: FormGroup = new FormGroup({ v: this.version });

  constructor() {
    this.form.statusChanges  // VALID INVALID PENDING DISABLED
      .subscribe(status => console.log(status)); 

    this.version.markAsPending();                    // emits PENDING
    this.version.markAsPending({onlySelf: true});    // no output
    this.version.markAsPending({emitEvent: false});  // no output
  }
}


app/hello.component.ts

markAsPending

Breaking Changes

Overview

  • Forms. New PENDING event may require review current code
  • Dropped support <template> Element
  • No animation imports @angular/core
  • Baseline dependencies
    • ​Webpack v4, TS 2.7 and RxJS v6
    • ​SSR. Domino v2

Future

Angular Elements

Ivy Compiler

What's new in Angular 6! - Bratislava

By Gerard Sans

What's new in Angular 6! - Bratislava

In this interactive session, we'll cover all the cool new stuff and changes in version 6 of Angular!

  • 3,767