Help Angular by taking a 1 minute survey!Go to surveyHome

Opting into Angular Ivy with Angular CLI

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 Ivy

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

ng new shiny-ivy-app --enable-ivy
      
      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 Ivy

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.
{ "compilerOptions": { ... }, "angularCompilerOptions": { "enableIvy": true } }
      
      {
  "compilerOptions": { ... },
  "angularCompilerOptions": {
    "enableIvy": true
  }
}
    
  • Set "module": "esnext" inside compilerOptions in your tsconfig.json to support the ES import() statement.
{ "compilerOptions": { ... "module": "esnext", } }
      
      {
  "compilerOptions": {
    ...
    "module": "esnext",
  }
}
    
  • Update your lazy routes to use the import() statement. You can use angular-lazy-routes-fix to automatically transform them.
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) }];
      
      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.
{ "projects": { "my-existing-project": { "architect": { "build": { "options": { ... "aot": true, } } } } } }
      
      
  1. {
  2. "projects": {
  3. "my-existing-project": {
  4. "architect": {
  5. "build": {
  6. "options": {
  7. ...
  8. "aot": true,
  9. }
  10. }
  11. }
  12. }
  13. }
  14. }

Switching back to the current compiler

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.