Presentation about changes in Angular major release 5. Describes the most important features introduced and changes both in Angular and Angular CLI.

1. Angular 5
has arrived…
Bartłomiej Narożnik

2. Bartłomiej Narożnik - Angular 5 2
Patch: 4.4.6
- No Features, No Breaking Changes
Minor: 4.4.0
- New Features, No Breaking Changes
Major: 5.0.0
- New Features, Potential Breaking Changes

3. Bartłomiej Narożnik - Angular 5 3
1. Marking parts of your application as pure.
2. Removing angular decorators from runtime code.
Enabled by default for CLI production build.
--no-build-optimizer

4. Bartłomiej Narożnik - Angular 5 4
Angular compiler as a TypeScript transform (TS 2.3)
40% faster builds
(95% for angular.io 40s -> <2s)
ng serve –aot

5. Bartłomiej Narożnik - Angular 5 5
ServerTransferStateModule
BrowserTransferStateModule

6. Bartłomiej Narożnik - Angular 5 6
• Support more DOM manipulations out of the box within server
side contexts
• Improved support for 3rd party JS and Component libraries
that aren’t server-side aware

7. Bartłomiej Narożnik - Angular 5 7
@Component({
provider: [{provide: SOME_TOKEN, useFactory: () => null}]
})
export class MyComponent { }
@Component({
provider: [{provide: SOME_TOKEN, useValue: SomeEnum.OK}]
})
export class MyComponent { }

8. Bartłomiej Narożnik - Angular 5 8
//Before
ReflectiveInjector.resolveAndCreate(providers);
//After
Injector.create(providers);

9. Bartłomiej Narożnik - Angular 5 9
platformBrowserDynamic()
.bootstrapModule(
AppModule,
{ngZone: 'noop'})
.then( ref => {} );

10. Bartłomiej Narożnik - Angular 5 10

11. Bartłomiej Narożnik - Angular 5 11
fullTemplateTypeCheck option
<div>{{ 11.1 | lowercase }}</div>
-> Argument of type '11.1' is not assignable to parameter of type 'string'
<input [(ngModel)]="book.title" required #bookCtrl="ngModel">
<div *ngIf="bookCtrl.hasEror('required')">Title required</div>
-> Property 'hasEror' does not exist on type 'NgModel'. Did you mean 'hasError'?

12. Bartłomiej Narożnik - Angular 5 12
platformBrowserDynamic().bootstrapModule(AppModule, {
preserveWhitespaces: false
});
@Component({
selector: 'my',
templateUrl: './my.component.html',
preserveWhitespaces: false
})
export class MyComponent { ... }

13. Bartłomiej Narożnik - Angular 5 13
<div ngPreserveWhitespaces>
whitespaces preserved here
<span> and here </span>
</div>
<a>Spaces</a>&ngsp;<a>between</a>&ngsp;<a>links.</a>
<a>before</a>&ngsp;&ngsp;&ngsp;<a>after</a>

14. Bartłomiej Narożnik - Angular 5 14
• <pre> tags are not affected 
• Defaults to true… for now.
• Removes about 6% of generated code

15. Bartłomiej Narożnik - Angular 5 15

16. Bartłomiej Narożnik - Angular 5 16
• Typed Response body access
• JSON as default (no need to parse)
• Interceptors
• Immutable Request/Response
• Progress Events
• Better Unit Testing

17. Bartłomiej Narożnik - Angular 5 17
@angular/http module officially deprecated
replaced by @angular/common/http
HttpHeaders and HttpParams accept object literals

18. Bartłomiej Narożnik - Angular 5 18
// using classes
const headers = new HttpHeaders().set('X-Option', 'true');
http.get(url, { headers });
const params = new HttpParams().set('test', 'true');
http.get(url, { params });
// without classes
http.get(url, { headers: {'X-Option': 'true'} });
http.get(url, { params: {'test': 'true'} });

19. Bartłomiej Narożnik - Angular 5 19

20. Bartłomiej Narożnik - Angular 5 20
GuardsCheckStart, GuardsCheckEnd
ActivationStart, ActivationEnd
ResolveStart, ResolveEnd
ChildActivationStart, ChildActivationEnd

21. Bartłomiej Narożnik - Angular 5 21
class MyComponent {
constructor(public router: Router, spinner: Spinner) {
router.events.subscribe(e => {
if (e instanceof ChildActivationStart) {
spinner.start(e.route);
} else if (e instanceof ChildActivationEnd) {
spinner.end(e.route);
}
});
}
}

22. Bartłomiej Narożnik - Angular 5 22
@NgModule({
providers: [
RouterModule.forRoot(routes, {
onSameUrlNavigation: 'reload'
}
)
]
})
*Scheduled for 5.1

23. Bartłomiej Narożnik - Angular 5 23

