Whats new in Angular 7 - Features and Improvements

( 7 users )

A new major release of Angular - Angular 7 is out now. While there has been a lot of bug fixes since Angular 6 and its patches, its version 7 is bringing some more cool new features.

The most important thing that I was waiting was the progression of project Ivy and it seems Angular 7 has lot to offer from. Some brief about what Ivy is and what changes it came up with in Angular 7 has also been covered in this chapter.

Note : This is an optional chapter which just describe very low level Angular framework release change details which you can skip. You can come here once you have completed this course and if it interests you. This is an add on chapter and is targeted for the audience who have some experience in working with Angular and want to know the framework level changes done in Angular 7.

The list of the following Angular 7 new features is based on the Angular Github change logs collated from all Angular 7 beta and RC versions - Github - angular/CHANGELOG.md

So, here is the list of new features what Angular is offering in its new release Angular 7

Changes in @angular/compiler

1. Add "original" placeholder value on extracted XMB

This is related to Angular i18nFormat internationalization format. XML Message Bundle (XMB) translation format is proposed by Unicode. http://cldr.unicode.org/development/development-process/design-proposals/xmb

Old behaviour

A message like <foo>Name: </foo> was generating this xmb message:

<msg id=123>Name: <ph name="INTERPOLATION"><ex>{{yourName}}</ex></ph></msg>

New behaviour

A message like <foo>Name: {{yourName}}</foo> is now generating this xmb message:

<msg id=123>Name: <ph name="INTERPOLATION"><ex>{{yourName}}</ex>{{yourName}}</ph></msg>

Changes in @angular/core

1. Add UrlSegment[] to CanLoad interface

CanLoad is a route guard hook in Angular Router. CanLoad was lacking parameter which can identify an incoming URL. ActivatedRoute as a parameter can not be provided to the CanLoad route guard because it is not constructed at this point of time when CanLoad gets fired. Thus the solution was to provide UrlSegment[] Array as a parameter to the CanLoad interface.

export interface CanLoad {
    canLoad(route: Route): Observable<boolean> | Promise<boolean> | boolean;	    
	canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean;

2. Warn if navigation triggered outside Angular zone

Since change detection does not work when navigation happens without Angular router, so user was not able to detect certain issues. Now if routing occurs without using Angular routers (or can say outside Angular zone), a new warning will be generated.

Changes in @angular/elements

1. Enable Shadow DOM v1 and slots

This is related to Angular core api. To encapsulate styles, we can provide ViewEncapsulation enum in @Component options. See here - https://angular.io/api/core/ViewEncapsulation

The issue was, if we have used other components inside the template, then the template content does not preserve. This happens only in case when we use ViewEncapsulation.ShadowDom in encapsulation property of the @Component directive. With this change, the renderer will not remove the existing contents of a root element when bootstrapping a component.

Read more about shadow DOM here : https://w3c.github.io/webcomponents/spec/shadow/

Changes in package compiler-cli

1. Add support to extend angularCompilerOptions

angularCompilerOptions is a part of tsconfig.json. The idea was to merge the common configuration under the base tsconfig.json, so that we wont have to repeat the common angularCompilerOptions configuration all over again in every angular component. Now, if the compiler's base class has this configuration, the common configuration related to angularCompilerOptions can be skipped.

Changes in @angular/platform-server

1. Update domino to v2.1.0

Domino is a server side implementation of DOM based on Mozilla's dom.js. Domino in Angular was introduced in Angular 5 release to support Angular Universal. Angular will now support Domino's version 2.1.0.

Angular updated to Typescript 3.1

Angular will now support the Typescript's latest version Typescript 3.1. Its good to see that Angular is leaving no stone unturned. Keeping everything updated is somewhat you can see how Angular team is making their efforts in every release.

Angular new rendering engine - Ivy

Ivy is a new rendering engine for Angular (Renderer3 as referenced in Angular code) Github - Angular Ivy(Renderer3)

At Google I/O 2018, Ivy was mentioned with an statement - "Ivy is an initiative to build next generation rendering pipeline for Angular". Ivy has changed the way Angular compiles the templates into DOM elements. Its backward compatible as well which means your existing Angular project should run if you switch to Ivy rendering.

In Ivy, the rendering pipeline has been simplified. This rendering engine makes tokens out of templates and these tokens acts as instructions. These instructions are directly converted into respective DOM elements. This change will make the Angular runtime process more faster than ever.

Ivy was enabled in Angular 6 as a switch which can toggle the new and previous rendering engine. The complete implementation is still in progress. The official Angular docs haven't mentioned it yet.

The following are some project Ivy specific changes introduced in Angular 7. These are the features to progress with the Ivy (Renderer3) implementation of the common extendable Renderer interface, so there would not be any breaking changes.

  • Allow combined context discovery for components, directives and elements.
  • Patch animations into metadata.
  • Resolve references to vars in .d.ts files.
  • Support animation @triggers in templates.
  • Support bootstrap in ngModuleDef.

To Do

* Note : These actions will be locked once done and hence can not be reverted.

1. Track your progress [Earn 200 points]

2. Provide your ratings to this chapter [Earn 100 points]