Angular

Angular 8 – New features – IVY, Bazel, Differential Loading and breaking changes

Angular has released its latest version, Angular version 8 and came up with new features & few breaking changes....

Written by admin · 3 min read >
angular version 8

Angular has released its latest version, Angular version 8 [May 28, 2019] and came up with new features & few breaking changes. This was a major release because Angular Framework along with Angular Material and Angular CLI all three are now upgraded to Version-8

In this article, we will discuss the latest features: Differential Loading, IVY, Bazel, etc and how to update to version 8. We will also discuss about how to avoid breaking changes. So let’s start…

Angular version 8

Update Angular CLI and Packages

First, you need to update Angular CLI version 8 and angular packages by using ng update

ng update @angular/cli @angular/core
angular-cli-8

Experimental support for IVY

Ivy is a huge part of this release. It is the most important feature of Angular version 8. IVY is the new internal rendering engine, It will drastically shrink the bundle size. It makes incremental compilation easier and also going to very cool features in the future.

The angular team is currently working on this feature. In this release, it is not stable and Not ready for production. We’ll have to wait a little bit more for Ivy to be ready for official use with Angular.

We can try an opt-in preview for IVY

For a new app, You can use Ivy renderer to the angular application via just setting a flag –enable-ivy

ng new my-ivy-app --enable-ivy

You can update IVY to your current app

ng update @angular/core --next

Once you are on the latest version, update your src/tsconfig.app.json to include “enableIvy”: true under a top-level angularCompilerOptions key.

{
  "compilerOptions": { ... },
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

You can also check fAngular official link for details: https://angular.io/guide/ivy

Experimental support for Bazel

Bazel is a build tool that was used by Google and now it is an open source. Angular added the experimental support for Bazel and it is one of the new features of Angular version 8. The Angular framework itself is built with Bazel.

Brazel helps in incremental build and tests

This is the most useful feature for developers. Bazel orchestrates build process [webpack, typescript] to optimize overall build flow and speed.

  • It is very similar to what Gradle does in the Java world.
  • The possibility of building your backends and frontends with the same tool

You can start with Bazel by installing it globally

npm i -g @angular/bazel
ng new my-bazel-app --collection=@angular/bazel

Bazel in Not fully completed and tested for Angular version 8. In the next release, we are expecting production support for this feature. You can check Angular official link for more support https://angular.io/guide/bazel

Performance Optimization using Differential loading

This is again one of the most important features of Angular 8. Differential loading enables the browser to choose between modern [ES6+] and legacy [ES5] javascript/bundle based on their capacity.

ng build --prod

Ng build --prod using CLI automatically creates multiple production bundles for Modern and Legacy browsers

  • Differential loading decrease the bundle size 7-20% for modern browsers
  • Differential Loading makes your app more performant by decreasing side of bundle
  • When we build an application for production – two bundles created
  • One bundle for Modern browsers that support ES6+
  • Second bundle for Legacy(Older) browsers that only support ES5

When your app load in browser your correct build loaded in the browser automatically. Modern browser bundle size always smaller than legacy browsers[ES5]

Lazy loading Routes using dynamic Import() Syntax

Lazy Loading is a concept by which allows to load the code for the routes only when user navigates to those routes for the first time.This improves the performance of app. In Angular 8 there is no change in concept only change in syntax. You can declare your lazy-loading routes, using the import()

//Before Angular 8 
const routes: Routes = [
  {
    path: 'product-list',
    loadChildren: './product-list/product-list.module#ProductListModule',
  }
];
//In Angular 8 
const routes: Routes = [
  {
    path: 'product-list',
    loadChildren: () => import('./product-list/product-list.module').then(m => m.ProductListModule)
  }];

This change automatically added to your current app If you run ng update @angular/cli

Angular 8 – Breaking Changes

Use Typescript 3.4, Nodejs 12 and Angular Material 8 version

  • Angular version 8 supports Nodejs version 12 or later and Typescript 3.4.X or later and even requires it, so you’ll need to upgrade
  • To check the Nodejs version run node -v command on terminal
  • You can check the NPM version using the command npm -v
  • To check Typescript version run tsc -v

Microsoft blog what Typescript 3.4 bring https://devblogs.microsoft.com/typescript/announcing-typescript-3-4

Bye Bye @angular/http

From Angular 8 version, There will be no support for @angular/http. Angular had already depreciated the use of @angular/http in Angular 4 and provide an efficient and secure HTTP call by using @angular/common/http. You can use HttpClientModule and HttpClient

Syntax changes for @ViewChild and @ContentChild

In Angular 8, You have to add extra static flag with boolean value {static:false}

//Before Angular 8
@ViewChild('foo') foo: ElementRef;


//Now Angular 8
@ViewChild('foo', {static: false}) foo: ElementRef;

Conclusion

In this story, We have discussed the important and new features of Angular 8, about breaking changes and how to update Angular version 8. I will create a new article where we will develop a new hello-angular8 app. Now I have huge expectation with Angular version 9, considering It will take care following points:

Expectation from Angular Version 9

  • Stable support for Bazel [fully usable as part of CLI]
  • Stable support for IVY [Default View Engine]
  • Alternative bootstrap API
  • No Modules? No zone.js? [Not sure]
  • Smaller bundle[70-90% smaller]

I would appreciate if you write your views on this topic. Happy Learning ..

Leave a Reply

Your email address will not be published. Required fields are marked *