Whats new in Angular 7 - Features and Improvements

( 5 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/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.

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.

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.

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

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.