What's new in Angular 7.1?
Angular 7.1.0 is here!
Not a lot of new features in this release: the Angular team is still mainly focused on the Ivy project, rewriting the Angular compiler and runtime code to make it smaller, better, faster.
Beginning of Bazel support
A new @angular/bazel
package appeared in the Angular repository,
containing the stepping stones for building our Angular applications with Bazel.
It also contains a schematics collection (with a target currently called bazel-workspace
) to generate the necessary files in an Angular CLI application.
npm i -g @angular/bazel
ng generate @angular/bazel:bazel-workspace my-app // adds the Bazel build files to a CLI project
I guess that in a near future, we should be able to directly generate a CLI app with Bazel build
(something like ng new my-app --collection=@angular/bazel
).
The bazel-workspace
target already allows to build, serve, test and launch the e2e tests with Protractor. This is still quite experimental.
Note that Bazel is now published on NPM directly, removing the need to install it manually.
Router
CanActivate guard can return a UrlTree
The signature of CanActivate
changed and it now can return Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree
instead of Observable<boolean>|Promise<boolean>|boolean
.
It means that whereas previously you would have returned a boolean (or something that yields a boolean later), you can now return the URL where you want to redirect your user.
So you can write:
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree {
return this.userService.isLoggedIn() || this.router.parseUrl('/login');
}
instead of:
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
const loggedIn = this.userService.isLoggedIn();
if (!loggedIn) {
this.router.navigateByUrl('/');
}
return loggedIn;
}
The difference is also that now the router will behave correctly if several guards trigger different redirects (it was not the case before, and that could lead to non deterministic behavior in redirections).
Note that you can also use router.createUrlTree()
to build a UrlTree
with parameters.
New option for runGuardAndResolvers
runGuardsAndResolvers
is one of the configuration options for a route,
allowing to define when the guards and the resolvers will be run for this route.
By default, they run only when the path or matrix parameters change (value paramsChange
).
You can override this behavior by using another value for this option like paramsOrQueryParamsChange
,
to also trigger the guards and resolvers if a query parameter changes,
or always
to trigger them if anything changes.
Angular 7.1 introduces a new possible value: pathParamsChange
.
Using this value, the guards and resolvers will run if a path parameter changes,
but not if a query or matrix parameter changes.
Forms
updateOn in FormBuilder
The updateOn
option is available since Angular 5,
but it was only usable if you used the constructor of FormGroup
directly:
this.userForm = new FormGroup({
username: '',
password: ''
}, {
validators: Validators.required,
updateOn: 'blur'
});
It is now possible to use it via the group
helper method of the FormBuilder
.
Note that this updated group
method can now take an AbstractControlOptions
as the second parameter,
allowing to have a more coherent API, and use exactly the same syntax as in FormGroup
:
this.userForm = fb.group({
username: '',
password: ''
}, {
validators: Validators.required,
updateOn: 'blur'
});
The old form of options is now deprecated
(it was using validator
and asyncValidator
instead of validators
and asyncValidators
).
Service Worker
It’s now possible to be notified when a user clicks on a push notification,
via the notificationClicks
observable on the service SwPush
.
Ivy update
The Ivy rewrite is still in progress,
but I noted that I missed a nice addition:
there will be public discovery utils that can be used to debug your application in the browser.
Several functions will be available in the browser console:
getComponent(target)
, getDirectives(target)
, getHostComponent(target)
,
getInjector(target)
, getRootComponents(target)
, and getPlayers(target)
.
In Chrome for example, you can inspect an element and that will store the current element in a variable called $0
. Then in the browser console, you can do ng.getComponent($0)
and it will return the component associated to the element!
You can check out Jason Aden talk at AngularConnect for more info on the topic.
All our materials (ebook, online training and training) are up-to-date with these changes if you want to learn more!