Angular 9 - failing ng serve using Ivy

There seems to be a problem for us to use angular-tree-component, with Ivy enabled, in Angular 9.

We’re working on a project that was running on Angular 7, which recently we have been working on upgrading to Angular 9. Our main goal was to keep up with the breaking changes done after Angular 8 and such we decided to upgrade to Angular 9 and start using Ivy also. This however seems to be a problem as running the application fails with Ivy on. Disabling Ivy gives us no errors and is our temporary solution, but we’d rather be able to use Ivy.

When running ng serve, it gives us these errors, manually modified paths and names for a bit of project secrecy:

Errors:

ERROR in node_modules/angular-tree-component/dist/angular-tree-component.d.ts:25:23 - error NG6005: TreeModule.forRoot returns a ModuleWithProviders type without a generic type argument. Please add a generic type argument to the ModuleWithProviders type. If this occurrence is in library code you don't control, please contact the library authors.

25     static forRoot(): ModuleWithProviders;
                         ~~~~~~~~~~~~~~~~~~~
<file-path>/subsystem.module.ts:22:14 - error NG6002: Appears in the NgModule.imports of TagEditorModule, but could not be resolved to an NgModule class.

Is it missing an @NgModule annotation?

22 export class SubsystemModule { }

Package.json:

{
  "name": "app-core",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ngcc"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^9.1.3",
    "@angular/cdk": "^9.1.3",
    "@angular/common": "^9.1.3",
    "@angular/compiler": "^9.1.3",
    "@angular/core": "^9.1.3",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "^9.1.3",
    "@angular/material": "^9.1.3",
    "@angular/platform-browser": "^9.1.3",
    "@angular/platform-browser-dynamic": "^9.1.3",
    "@angular/router": "^9.1.3",
    "@ngrx/effects": "^9.0.0",
    "@ngrx/entity": "^9.0.0",
    "@ngrx/router-store": "^9.0.0",
    "@ngrx/store": "^9.0.0",
    "ag-grid-angular": "^20.2.0",
    "ag-grid-community": "^20.2.0",
    "ag-grid-enterprise": "^20.2.0",
    "angular-calendar": "^0.28.5",
    "angular-tree-component": "^8.5.6",
    "angular2-highcharts": "^0.5.5",
    "calendar-utils": "^0.7.0",
    "core-js": "^2.6.9",
    "date-fns": "^2.10.0",
    "dexie": "^2.0.1",
    "highcharts": "^6.0.7",
    "highcharts-multicolor-series": "^2.2.1",
    "intl": "^1.2.5",
    "jquery": "^3.4.1",
    "jwt-decode": "^2.2.0",
    "moment": "^2.24.0",
    "moment-duration-format": "^1.3.0",
    "ngrx-store-freeze": "^0.2.4",
    "ngx-papaparse": "^4.0.4",
    "platform": "^1.3.4",
    "rxjs": "^6.5.3",
    "tslib": "^1.10.0",
    "typescript": "^3.7.5",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.7",
    "@angular-devkit/build-ng-packagr": "~0.900.7",
    "@angular/cli": "^9.1.3",
    "@angular/compiler-cli": "^9.1.3",
    "@angular/language-service": "^9.1.3",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.1.0",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-scss-preprocessor": "^3.0.0",
    "ng-packagr": "^9.0.0",
    "node-sass": "^4.12.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "webpack-bundle-analyzer": "^3.5.1"
  }
}

Browser: Chrome

subsystem.module.ts:

import { ReactiveFormsModule } from '@angular/forms';
import { CustomMaterialModule } from 'src/app/material.module';
import { SubsystemTreeComponent } from './subsystem-tree/subsystem-tree.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TreeModule } from 'angular-tree-component';

@NgModule({
  imports: [
    CommonModule,
    TreeModule.forRoot(),
    CustomMaterialModule,
    ReactiveFormsModule
  ],
  declarations: [
    SubsystemTreeComponent
  ],
  exports: [
    SubsystemTreeComponent
  ]
})
export class SubsystemModule { }

Removing .forRoot() when importing TreeModule makes the application start with no errors ( the application doens’t work though, but we do not get the errors on startup shown above). So my shot in the dark is that this error has something to do with how Ivy handles the package.

[Blackbaud-SteveBrush]

@Nick-Angel Looks like the PR is stale. Any progress or help needed?

[Nick-Angel]

Hi, this should be fixed as soon as I merge my PR for upgrading ATC to ng9. In Angular 9 an additional compilation step needs to be done before ATC can be compiled completely. My PR addresses this, as well as refactoring some of the code structure for easier development in the long term. Stay tuned for the ATC 9 update, shouldn’t be too much longer before you can enable Ivy!