So, finally, the wait is over and Angular, the most anticipated version 8 has been released today on May 29, 2019, at NgConf 2019. The new release includes some new features, updates, and the most awaited Ivy while it has extended and upgraded most of its existing Angular v7 features to the new Angular v8.

You can still use ng update ; command to switch to new updates. However, Ivy, which is still not the part of Angular v8, is the talk of the town. So, we are here with a detailed analysis of all new and updated features and much more.

What New Features Angular v8 Came up with

Let’s Begin with Ivy

We don’t want to keep you waiting whether Ivy is the part Angular v8 or not. If we tell you straightforwardly, then it’s not (the part of Angular version 8 so far). You still have to wait for Ivy to be the part of Angular by default. However, its preview version has been released for testing and it has been recommended not to use it for production till the next announcement, though you can use the legacy ‘classic view engine’ and Differential Loading for the same.

What is Ivy in Angular?

Ivy has been the most awaited feature of Angular which developers and users have been waiting since it was announced during the release of Angular v6. It’s a new render engine and Angular compiler, which is capable enough to produce smaller bundles and simplifies incremental compiling. According to Angular, it can generate basic hello-world app just in 3.2KB after minification + gzip, though you need to utilize modern browser for the smaller bundle. When you have a smaller application, it will help you boost the performance and speed of the application while loading time will be reduced to a great extent.

If you still want to use Ivy, you need to enable it by adding "enableIvy": true in your angularCompilerOptions and you are set to use it. Remember, you need to restart the application after adding Ivy to get it worked properly.

Differential Loading

Differential Loading is all new process which the browser, based on its capabilities, chooses between modern and legacy JavaScript. It frees developers to determine the browsers’ compatibility. When users load applications, it will automatically select between modern build (es2015) and legacy build (es5).

When a user uses ng update , you will also get a tsconfig.json update and it helps you decide whether you need differential loading after looking at the target JS level in your tsconfig.json . That means level two bundles are generated when the ‘ target ‘ is set to ‘ es2015 ,’ and the script tag will be used to load the right bundles.

<script type="module" src="…"> Modern JS

<script nomodule src="…"> Legacy JS

Even if you don’t use Ivy, the differential loading will help compress the bundle size. According to Angular blog, you can save upto 7-20% of bundle size.

Lazy Loading

Lazy Loading has been the part of Angular since the very beginning. Now the route configuration uses dynamic imports and that is done using loadChildren key in the route configuration.

Before the path looked like;

{path: '/admin', loadChildren: './admin/admin.module#AdminModule'}

Now, it will look like;

{path: `/admin`, loadChildren: () => import(`./admin/admin.module`).then(m => m.AdminModule)}

The benefit of dynamic import is it will enhance the performance of the editors such as VSCode and WebStorm.

Builder APIs in the CLI

It works like Schematics which helps with ‘ ng new ‘ ‘ ng generate ‘ ‘ ng add ‘ and ‘ ng update ‘ command, Builder APIs will help you tap into ‘ ng build ‘ ‘ ng test ‘ and ‘ ng run ,’ utilizing which you can perform processes like build and deployment.

Workspace APIs in the CLI

Earlier to make changes in the Workspace configuration, developers, using Schematics, used to modify their ‘ angular.json ‘ manually. The new API, introduced by Angular 8.0.0, has totally simplified the process -such as modify and read the file.

Updated Features of Angular v8

TypeScript 3.4

Angular Version 8 supports 3.4 now as it was previously supported TS 3.1. TypeScript is a programming language based on JavaScript. It is advanced and helps developers type codes, emitting all common errors and typos. It supports fast development and coding.

Service Worker

The Service Worker has also received updates which enables you to specify when the registration should take place while in the previous version (such as Angular v7 or older), it used to wait for the service worker to be stable to get register and avoid the slow start.

The new, as we have discussed, have been updated with new registrationStrategy which you can apply as per your requirement.

Such as;

registerWhenStable to keep as default

registerImmediately to register the service worker immediately without wait

registerDelay:$TIMEOUT with $TIMEOUT to set a time such as the number of milliseconds you want to wait before the registration.

Take for an example;

In case you want the registration right after two seconds, you can use the registerDelay:$TIMEOUT with $TIMEOUT command such as;

providers: [

ServiceWorkerModule.register('/ngsw-worker.js', {

enabled: environment.production,

registrationStrategy: 'registerDelay:2000'

}),

// ...

]

Note: You need to create an Observable to define strategy. That means the registration will take place when the first value is emitted by the Observable.

With the new updates, you can now bypass the service worker with the command or header ‘ ngsw-bypass ‘ for a specific request.

this.http.get('api/users', { headers: { 'ngsw-bypass': true } });

Furthermore, you can have multiple applications utilizing ‘ @angular/service-worker ‘ which was not possible previously.

AngularJS Migration Improvement

AngularJS uses $location service to shift responsibilities to Angular, now it will be done using LocationUpgradeModule which will empower unified location service and help to migrate from AngularJS $location to Angular Location. It will help to improve the lives of application which uses ‘ ngUpgrade ,’ requiring routing for AngularJS and Angular application.

Deprecation Guide

As the new version 8 of Angular has been released today, there are some old features, and one of the top features which have been deprecated is @angluar/platform-webworker which was used for building the application, SEO. However, the framework has stated that it is committed to maintaining the Semantic Versioning and a high degree of stability across major versions.

Conclusion

Angular v8 has been in the fray now and it is going to give a tough fight to all similar frameworks such as ReactJS, Vue.js and others alike. Angular 8 is here for developers with lots of new and updated features which is going to make the framework interesting for developers to use. However, the most anticipated Ivy is going to give you a miss for some time now as it is still in preview mode and you might have to wait a couple of weeks for it, though you have an alternative to use such as Differential Loading which compresses the file size upto 7-20%. Similarly, there are so many features which have been upgraded or have received a new way of functioning.

Overall, in version 8, you have most of the same features which you have been using in the previous version. So, the focus was on ‘evolution instead of revolution.’

So, if you have any project that you want develop using the new Angular v8, our Angular development team is all set make the difference. We are your choice when it comes to hire qualified Angular developers.