24. Bartłomiej Narożnik - Angular 5 24
Caching
• static assets
• external resources
• route redirection
• dynamic content
Strategies
• freshness
• performance

25. Bartłomiej Narożnik - Angular 5 25
import { SwPush } from '@angular/service-worker';
subscribeToPush() {
// Requesting messaging service to subscribe current client (browser)
this.swPush
.requestSubscription({ serverPublicKey: this.VAPID_PUBLIC_KEY })
.then(pushSubscription => {
// Passing subscription object to our backend
this.pushService.addSubscriber(pushSubscription)
.subscribe(
res => {
console.log('[App] Add subscriber request answer', res);
}
);
});
}

26. Bartłomiej Narożnik - Angular 5 26
import { SwUpdate } from '@angular/service-worker';
this.swUpdate.checkForUpdate()
.then(() => {
console.log('[App] checkForUpdate completed')
})
this.swUpdate.activateUpdate()
.then(() => {
console.log('[App] activateUpdate completed')
this.winRef.nativeWindow.location.reload()
})

28. Bartłomiej Narożnik - Angular 5 28
• Angular now uses data from Common Locale Data Repository
(CLDR) instead.
• No need for intl polyfil
• Old pipes in DeprecatedI18NPipesModule
• Locale parameter in all i18n pipes
• Default locale en-US

29. Bartłomiej Narożnik - Angular 5 29
import {LOCALE_ID} from '@angular/core';
import {registerLocaleData} from '@angular/common';
import localePl from '@angular/common/locales/pl-PL';
registerLocaleData(localePl);
@NgModule({
...
providers: [
{ provide: LOCALE_ID, useValue: 'pl-PL' },
]
...
})

30. Bartłomiej Narożnik - Angular 5 30
• New formats (long, longDate, longTime, full, fullDate, fullTime)
• Timezone support
• Locale support
<!-- common usage using pre-defined format string -->
<span>{{ d | date: 'shortDate' }}</span> <!-- en-US: 1/18/17 -->
<!-- specific locale -->
<span>{{ d | date: 'shortDate': null: 'pl' }}</span> <!-- pl-PL: 18/1/17 -->
<!-- custom format string -->
<span>{{ d | date: 'M/d/yy': null: 'pl' }}</span> <!-- pl-PL: 18/1/17 -->

31. Bartłomiej Narożnik - Angular 5 31
Field type Format Example value v4 v5
Eras Narrow A for AD G GGGGG
Months Narrow S for September L MMMMM
Week day Narrow M for Monday E EEEEE
Timezone Long location
Pacific Standard
Time
z Not available
Timezone Long GMT GMT+01:00 Z ZZZZ

32. Bartłomiej Narożnik - Angular 5 32

33. Bartłomiej Narożnik - Angular 5 33
<input name="title" ngModel [ngModelOptions]="{updateOn: 'blur'}">
<form [ngFormOptions]="{updateOn: 'submit'}">

34. Bartłomiej Narożnik - Angular 5 34
new FormGroup(value, {updateOn: 'blur'}));
new FormControl(value, {updateOn: 'blur',
asyncValidators: [myValidator]})

35. Bartłomiej Narożnik - Angular 5 35

36. Bartłomiej Narożnik - Angular 5 36
animations: [
trigger('query', [
transition(
'* => start',
[
query(
'.item',
[style({ opacity: 0 }), animate('2s', style({ opacity: 1 }))],
{ limit: -3 }
),
]),
]),
]

37. Bartłomiej Narożnik - Angular 5 37
//Before
transition('0 => 1, 1 => 2, 2 => 3, 3 => 4', ...)
//After
transition(':increment')

38. Bartłomiej Narożnik - Angular 5 38
export const expandTypo = [
trigger('expandTypo', [
transition(':leave', [
animate('150ms cubic-bezier(0.4, 0.0, 1, 1)', style({
height: 0,
opacty: 0 // <-- typo here, could also be anything random
}))
])
])
];

39. Bartłomiej Narożnik - Angular 5 39
//Before
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
shortTitles = allBooks
.map(book => book.title)
.filter(title => title.length < 20);
//After
import { Observable } from 'rxjs/Observable';
import { map, filter } from 'rxjs/operators';
shortTitles = allBooks.pipe(
map(book => book.title),
filter(title => title.length < 20),
);

40. Bartłomiej Narożnik - Angular 5 40
• Weekly patch version
• Monthly minor version
• Major version every 6 months (backwards compatible)
• Almost 9000 commits in total
• ~9 commits per day (1932 commits between versions 4 and
5)

41. Bartłomiej Narożnik - Angular 5 41

42. Bartłomiej Narożnik - Angular 5 42

43. @bart_naroznik
Bartłomiej Narożnik - Angular 5 43
No matter
how impressive the lift-off
is,
it’s the landing that counts..