How to Upgrade Angular Packages  and Enable the Ivy Compiler

How to Upgrade Angular Packages  and Enable the Ivy Compiler

This post focuses on the process of updating the packages used for an Angular project as well as activating the Ivy compiler.

Updating Your Packages and the Ivy Compiler

The following post focuses on the process of updating the packages used for an Angular project as well as activating the Ivy compiler. Packages can be updated in two ways:

Auto Upgrade

The first way is the easiest one, as it undertakes to do all the work for us with the Angular CLI. You may be able to update your project using the ng update command. Before proceeding with this process, we should install the latest version of Angular so we can be sure that we will update our existing project to the latest release. To do that, we can run the following commands in the Angular CLI.

npm i -g @angular/[email protected] update

Manual Upgrade

You can manually upgrade Angular’s most common packages using the commands below, but, you should keep in mind that you may need to add additional packages based on what you have already described in your package.json file. Another thing you should consider is that the following commands are using the @next tag, which will upgrade your packages to the latest beta or rc versions of Angular. To prevent this, you should change this tag to @latest for the latest stable version.

npm i -g @angular/[email protected]
# depencencies
npm i @angular/{common,compiler,forms,platform-browser,platform-browser-dynamic,platform-server,router}@next 
npm i rxjs core-js zone.js
# devDependencies
npm i @angular-devkit/[email protected] @angular/{compiler-cli,cli,language-service}@next -D

It is not a very difficult process but it requires the proper attention.

Angular 8 Ivy Compiler— Opt in Feature

The Ivy initiative is bringing new-age advancement to the process that translates Angular templates into browser renders. Ivy is supposed to reduce the size of bundles. On top of it, Ivy will enhance the performance by making it possible for apps to load quickly on slow connections. Also, the apps would transform into something that is simpler to understand and debug even as they scale and grow over time. The most important things (in my opinion) about the Ivy rollout are:

  • Reduction in bundle sizes.
  • Fast app loading on slow connections.
  • Quick debugging and simpler interface.

The new render pipeline design promises better results, faster interface, and smoother development while fulfilling the above three principles. Another meaningful thing about Ivy is that it is tree shaking. Meaning that developers will only need to recompile components that are being modified for a project.

The tree shaking technique, is a build-optimization that ensures that the unusable code will not be packaged into the final bundle.

Refer to the official Angular Ivy guide for more information or if you run into issues with our next step in which we will enable Ivy compiler.

Enabling Ivy Mode

To enable the Ivy compiler, we must update our tsconfig.json file. The first point in which we should make an update is in the compilerOptions key. Our tsconfig.json file may be like this one: “module”: “es2015”. Now we have to change the value of compiler options from es2015 to esnext. The second step is that we need to add a new key into this file. This key should have the name angularCompilerOptions and, as the value, we add an object which is telling Angular to use the Ivy compiler: {“enableIvy”: true,“allowEmptyCodegenFiles”: true }. After that, our modified tsconfig.json file should look like the following.

{
  "compilerOptions": {
    "module": "esnext",
    // ...
  },
  "angularCompilerOptions": {
    "enableIvy": true,
    "allowEmptyCodegenFiles": true
  }
}

The next step is to update our angular.json file. In order to use Ivy compiler we need to enable “aot” by setting it’s value into true like below.

{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            ...
            "aot": true,
          }
        }
      }
    }
  }
}

Just one last thing to do! We have to add a script to our package.json.

{
  "scripts": {
    ...
    "postinstall": "ivy-ngcc"
  }
}

Finally, we have to execute npm install to run this script. Now, when we serve or build our application, it will be in ivy mode. You should see a noticeable decrease in the total bundle size.

Thanks for reading !

angular

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Angular Sass: How To Use Sass In Angular 9 Tutorial

Sass in Angular is an extension of CSS that allows you to use things like variables, nested rules, inline imports. Angular supports Sass, CSS, and Less.

How to Upgrade Angular 8 To Angular 9

Angular is currently the most popular JavaScript framework and is used by several expert developers when developing single-page applications or powerful web apps. It has become quite crucial for the developers of Angular to add more features to the framework and fix the bugs . Let's learn how to upgrade Angular 8 to Angular 9 using CLI.

Visualizing data with NGX-Charts in Angular

Data Science, Data Analytics, Big Data, these are the buzz words of today's world. A huge amount of data is being generated and analyzed every day. So communica