Angular 5, code named pentagonal-donut, was just announced, and with it comes a few new features as well as a number of internal changes to make Angular apps smaller and faster to execute. In this post we’ll briefly go over some of the most important changes as well as pointers on upgrading. For more details, refer to the announcement blog post, and for in-depth details about all the changes, refer to the official changelog.
Here are some of the changes that Angular 5 includes to make your apps smaller and faster:
--aot
flag with the ng serve
command. This should become the default in a future version of the CLI.{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": ["node_modules/@types"],
"lib": ["es2017", "dom"]
},
"angularCompilerOptions": {
"preserveWhitespaces": false
}
}
You can also set the option granularly on a per-component basis, or override the project’s default only in specific components:
import { Component } from '@angular/core';
A new option for form fields or entire forms, updateOn, can help with performance by telling Angular to check for validity only on blur or submit events, instead of the default change event.
For example, given a template-driven form that looks like this:
<form #newUserForm="ngForm" (ngSubmit)="onSubmit(newUserForm)">
<label for="user-name">User Name:</label>
<input type="text" placeholder="User name"
required maxlength="25" id="user-name"
[(ngModel)]="userName" name="userName">
<button type="submit" [disabled]="!newUserForm.form.valid">
Register
</button>
</form>
You can now add the following to the input to have Angular check for its validity only when the input is blurred-out:
<input type="text" placeholder="User name"
required maxlength="25" id="user-name"
[(ngModel)]="userName" name="userName"
[ngModelOptions]="{updateOn: 'blur'}">
You can also apply the rule for the whole form at once:
<form #newUserForm="ngForm"
(ngSubmit)="onSubmit(newUserForm)"
[ngFormOptions]="{updateOn: 'blur'}">
...
</form>
In the case of reactive forms, you’d add the option like this:
ngOnInit() {
this.newUserForm = this.fb.group({
userName: ['Bob', { updateOn: 'blur', validators: [Validators.required] }]
});
}
The Angular router now exposes a few new lifecycle events to make it easy to react to events at a more granular level. The new events are the following: ActivationStart, ActivationEnd, ChildActivationStart, ChildActivationEnd, GuardsCheckEnd, GuardsCheckStart, ResolveStart and ResolveEnd.
A new package to facilitate adding a service worker to your apps, @angular/service-worker, is now available with Angular 5. We’ll dig deeper into using it in a future post.
Upgrading should be a no brainer since there are very few breaking changes. The Angular team has also put together a handy tool to make upgrading as easy as possible.
Here are a few pointers that can be helpful for upgrading. This assumes that you’re upgrading from an Angular 4 app:
$ npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@5.0.0
# or, using Yarn:
$ yarn add @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@5.0.0
Here’s a quick example with the old syntax:
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/do';
@Component({ ... })
export class AppComponent implements OnInit {
myObs = Observable.of('Hello', 'Alligator', 'World!');
ngOnInit() {
this.myObs
.do(x => console.log('The do operator is the do operator!'))
.filter(x => x.length > 8)
.map(x => x.toUpperCase())
.subscribe(x => console.log(x));
}
}
…and the same example with the new lettable operator syntax becomes:
import { Component, OnInit } from '@angular/core';
import { of } from 'rxjs/observable/of';
import { map, filter, tap } from 'rxjs/operators';
@Component({ ... })
export class AppComponent implements OnInit {
myObs = of('Hello', 'Alligator', 'World!');
ngOnInit() {
this.myObs
.pipe(
tap(x => console.log('The do operator is now tap!')),
filter(x => x.length > 8),
map(x => x.toUpperCase())
)
.subscribe(x => console.log(x));
}
}
Notice how the operators can all be imported from a single import statement, and how they are now combined using the pipe method. When using lettable operators, a few operators change name. For example, the do operator becomes tap.
🎢 With this, you should now be ready to leap into Angular 5 and benefit from the resulting faster and smaller apps.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.