Angular 5

Angular 5
has arrived…
Bartłomiej Narożnik

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

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

Angular compiler as a TypeScript transform (TS 2.3)
40% faster builds
(95% for angular.io 40s -> <2s)
ng serve –aot

ServerTransferStateModule
BrowserTransferStateModule

• 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

@Component({
provider: [{provide: SOME_TOKEN, useFactory: () => null}]
})
export class MyComponent { }
@Component({
provider: [{provide: SOME_TOKEN, useValue: SomeEnum.OK}]
})
export class MyComponent { }

//Before
ReflectiveInjector.resolveAndCreate(providers);
//After
Injector.create(providers);

platformBrowserDynamic()
.bootstrapModule(
AppModule,
{ngZone: 'noop'})
.then( ref => {} );

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'?

platformBrowserDynamic().bootstrapModule(AppModule, {
preserveWhitespaces: false
});
@Component({
selector: 'my',
templateUrl: './my.component.html',
preserveWhitespaces: false
})
export class MyComponent { ... }

<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>

• <pre> tags are not affected 
• Defaults to true… for now.
• Removes about 6% of generated code

• Typed Response body access
• JSON as default (no need to parse)
• Interceptors
• Immutable Request/Response
• Progress Events
• Better Unit Testing

@angular/http module officially deprecated
replaced by @angular/common/http
HttpHeaders and HttpParams accept object literals

// 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'} });

GuardsCheckStart, GuardsCheckEnd
ActivationStart, ActivationEnd
ResolveStart, ResolveEnd
ChildActivationStart, ChildActivationEnd

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);
}
});
}
}

@NgModule({
providers: [
RouterModule.forRoot(routes, {
onSameUrlNavigation: 'reload'
}
)
]
})
*Scheduled for 5.1

Caching
• static assets
• external resources
• route redirection
• dynamic content
Strategies
• freshness
• performance

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);
}
);
});
}

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()
})

• 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

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' },
]
...
})

• New formats (long, longDate, longTime, full, fullDate, fullTime)
• Timezone support
• Locale support

<span>{{ d | date: 'shortDate' }}</span> 

<span>{{ d | date: 'shortDate': null: 'pl' }}</span> 

<span>{{ d | date: 'M/d/yy': null: 'pl' }}</span>

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

new FormGroup(value, {updateOn: 'blur'}));
new FormControl(value, {updateOn: 'blur',
asyncValidators: [myValidator]})

animations: [
trigger('query', [
transition(
'* => start',
[
query(
'.item',
[style({ opacity: 0 }), animate('2s', style({ opacity: 1 }))],
{ limit: -3 }
),
]),
]),
]

//Before
transition('0 => 1, 1 => 2, 2 => 3, 3 => 4', ...)
//After
transition(':increment')

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
}))
])
])
];

//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),
);

• 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)

@bart_naroznik
No matter
how impressive the lift-off
is,
it’s the landing that counts..

Angular 5

Recommended

More Related Content

What's hot (20)

Similar to Angular 5 (20)

Recently uploaded (20)

Angular 5

Editor's Notes