To enable the Ivy compiler in angular, we must update(improve) our tsconfig.json file.
Step-1: Here, we must improve the compilerOptions key. Our tsconfig.json file can be like this specific: “module”: “es2015”. Currently, we have to change the value of compiler options from es2015 to esnext in our project.
Step-2: Here, we require to attach a new key to this file.
The essential key must have the name angularCompilerOptions and we have to attach an object which is important in Angular to simply use the Ivy compiler: {“enableIvy”: true, “allowEmptyCodegenFiles”: true }.
After that, our changes in tsconfig.json file must look like the following.
{
"compilerOptions": {
"module": "esnext",
},
"angularCompilerOptions": {
"enableIvy": true,
"allowEmptyCodegenFiles": true
}
}
In which the next step is to improve our angular.json file. To use Ivy compiler, we require to enable “aot” by making its value true as shown below.
{
"projects": {
"your-project": {
"architect": {
"build": {
"options": {
...
"aot": true,
}
}
}
}
}
}
In the last step, we have to attach a script to our package.json.
{
"scripts": {
...
"postinstall": "ivy-ngcc"
}
}
At Last, we must install npm to run this script. Currently, when we serve or build our application, it will be in ivy mode. You must see a recognizable decrease in the total bundle size.