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