Fixing NgModule.imports exception in NgModule class on Angular 9

Angular Ivy was introduced as part of Angular 9. It's the new complier and rendering pipeline used by Angular's view engine. It bring loads of performance improvements along with considerable reduction in bundle size.

As part of using Ivy, a new post install script is run where Angular's compiler will determine the Ivy entry points of all dependencies. You would see something like this in your package.json

"postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"

So, if any third party dependency does not mention it's external dependencies in order, Ivy entry point compilation will fail.

We ran into this specific issue with the excellent angular-tree-component library. Following exception was thrown when Ivy entry points were generated -

Failed to compile entry-point angular-tree-component (module as esm5) due to compilation errors: NG6002: Appears in the NgModule.imports of TreeModule, but could not be resolved to an NgModule class

Disabling Ivy in tsconfig.json resolved this issue -

  "angularCompilerOptions": {
    "enableIvy": false
  }

but that stop us from using Ivy's features.

There are few alternate approach. One is to fork the library and make changes to avoid this error but that will lead to maintenance overhead. We could also report this issue and raise a PR as a fix to angular-tree-component library.

Another approach is to use a custom ngcc's configuration file and force it to skip generating Ivy entry point for angular-tree-component library's main method. To do this, you need to create a ngcc.config.js file and add following content to it

module.exports = {
  packages: {
    'angular-tree-component': {
      entryPoints: {
        '.': {
          override: {
            main: undefined
          }
        }
      }
    }
  }
};

This way, we can continue using Ivy and third party libraries which throw NgModule.imports exceptions while generating Ivy entrypoints.