Angular v8 is Released

Angular v8 is Released

Angular's 8.0.0 release is here! This is a major release that brings some nice features.

Let's talk about some of the changes.

How to update to version 8

Visit update.angular.io for detailed information and guidance. For most developers, one command should take care of this update:

ng update @angular/cli @angular/core

Differential Loading by Default

Differential loading is a process by which the browser chooses between modern or legacy JavaScript based on its own capabilities. We now take advantage of this by default by performing a modern build (es2015) and a legacy build (es5) of your application. When users load your application, they’ll automatically get the bundle they need.

If you use ng update, we update your tsconfig.jsonfor you to take advantage of this. Our CLI looks at the target JS level in your tsconfig.json to determine whether or not to take advantage of Differential Loading.

{
  "compilerOptions": {
  …
  "module": "esnext",
  "moduleResolution": "node",
  …
  "target": "es2015",
  …
},


When target is set to es2015, we generate and label two bundles.

At runtime, the browser uses attributes on the script tag to load the right bundle.

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

<script nomodule src="…"> // Legacy JS

On angular.io we saved over 40kB of initial bundle size for modern browsers. From the community we’ve heard that applications generally save 7–20% of their bundle size, depending on the amount of modern JavaScript features they take advantage of.


The bundle size on angular.io shrunk by about 41Kb

Learn more about differential loading.

Route Configurations use Dynamic Imports

We highly recommend you lazily load parts of your application using the router. This is accomplished by using the loadChildren key in your route configuration.

Previously this looked like:

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

This syntax was custom to Angular and built into our toolchain. With version 8 we’re migrating to the industry standard dynamic imports.

Now this will look like:

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

This will improve the support from editors like VSCode and WebStorm who will now be able to understand and validate these imports for you.

If you use ng update, we’ll update your code automatically to use the new best practice.

Builder APIs in the CLI

In the same way that Schematics allow you to tap into ng new ng generate ng add and ng update, we’ve released new Builder APIs that allow you to tap into ng build ng test and ng run to perform processes like build and deployment.

Check out our blog post on these new APIs.

Or read the API documentation.

We’ve also been working with cloud providers to begin taking advantage of these APIs. Today you can try the latest version of AngularFire, which adds a deploy command, making build & deploy to Firebase easier than ever:

ng add @angular/fire
ng run my-app:deploy

Once installed, this deployment command will both build and deploy your application in the way recommended by AngularFire.

Workspace APIs in the CLI

Previously developers using Schematics had to manually open and modify their angular.json to make changes to the workspace configuration. With 8.0, we’re introducing a new API to make it easier to read and modify this file.

Read more about the available Workspace APIs.

Web Worker Support

Web workers are a great way to speed up your application if you do any sort of cpu-intensive processing. Web workers allow you to offload work to a background thread, such as image or video manipulation. We use web workers on angular.io for in-app search indexing.

You can now generate new web workers from the CLI. To add a worker to your project, you can run:

ng generate webWorker my-worker

Once you have a web worker, you can use it normally in your application, and the CLI will be able to bundle and code split it correctly:

const worker = new Worker(`./my-worker.worker`, { type: `module` });

Read more about web workers in the Angular CLI.

AngularJS Migration Improvements

If you use the $location service in an AngularJS application, Angular now provides a LocationUpgradeModule that enables a unified location service that shifts responsibilities from the AngularJS $location service to the Angular Location Service. This should improve the lives of applications using ngUpgrade who need routing in both the AngularJS and Angular part of their application.

Read more about the Unified Angular Location Service.

We’ve also documented best practices around lazy loading parts of your AngularJS application from Angular, making it easier to migrate the most commonly used features first, and only loading AngularJS for a subset of your application.

Read more about Lazy Loading AngularJS.

New Deprecation Guide

We are committed to maintaining Semantic Versioning and a high degree of stability even across major versions. For our public API, we are committed to supporting features for N+2 releases. This means that a feature that is deprecated in 8.1 will keep working in the following two major releases (9 and 10). For example, we are deprecating platform-webworker in version 8.

We are making it easier to find deprecations and removals in Angular. For a comprehensive list of all deprecations, see the new Deprecation Guide.

Ivy & Bazel

Ivy (new rendering engine) is one of the most exciting things in the Angular pipeline. These are opt-in previews and more updates will come soon.

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Read Also

Angular 7 (formerly Angular 2) - The Complete Guide

Angular & NodeJS - The MEAN Stack Guide

The Web Developer Bootcamp

Angular 8 + Spring Boot 2.2: Build a CRUD App Today!

Full Stack Developers: Everything You Need to Know

MEAN Stack Tutorial MongoDB, ExpressJS, AngularJS and NodeJS

Setting up your new Mac for MEAN Stack development

MEAN Stack Tutorial – Angular 7 CRUD App with Bootstrap 4

How to manage Authentication in the MEAN stack

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

Important reasons for developers to adopt Angular JS development

In the current scenarios, e-commerce companies are very keen to create an online impact. The web and app development market are at its peak of popularity. There is a high demand for web and app developers with a growing number of websites. Angular...

Mobile App Development Company India | Ecommerce Web Development Company India

Best Mobile App Development Company India, WebClues Global is one of the leading web and mobile app development company. Our team offers complete IT solutions including Cross-Platform App Development, CMS & E-Commerce, and UI/UX Design.