Angular 8 Features | What’s New in Angular 8?

September 26th, 2019 . 6 minutes read
Blog featured image

Angular is the most popular front-end framework to develop mobile apps, web applications and Single Page Applications (SPA). The latest version of Angular i.e. Angular 8 is in the market with its exclusive features.

Here are some points depicting the ‘What’s New’ facts about Angular 8 –

  • Differential Loading
  • Builders to customize and extend CLI.
  • Improved support for Web Workers.
  • Dynamic Imports for Lazy Routes
  • Improvements in migration from AngularJS $location with the new Unified Location Service.
  • IVY and Bazel aren’t ready for production yet.

Features like Differential Loading, Lazy Loading, Web Workers, IVY, Bazel, Tree Shaking, Backward Compatibility, etc. were introduced earlier in the previous versions but many enhancements and improvements have been made with Angular 8. Let’s discuss them in detail-

Differential Loading

Some older browsers support ES2015 i.e. Es5 while other modern browsers, unfortunately, do not support ES5 features and instead use newer version JavaScript ES2015+(ES6). Differential Loading basically means by sending newer codes to new browsers while the stable codes to older browsers.

Differential loading creates two groups of bundles when building for production: one for modern browsers that support ES15+ and another one for older browsers that only support the ES5 version of JavaScript. This feature improves the performance of the angular apps drastically.

Syntax:   $ ng build  –prod

CLI Workflow

Angular CLI automatically build bundles to ensure browser compatibility of your application with differential loading. With Angular 8, CLI has been improved further. Now, the ng build, ng test and ng run can be handled by 3rd-party libraries and tools such as ‘AngularFire’ that uses these capabilities with a deploy command.

Changes in Angular Material:

  • Importing directly from the root @angular/material entry-point is deprecated.
  • You should instead import from specific entry-points, e.g. @angular/material/button.
  • Angular CLI users can use ng update @angular/material to automatically migrate imports to the new style.

Import Dynamically in Lazy Loading

Lazy loading is another interesting feature of Angular Framework which ensures that your application is running smoothly and efficiently. It puts the non-critical resources on lazy mode, they keep loading slowly and get loaded fully at the time of requirement. This process reduces the loading time of the web page and improves overall performance.

To enable lazy loading, you can use the standard dynamic import () syntax or can automatically apply angular-lazy-route-fix tool rather than using “magic string” syntax.

Old Syntax:

{path: ‘lazy’, loadChildren: () => ‘./lazy/lazy.module#LazyModule’}

New Syntax:

{path: ‘lazy’, loadChildren: () => import(‘./lazy/lazy.module’).then(m => m.LazyModule)};

Angular Ivy – A Next-Generation Compilation and Rendering Pipeline

In this Angular World, Ivy is a kind of boon and a revolutionary step in the field of front-end development. It is a new rendering pipeline and view engine that will allow a noticeable improvement of bundle sizes.

One of the biggest challenges that every front-end developer face is to reduce the loading time of a website. Things get even harder in case of the slow-internet connection. With Angular Ivy came the opportunity to reduce the bundle size, the ultimate reason behind all these speed issues. Though, we will have to wait a little longer for Ivy because it is still marked as private.

  • If you want to try out Ivy before release, you can generate a new project through the following syntax:

ng new ivy-project –enable-ivy

  • This enables the CLI to store the following configuration entry in the tsconfig.app.json:

“angularCompilerOptions”: {“enableIvy”: true}

  • It can also be added manually after updating to Angular 8 to test an existing application with Ivy.

#1 Tree Shaking

Ivy reduces the bundles’ size through tree shaking feature that wipes away all the unused and unreferenced code. During the bundling process, tree shaking eliminates the dead code using tools like Uglify and Rollup.

  • In the previous rendering pipeline, the compiler has to go through the whole conditional code paths whether used or not during the runtime. But tree shaking tools bundle only the reference code.
  • Now, with the introduction of Ivy Pipeline, the Angular template passes through the compiler and generates Template Instructions skipping Template Data Structures and Interpreter. The template instructions do not require a runtime interpreter to process at the time of execution and will directly create DOM (Document Object Model).
  • The bundles can further be optimized by splitting the code into smaller chunks and lazy load (Code Splitting) with different angular routes.

Below have been given the results of the Hello World application. Earlier it was 36 kb while Ivy generated only 2.7 kb, that is a huge reduction in bundle size. You can see the results in the image depicted here-

tree shaking

#2 Locality & Backward Compatibility

In Ivy, each component is independent while in the previous angular versions, the components used to show compilation dependencies. Locality process (another feature of Ivy) compiles one file at a time independently, which means a smaller set of instructions, resulting in the faster compilation. It need not compile the entire project files for partial changes, it can compile the changes only.

Ivy ensures backward compatibility that won’t let the existing applications break. It means that the latest version will be compatible with the older versions i.e. you can easily upgrade and migrate the projects to the Ivy version.

Bazel Support

Bazel has made CLI application building far easier. However, it is under experiment and not recommended for production yet. It utilizes an incremental build approach i.e. it builds further to what has changed since the last time rather than the entire application.  

  • It supports multiple languages and thus able to build backend and frontend applications with the same tool.
  • It breaks an app into many build units that greatly reduces the build time of an application as you are dealing with a small code per build.

Web Workers Support:

Web Workers are the means to speed up your application as they allow you to shift the work to a background thread that can perform tasks without interfering with the UI. A web worker is the JavaScript that runs independently in. the background without affecting the performance of the page.

Usually, the page becomes unresponsive while executing the HTML script until it gets finished. With the introduction of a web worker, you can do other things while the script is being executed.

Bottom Line:

This is just the beginning and there is so much more to do in the field of Angular. You can get 10 Reasons to Use Angular in Salesforce Visualforce Pages. The angular team is currently working on Angular 9 which is going to be released on November 2019. Stay connected with us to get to know about all the latest tech releases.


Author: payal