Idea Transcript
Stephen Fluin Follow Nov 1, 2017 · 8 min read
Version 5.0.0 of Angular Now Available We are pleased to announce version 5.0.0 of Angular, pentagonal-donut. This is a major release containing new features and bugfixes. This release continues our focus on making Angular smaller, faster, and easier to use.
Here’s a breakdown of some of the biggest changes in v5. For the full list, please see the changelog.
Build Optimizer As of 5.0.0, production builds created with the CLI will now apply the build optimizer by default. The build optimizer is a tool included in our CLI for making your bundles smaller using our semantic understanding of your Angular application. The build optimizer has two main jobs. First, we are able to mark parts of your application as
pure
, this improves the tree shaking provided by the
existing tools, removing additional parts of your application that aren’t needed. The second thing the build optimizer does is to remove Angular decorators from your application’s runtime code. Decorators are used by the compiler, and aren’t needed at runtime and can be removed. Each of these jobs decrease the size of your JavaScript bundles, and increase the boot speed of your application for your users.
Angular Universal State Transfer API and DOM Support You can now more easily share application state between the server side and client side versions of your application. Angular Universal is a project focused on helping developers to perform server side rendering (SSR) of Angular applications. By rendering your Angular applications on the server and then bootstrapping on top of the generated HTML, you can add support for scrapers and crawlers that don’t support JavaScript, and you can increase the perceived performance of your application. In 5.0.0, the team has added corresponding
and the
ServerTransferStateModule
. This module allows you to
BrowserTransferStateModule
generate information as part of your rendering with platform-server, and then transfer it to the client side so that this information does not need to be regenerated. This is useful for cases such as when your application fetches ngModel>
After
or
Reactive Forms Before new FormGroup(value); new FormControl(value, [], [myValidator])
After new FormGroup(value, {updateOn: 'blur'}));
new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})
RxJS 5.5 We’ve updated our use of RxJS to 5.5.2 or later. This recent release of RxJS fully empowers developers to avoid the side effects of the previous import mechanism with a new way of using RxJS called “lettable operators”. These new operators eliminate the side effects and the code splitting / tree shaking problems that existed with the previous ‘patch’ method of importing operators. Instead of
1
import { Observable } from 'rxjs/Observable';
2
import 'rxjs/add/operator/map';
3
import 'rxjs/add/operator/filter';
4
names = allUserData
5
.map(user => user.name)
6
.filter(name => name);
lettable-before.ts hosted with ¤ by GitHub You can now
view raw
1
import { Observable } from 'rxjs/Observable';
2
import { map, filter } from 'rxjs/operators';
3
names = allUserData.pipe(
4
map(user => user.name),
5
filter(name => name),
6
);
lettable-after.ts hosted with ¤ by GitHub view raw Additionally, RxJS now distributes a version using ECMAScript Modules.
The new Angular CLI will pull in this version by default, saving considerably on bundle size. But if you’re not using the Angular CLI, you should still point to the new distribution. Documentation can be found in the Build and Treeshaking section of the lettable operators documentation.
New Router Lifecycle Events We’ve added new lifecycle events to the router, allowing developers to track the cycle of the router from the start of running guards through to completion of activation. These events could be used for things such as showing a spinner on a specific router outlet when a child is updating or to measure performance of guards and/or resolvers. The new events (in sequence) are ChildActivationStart ResolveStart
,
,
ActivationStart
ResolveEnd
ChildActivationEnd
GuardsCheckStart
,
,
ActivationEnd
,
GuardsCheckEnd
,
,
. An example of using these events to start/stop a
spinner might look like this:
1
class MyComponent {
2
constructor(public router: Router, spinner: Spinner) {
3
router.events.subscribe(e => {
4
if (e instanceof ChildActivationStart) {
5
spinner.start(e.route);
6
} else if (e instanceof ChildActivationEnd) {
7
spinner.end(e.route);
8
}
9
});
10
}
How do I update? 11
}
router-lifecyle.ts hosted with ¤ by GitHub
view raw
We built the Angular Update Guide to help guide you through the process
and to learn about any changes you’ll want to make in your code before you start the update process, the steps to update your app, and information on preparing for future versions of Angular. We’ve removed many previously deprecated APIs (like
OpaqueToken
)
and released several new deprecations. This guide will walk you through the changes you’ll need to make to your application.
Known Issues There are known issues with production build source maps. Some source maps may result in undefined sources for errors. https://github.com/angular/angular/issues/19840