How to Upgrade Angular Packages  and Enable 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/cli@latestng 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/cli@next

# 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/build-angular@next @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.

In order to see the difference in the bundle size, I had to create a new “Hello World” Angular project and build it with and without Ivy mode. For this app, Ivy was able to compress the bundle size to just 2.7 KBs, compared to other Angular versions, which makes a 36 KB bundle. This is very impressive!