1. Home
  2. Angular
  3. Diving into the new features and updates of Angular 8

New features and updates of Angular 8

Amit Ashwini

Amit Ashwini

Amit helps top companies build remarkable web & mobile products via Zibtek

Last updated on

Angular 8 is an upcoming upgrade of Google’s popular framework Angular. It is used for developing mobile, web, and desktop applications. Angular 8 has reached the release candidate stage and its final release is anticipated to be soon.

Let’s have a look at the new features and updates of Angular 8.

Angular8-4_16X9-1-1180x664-bggav

Table of Contents

1. Angular Ivy as an opt-in preview

The Angular team is introducing Angular Ivy as an opt-in preview in Angular 8. With this, you can:

  1. Preview how your application will work with Ivy.
  2. Give feedback to the Angular team so they can make improvements in Ivy for the next release.

What is Angular Ivy?

Angular Ivy is a new view engine of Angular 8. In general, Angular view engine translates templates and components into regular HTML and JavaScript so that browser can understand, interpret and display.

Over the current Angular view engine, Angular Ivy offers the following benefits:

  • Developers and testers alike can easily read and understand the code generated by Angular compiler.
  • With decrease in payload size, browsers will take lesser time to download the application even with a slow network connection.
  • Parsing a program for Angular compiler will become significantly faster.
  • With better template type checking, it’s easy to catch bugs and errors in the applications.  
  • Broadly compatible with existing Angular applications.

But there are some areas where Ivy is lacking. Some drawbacks:

  • Angular Universal support is not fully compatible with Ivy.
  • Apps using Angular Material – a UI component framework that provides reusable, well-tested, and accessible UI components based on Material Design – is not running well with Ivy.

In the coming year, a full rollout of Ivy is planned for Angular 9.     

2. Differential loading

Command Line Interface (CLI) will now produce separate bundles for modern JavaScript (ES2015+) and legacy JavaScript (ES5). Advanced modern browsers with ES2015+ support will be able to download more productive app bundles. It removes the overhead of browser compatibility. It also improves the page loading time and reduces the amount of time it takes for the page content to become interactive for users.

3. Improved service worker

In previous versions of Angular, service worker (a script that handles caching for applications in the web browser) cached multiple applications in a different domain of cache DB files. This has decelerated the performance of apps. To address this issue, service workers in Angular 8 will support multiple apps on different subpaths of a domain. This will empower applications and optimize the end-user experience.

4. Enhanced web worker support

Web workers are modernizing front-end development by enabling you to write code that runs in a separate hardware thread. It improves the run-time speed of applications. To help optimize the parallelizability and speed of applications, the Angular team is adding bundling support for web workers to CLI.

5. Opt-In Usage Sharing

To better understand developers’ needs in using Angular applications, the Angular team is adding opt-in telemetry to Angular CLI. Opt-in usage sharing will collect usage details like build speed and commands used. The idea of introducing this opt-in is to get more information about how developers use Angular. This will help the Angular team to make better Angular development tools.   

Other new capabilities planned for Angular 8

  • CLI usage – Makes logging more configurable

With CLI usage and a module bundler tool such as webpack-plugins, excessive log messages will be filtered. It will make logging more configurable.

  • ‘Template-var-assignment’- Analyzes template files

An updated “template-var-assignment” feature will review the template files and notify you if any template variable is not assigned a value. It will speed up the front-end development process, as you need not check all variables in the template files.

  • Angular Router Backwards Compatibility

The backward compatibility feature in Angular router will help you to easily upgrade larger Angular projects. You can smoothly migrate your old Angular web apps to modern Angular.

To move to a newer version of Angular-

  • Enable lazy loading – It is a technique to load modules only when they are needed.
  • Use $route APIs – $route is used for deep linking URLs. It tries to map the path to an existing route definition.

By allowing lazy loading technique of AngularJS apps using $route APIs, you can make the transition from older Angular apps to new Angular.

  • Upgraded Dependency

To upgrade the application’s efficiency and modularity, the Angular team is updating Angular dependencies on tools like Typescript, RxJs, and Node. This will make your apps flexible, robust, testable and maintainable.

  • Createinjector() – an API for Ivy

Createinjector() has been removed from the public API. Createinjector() is an API for Ivy renderer, which is set to release in its beta version.

  • Implementation of bug fixes for Bazel

Bazel is a free software tool that you can use to build and test code quickly. In previous versions of Angular, code with large modules had memory issues and this resulted in process failure. To address this issue, the Angular team has increased the node memory limit for ng-module.

To know about ng-module, read the following:

Ng-module identifies the module’s own components and directives. With the help of exports property, it makes some of the components and directives as public, so that external components can also use them.

  • Improved performance of tiny images in your application

In Angular 8, you will see an improved performance of smaller images that use pngcrush. It is a free and open-source command-line utility that reduces the size of PNG files without losing its quality.

  • Hash-based navigation option for router

With the addition of hash-based feature in setUpLocationSync, you will be able to pass an option to setUpLocationSync. So, whenever there are location changes in the router, it will run in hash-based apps.

  • Support of TypeScript 3.3

Applications built using Angular CLI will also use the latest version of TypeScript (3.3). With the support of TypeScript 3.3, the Angular team is keeping pace with everything the latest TypeScript version has to offer.

Click here to download the Angular 8 release candidate from GitHub.

// Related Blogs

// Find jobs by category

You've got the vision, we help you create the best squad. Pick from our highly skilled lineup of the best independent engineers in the world.

Copyright @2024 Flexiple Inc