If you have experience error with your newly installed module on Angular 9 or Angular 10 saying that some part of it are not compatible with Ivy - this fix could help you.

If you're working with Angular and see an error message saying that something is "not compatible with Angular Ivy," don’t worry! This article will explain what that means and how you can fix it.

The typical full message looks like this:

This likely means that the library (@***) which declares *** has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

What is Angular Ivy?

Angular Ivy is a special part of Angular, which is a popular tool used to build websites and web apps. Ivy makes your Angular projects faster and easier to work with. Starting from Angular version 9, Ivy is the default, which means it's automatically used in every Angular project.

Why You Might See This Error

Sometimes, when you add a new feature or package (a collection of pre-written code) to your Angular project, you might get an error saying that it’s "not compatible with Angular Ivy." This usually happens because:

  • The Package is Old: The package might have been created before Ivy existed, so it doesn’t work well with it.
  • Different Angular Versions: You might be using a package designed for a different version of Angular, and it’s not fitting with the version you’re using.
  • Settings Issue: Your project settings might not be set up correctly for Ivy.

How to Fix the Problem

Here are some simple steps you can follow to solve this issue:

  • Update the Package:First, try updating the package to the latest version. This might solve the problem because the package creator might have already made it work with Ivy.You can do this by running npm update in your project’s terminal or command prompt.
    Run these commands:npm cache clean --forcenpm install


  • First, try updating the package to the latest version. This might solve the problem because the package creator might have already made it work with Ivy.
  • You can do this by running npm update in your project’s terminal or command prompt.
  • Check Your Project Settings:Make sure Ivy is turned on in your project settings. Look for a file called tsconfig.json and check if it has this line:
  • Make sure Ivy is turned on in your project settings. Look for a file called tsconfig.json and check if it has this line:
                    {
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

If it doesn’t, you can add it yourself to enable Ivy.

  • Disable Ivy (Only if Necessary):If you really need to use a package that doesn’t work with Ivy, you can temporarily turn Ivy off. To do this, set "enableIvy" to false in your tsconfig.json. But remember, turning off Ivy isn’t the best long-term solution.
  • Find a Different Package:If updating the package or changing settings doesn’t work, you might need to look for a different package that does the same thing but is already compatible with Ivy.
  • Run the Angular Compatibility Tool:Sometimes, the Angular Compatibility Compiler (ngcc) can fix the problem. You can run it by typing this command:
                    npx ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points

This tool makes non-Ivy packages work with Ivy.

Check Angular and TypeScript Versions:

  • Make sure the versions of Angular and TypeScript (another tool used with Angular) in your project are meant to work together. If they don’t match up, you might see errors like this.