Opting into Angular Ivy with Angular CLIlink

Ivy is the code name for Angular's next-generation compilation and rendering pipeline. Starting with Angular version 8, you can choose to opt in to start using Ivy now, and help in its continuing develpment and tuning.

Starting a new project using Ivylink

To start a new project with Ivy enabled, use the --enable-ivy flag with the ng new command:

      
        content_copy
      
      ng new shiny-ivy-app --enable-ivy
    

The new project is automatically configured for Ivy.

• The enableIvy option is set to true in tsconfig.app.json.
• The "aot": true option is added to your default build options.

Updating an existing project to use Ivylink

You can update an existing project to use Ivy by making the following configuration changes.

• Add the enableIvy option in the angularCompilerOptions in your project's tsconfig.app.json.

      
        content_copy
      
      {
  "compilerOptions": { ... },
  "angularCompilerOptions": {
    "enableIvy": true
  }
}
    

• Set "module": "esnext" inside compilerOptions in your tsconfig.json to support the ES import() statement.

      
        content_copy
      
      {
  "compilerOptions": {
    ...
    "module": "esnext",
  }
}
    

• Update your lazy routes to use the import() statement. You can use angular-lazy-routes-fix to automatically transform them.

      
        content_copy
      
      const routes: Routes = [{
  path: 'lazy',
  // The string syntax for loadChildren is not supported in Ivy:
  //   loadChildren: './lazy/lazy.module#LazyModule'
  // Instead use the import statement:
  loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
}];
    

• In the angular.json workspace configuration file, set the default build options for your project to always use AOT compilation.

      
        content_copy
      
      
{
  "projects": {
    "my-existing-project": {
      "architect": {
        "build": {
          "options": {
            ...
            "aot": true,
          }
        }
      }
    }
  }
}
    

Switching back to the current compilerlink

To stop using the Ivy compiler you need to undo the steps taken when updating to use Ivy.

• Set enableIvy to false in tsconfig.app.json, or remove it completely.
• Add "experimentalImportFactories": true to your default build options in angular.json to support the import statement in loadChildren outside Ivy.
• Remove "aot": true from your default build options if you didn't have it there before.