Angular 9 - failing ng serve using Ivy

[nac0n]

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.

[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!

[nac0n]

Great! Could you please reply in here when the PR is merged so that we can try it?

[Blisston]

Same problem for me too

[elmoyeldo]

Same here.. Great to know that there is PR in pipeline..

[Blackbaud-SteveBrush]

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

[grunk]

FYI i manage to build my app using angular-tree-component and Angular 10. I'm using the following version :

Package Version

@angular-devkit/architect 0.1000.0 @angular-devkit/build-angular 0.1000.0 @angular-devkit/build-optimizer 0.1000.0 @angular-devkit/build-webpack 0.1000.0 @angular-devkit/core 10.0.0 @angular-devkit/schematics 10.0.0 @angular/cli 10.0.0 @ngtools/webpack 10.0.0 @schematics/angular 10.0.0 @schematics/update 0.1000.0 rxjs 6.5.4 typescript 3.9.5 webpack 4.43.0

I just had to add the following in angular.json (build/builder/options) :

"allowedCommonJsDependencies": [
                "lodash/get",
                "lodash/every",
                "lodash/some",
                "lodash/isFunction",
                "lodash/isString",
                "lodash/find",
                "lodash/first",
                "lodash/isNumber",
                "lodash/omit",
                "lodash/pick",
                "lodash/includes",
                "lodash/throttle",
                "lodash/defaultsDeep",
            ]

in order to hide the warning that angular generate when use commonjs or amd dependencies

[tobiasengelhardt]

Closing this because now there is an Angular 9 version of the tree. Please use v9.0.2 (or newer if available). Please note that the package name changed from angular-tree-component to @circlon/angular-tree-component. We tried to keep the old name but couldn't transfer the publishing rights. This requires some path changes after the update. Take a look at the changelog to see the changes.

Please open a new issue if the problem still exists.