Angular 8.0: Summary of Upgraded Features & New Add-Ons.

Google recently released an Angular 8.0 version with some major upgrades. The most-awaited upgrade of existing Angular 7 comes up with exceptional features specifically for core framework & libraries such as Angular Material. Angular developers are rolling up their sleeves to make the best out from this update that significantly goes around the migration of CLI to v8 & upgrading a project from v7 to Angular 8. Therefore, it can be said that migrating your existing apps turns out to be simpler & comparatively faster with upgraded features of IVY engine & integrated ng update command.

What’s new in Angular 8.0 upgrade?

The latest version of Angular 8 introduces a bucket-full of performance-driven improvements & add-ons to upgrade your current Angular 7 project to version 8. One more point to highlight about Angular 8 is its dependency on the updated versions of TypeScript 3.4+ and Node 12+. The first-ever announcement by Google in 2019 is Angular 8 update & it is all set to remain a hot topic of discussion among tech geeks.  So, let’s discuss some major add-ons in Angular 8.0 version upgrade:

– Ivy Rendering Engine

One of the prime updates in the newly released Angular 8.0 version is IVY render engine. IVY is a building block of future innovations involved in this technology and it’s not a new thing in the Angular world. IVY is meant for generating small bundles to conduct incremental compilation. With the release of Angular 8, Google introduced Ivy’s preview version as an option to get initial feedback from the clients involved in Angular development. Therefore, it is advised not to use Ivy for the production environment for now.

You must consider these pros of using Ivy in any application

• It will offer a faster compilation.
• Bundle size is comparatively smaller than the existing bundled size compiled on an app.
• It will enable advanced type checking to find errors or issues at building time and eliminate their recurrence when accessed by a user.
• Generating codes using Angular compiler will be quick & easier to read and understand.
• It will be possible to debug templates with ivy-enable options.

"angular CompilerOptions": { "enableIvy": true }

You can add the above configurations to the existing angular app for upgrading it into Angular 8. It is also suggested to stay on debug mode with AOT compilation mode to use Ivy for an app.

– Differential loading for performance enhancement

The coolest feature with Angular CLI assists developers to target a specific browser. es2015 is a new default browser that was previously stored in tsconfig.json file. It also allows users to create an app with the integration of JS bundles & polyfills. If you want to build an app for older browser then you need to consider a specific browser list file while for building an application using CLI is only meant for a modern browser that comes with ES6 features. The angular update will let you develop apps with differential loading to focus on optimized performance as the bundle size gets reduced from 9% to 20% in ES2015 version.

– Bazel support

This time, Google brought Bazel as an open source tool and it is not a ready-to-use option in Angular 8. It is released as an opt-in option with Angular 8 version and it will be integrated with Angular CLI in version 9.  It will not only speed up the app building process but also reduce your efforts by allowing you to deploy small changes instead of doing it from scratch. Additionally, it will enable users to eject the hidden Bazel file easily.

The command for adding Bazel support is:

• ng add @angular/bazel

And the commands for creating a new app using Bazel is:

• npm install -g @angular/bazel
• ng new my-app –colection=@angular/bazel

– Dynamic imports for lazy routes

One must be using dynamic import syntax rather than custom string for the lazy-loaded route with Angular 8. This will significantly enable TypeScript and linters to report missing & misspelled modules if there are any.

You can check out the difference between the previous command for lazy loaded import:

{ path: '/cart', loadChildren: './cart/cart.module#CartModule' }

That is now changed into:

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

How to upgrade from existing Angular 7 to Angular 8.0

Fortunately, upgrading your app from Angular 7 to Angular 8 won’t bother you as far as previous updates are considered. You just have only one command to initiate the process to upgrade your existing project to Angular 8:

$ ng update @angular/cli @angular/core

The above command will automatically migrate those lazy-loaded route imports to the fresh import syntax with these two major considerations:

• Some issues relating to syntax errors will arise as Angular 8 uses TypeScript 3.
• If you want to make sure that you’re using Node.js version 12 then you can run $ node –v to check out its version.

The record-breaking popularity of Angular justifies its prominence in the creation of high-performing applications for cross platforms. The arrival of Angular 8 upgrade has raised the eyebrows of many tech experts and it will be quite interesting to know their opinions on the exclusive features & integrations introduced through the update. Meanwhile, you’re planning to upgrade your existing project to the newest Angular 8 version, we’re stepping ahead with a strategic approach to deploy the new functionalities with Angular app development. Hope, you’ve got a clear insight of Angular 8.0 upgrade after going through the above blog!