Angular 8.0: What to Expect With The Upgrade
angular

Article Overview

Reading Time: 41 minutes

Posted on: Wednesday August 21, 2019

The Annual Angular Conference has announced the release of Latest Angular 8. This release incorporates changes across the entire platform including the framework, Angular material (UI component library) and the CLI (Command Line Interface). It also brings along major bug fixes and some important build changes.

The IVY render engine seems to be Angular 8.0’s most important feature, acting as a new rendering pipeline. It generates small bundles and has an amazing compilation feature. The update has been made much easier by the Angular team, through their schematics should do most of the heavy lifting for you.

Ivy:

Angular Ivy is an initiative to build a next-generation rendering pipeline for Angular.

Angular 8.0 is the first release to officially offer a switch to opt-in into Ivy. You may feel that there is no point to it, but, at some point, probably in v9, Ivy will be the default.

Additionally, Ivy is built to provide benefits like faster re-build time, great backword compatibility and eliminated need of Metadata.json. Also, Ivy will significantly reduce the “Hello, world” Angular App bundle size from 30 kb to 2.7 Kb, and load time from 4 seconds to 2.2 seconds.

TypeScript 3.4:

Angular 8.0 now supports and requires TypeScript 3.4, so you’ll need to upgrade.

Bazel:

One of the new features of Angular 8 is the possibility to (more easily) build your CLI application with Bazel.

Bazel is a build tool developed by Google to build languages. Bazel allows you to build your backends and frontends with the same tool and to have remote builds (and cache) on a build farm.

Router:

Lazy-loading with Import () Syntax –

A new syntax has been introduced to declare your lazy-loading routes, using the import () syntax from TypeScript.

This has become the standard way to declare a lazy-loading route, in place of the string form. This syntax is similar to the ECMAScript standard and Ivy will only support this.

Analytics Data Usage –

Angular 8.0 has Angular CLI that records usage analytics data which enables Angular team to customize features and make personalized improvements.

Location –

Many things have been added to the location services in Angular to help people migrate from AngularJS.

PlatformLocation now offers access to the hostname, port and protocol, and a new getState() method allows to get the history.state. A MockPlatformLocation is also available to ease testing. All this is really useful if you are using ngUpgrade, otherwise you probably won’t need it.

Changes in ViewChild and ContentChild –

A Boolean static flag is necessary in Angular 8.0 to define the instance of a ViewChild and ContentChild. These instances are available in ngOnInit, but at other times these are not visible until ngAfterContentInit or ngAfterViewInit. This increases the complexity, as the elements will be loaded into the DOM in ngAfterViewInit or ngAfterContentInit.

Forms –

markAllAsTouched

The AbstractControl introduces new markAllAsTouched method in addition to the existing markAsDirty, markAsTouched, markAsPending, etc. Like markAsTouched, this new method marks a control & all its descendants as touched.

AbstractControl is the parent class of FormGroup, FormControl, FormArray, so the method is available on all reactive form entities.

FormArray.clear –

Previously, you had to loop over the controls to remove them one by one. The FormArray class will now allow you to quickly remove all the controls it contains.

Builder APIs and Workspace APIs in the CLI –

New Builder APIs will be applicable in ng build, ng test and ng run just like Schematics is into ng new, ng generate, ng add and ng update. It will help developers in processes like build and deployment using third-party libraries and tool.  Furthermore Angular will be leveraging the cloud for APIs, for example: Latest AngularFire adds a deploy command for simplifying the build & deploy to Firebase.

Previously the modification of angular.json in Schematics to bring changes in workspace configuration was done manually, which now is lot simpler due to new API in Angular 8.

Improved Web Worker Bundling –

Not only this, Angular 8.0 will by default serve each browser with separate bundles with CLI extension generating distinct bundles for old (ES5) browsers and modern (ES2015+) browsers. This fundamental is known as differential loading, where both browsers and user will receive/select optimized bundles according to their capabilities and requirement.

This will speed up applications through modern syntax and smaller amount of polyfills which in turn boosts the loading speed of modern browsers and time to turn quick interactive. At present, when you utilizeng update with –prod extension, it does the entire bundling with no special action required and Angular updates tsconfig.json. Afterwards CLI scan targeted JS level to make sure that if differential loading is needed to be leveraged. Finally when target is set to es2015, two separate bundles are generated and labeled. During runtime, modern browsers would understand the module type in HTML script tag and set aside any nomodule attribute. It will now load only exclusive modern browser bundles. Similarly an old browser would again recognize nomodule type and ignore module attribute. Hereby, end up loading legacy bundles only.

Service Worker:

Registration Strategy –

The service worker registration has a new option that allows you to specify when the registration should take place. Previously, the service worker had to wait for the application to be stable to register, to avoid application start-up. But if you were starting a recurring asynchronous task (like a polling process) on application bootstrap, the application could not be stable at all, as Angular considers an application to be stable if there is no pending task. So the service worker never registered, and you had to manually workaround it. With the new registrationStrategy option, you don’t have to concern yourself with this as Angular handles it.

  • registerWhenStable, the default, as explained above
  • registerImmediately, which doesn’t wait for the app to be stable and registers the Service Worker right away
  • registerDelay: $TIMEOUT with $TIMEOUT being the number of milliseconds to wait before the registration
  • A function returning an Observable, to define a custom strategy. The Service Worker will then register when the Observable emits its first value.

Bypass a Service Worker –

Now, it will be possible to bypass the Service Worker for a specific request by adding the ngsw-bypass header.

Multiple Apps on Sub-Domains –

Now, you can have multiple applications using @angular/service-worker on different sub-paths of the same domain. Earlier, this was not possible because each Service Worker would overwrite the caches of the others.

Points to remember while upgrading to Angular 8:

  1. Possibility of syntax errors due to the presence of TypeScript 3.4.
  2. Upgrade to Node.js version 12 or later one
  3. Update Angular Material in your application by following the instructions in the official guide for Angular upgrade.

 Conclusion:

The newest additions are significant, especially Ivy. So, if you are looking for up gradation to Angular 8.0, then go for it. You will definitely enjoy the performance gains with differential loading and application preparation for Ivy in the new version, especially in the light of the probability that Ivy may become default in coming versions of Angular.

Takeaway:

Angular 8.0 is better, exciting and takes care of a lot of bug fixes. The new opt-in Ivy Compiler feature is a feather in its cap, and Development Companies in Dubai are in full swing in harnessing the potential of Angular CLI to convert existing Angular web apps to web and mobile apps.