by

Angular 8 Features

Hi Friends,

Angular 8 is released. Here are some of the features list.

  • Differential Loading :- Here is the simple visual representation of differential loading.

using this feature will decrease bundle size significantly close to 9 to 20% depending on the app. Smaller bundle size means great performance. Therefore, angular will build  additional files with polyfills, and they will be injected with nomodule attribute. you can find more detail about nomodule at below link

From html spec, it says

The nomodule attribute is a boolean attribute that prevents a script from being executed in user agents that support module scripts. This allows selective execution of module scripts in modern user agents and classic scripts in older user agents, as shown below. The nomodule attribute must not be specified on module scripts (and will be ignored if it is).

Therefore, when we do ng build, two versions of build output will be there targeting different es versions.

Similarly, our dist folder will also have two versions

And it will be utilized in index.html file like shown below.

The disadvantage is the time required for the build process is doubled. Different browsers can now decide which version of the bundles to load. This prevents browsers with support for ECMAScript modules. The ECMAScript 2015+ bundles, are implemented by the CLI via type=”module”. Thus, older browsers will ignore these script tags:

  • SVG as template : – Now, we can use svg templates as a templateUrl.

  • Ivy Renderer ‘Experimental Edition’ :-  Ivy is still in the experimental phase. However, with Angular 8 release you can test it by creating an app with enable-ivy flag set to true as shown below. There are couple of ways to to do that. For an existing project, it will be like shown below. This needs to be done in tsconfig.app.json file.
"angularCompilerOptions": {"enableIvy": true}

And, for new app, it will be like

ng new my-app --enable-ivy

Let’s enable the same in the project and see the same in action. I already have sample angular 8 project running. Now, I enabled ivy with first option on it. After enabling the same, I build the sample app with prod switch with following commands like shown below.

And, this further reduced the bundle size heavily to under 600kb for a sample app.

Now, when I run the same with prod flag, it will produce the following timeline in network tab.

Look at the bundle size and duration as well. Its insanely fast. Following features will be supported by Ivy.

  • Faster Compilation.
  • Type checking for templates.
  • Smaller Bundle Sizes
  • Backward compatibility.
  • Template debugging.

Note:- Currently, Ivy is in experimental phase. This will be released with full features in angular 9. Till then, it is not recommended for production use.

  • Bazel Support:- Bazel support will be provided by angular 8, although experimental edition. Full blown edition expected to be available from angular 9. If you like to know more about bazel, then refer its documentation @bazel.

Following options are there to add bazel support in your angular project.

ng add @angular/bazel

This option is to add bazel in existing project angular 8 project. However, you can also create new project with bazel enabled with following command.

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

Following are the advantages of using bazel.

  • Faster build time. First build takes time, but consecutive builds will be a lot faster.
  • Incremental Build: you will be able to build and deploy only what has changed rather than the entire App.
  • You can also eject the Bazel files, which are hidden by default.

Apart from this, we have

  • Builders API:- Builders are functions that implement the logic and behaviour for a task that can replace a command, for example running the linter. The new version allows us to use Builders API, also known as Architect API. Angular is already using it for usual operations like serve, build, test, etc… Here is the glimpse of the same.

Now, we can write our own builder for customizing any operations. A builder receives two arguments; an input (or options), and a context which provides communication between the CLI and the builder. Here is the basic syntax for that.

Improvements in Lazy Loading:- we can now use the import() operator to fetch a module as we navigate around our application. Initially it was based on string type. Following is the simplest example you can think of.  

  • Web Worker:- Now, you can make use of web worker and delegate the time consuming task to this. This will run on its own thread. Now, we can generate web worker from CLI using below command
ng g webWorker <worker-name>

After that we have service worker.

  • Service Worker:- PWA usage across apps is getting popular day by day. Hence, couple of improvements done under this segment like service worker registration options added. Also, support for multiple apps under same domain added.

We have also got the support of angular firebase.

Angular Firebase:- Now, angular firebase is baked in angular CLI itself. Therefore, now onwards you can deploy your angular app from CLI itself to firebase. This is a two step process. First you need to add firebase in the project and then deploy the same.

ng add @angular/fire

ng run [ANGULAR_PROJECT_NAME]:deploy

Having said that, I covered almost most of the important features released in angular 8. For upgrade path, you can always check Update. I hope you would have liked this discussion. Thanks for joining me.

Thanks,
Rahul Sahay
Happy Coding