I have recently upgraded to Angular 7 and the PrimeNG tree table does not render anymore. I have used the tree table in most of the pages and the pages now show empty and it does not throw any error too. The following is how my package.json looks:
{
"name": "angular4-cliv122",
"version": "0.0.0",
"license": "MIT",
"private": true,
"dependencies": {
"@angular/animations": "^7.2.1",
"@angular/cdk": "^7.2.1",
"@angular/common": "7.2.1",
"@angular/compiler": "7.2.1",
"@angular/compiler-cli": "7.2.1",
"@angular/core": "7.2.1",
"@angular/forms": "7.2.1",
"@angular/http": "7.2.1",
"@angular/platform-browser": "7.2.1",
"@angular/platform-browser-dynamic": "7.2.1",
"@angular/platform-server": "7.2.1",
"@angular/router": "7.2.1",
"@ng-idle/core": "^6.0.0-beta.3",
"@ng-idle/keepalive": "^6.0.0-beta.3",
"@progress/kendo-angular-buttons": "^4.3.2",
"@progress/kendo-angular-charts": "^3.6.0",
"@progress/kendo-angular-dateinputs": "^3.5.4",
"@progress/kendo-angular-dialog": "^3.10.1",
"@progress/kendo-angular-dropdowns": "^3.4.2",
"@progress/kendo-angular-excel-export": "^2.3.0",
"@progress/kendo-angular-grid": "^3.12.0",
"@progress/kendo-angular-inputs": "^4.0.0",
"@progress/kendo-angular-intl": "^1.6.1",
"@progress/kendo-angular-l10n": "^1.3.0",
"@progress/kendo-angular-label": "^1.3.0",
"@progress/kendo-angular-layout": "^3.2.0",
"@progress/kendo-angular-pdf-export": "^1.2.0",
"@progress/kendo-angular-popup": "^2.5.0",
"@progress/kendo-angular-ripple": "^1.1.1",
"@progress/kendo-angular-scrollview": "^2.1.0",
"@progress/kendo-angular-sortable": "^2.0.1",
"@progress/kendo-angular-treeview": "^2.5.0",
"@progress/kendo-angular-upload": "^4.2.2",
"@progress/kendo-data-query": "^1.5.0",
"@progress/kendo-drawing": "^1.5.8",
"@progress/kendo-theme-default": "^3.2.0",
"angular2-moment": "^1.9.0",
"atob": "^2.1.2",
"bootstrap": "^3.4.0",
"chart.js": "2.7.2",
"classlist.js": "^1.1.20150312",
"core-js": "^2.6.2",
"file-saver": "^1.3.3",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"intl": "^1.2.5",
"ngx-toastr": "^9.1.1",
"primeicons": "^1.0.0",
"primeng": "^7.0.4",
"primeui": "^4.1.15",
"quill": "^1.3.0",
"rxjs": "6.0.0",
"rxjs-compat": "6.0.0",
"tableau-api": "^2.2.2",
"typescript": "^3.1.6",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.28"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.12.2",
"@angular/cli": "7.2.2",
"@angular/compiler-cli": "7.2.1",
"@angular/language-service": "7.2.1",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "^2.0.6",
"@types/node": "^6.0.118",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.7.0"
}
}
I included the TreeTable module in the app module too.There is no error in the console too. The shared module where TreeTable is imported looks like this:
import { NgModule, ModuleWithProviders, ErrorHandler } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { DatePipe } from '@angular/common';
// third party modules
import { ToastrModule } from 'ngx-toastr';
import {
AutoCompleteModule, ListboxModule, EditorModule, MultiSelectModule,
PickListModule, CalendarModule, AccordionModule, TreeModule,
TreeTableModule, ColorPickerModule, InplaceModule
} from 'primeng/primeng';
import { MomentModule } from 'angular2-moment';
//Telerik
import { GridModule } from '@progress/kendo-angular-grid';
import { DialogModule } from '@progress/kendo-angular-dialog';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { AutoCompleteModule as TelerikAutoComplete } from '@progress/kendo-angular-dropdowns';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
AutoCompleteModule,
ListboxModule,
EditorModule,
MultiSelectModule,
PickListModule,
CalendarModule,
AccordionModule,
InplaceModule,
TreeModule, TreeTableModule,
ColorPickerModule,
TelerikAutoComplete,
DropDownsModule,
ToastrModule.forRoot({
newestOnTop: true,
autoDismiss: true
}),
GridModule,
DialogModule,
ButtonsModule,
InputsModule,
MomentModule
],
declarations: [
],
providers: [
DatePipe,
{ provide: ErrorHandler, useClass: GlobalExceptionHandlerService }
],
exports: [
CommonModule,
FormsModule, MomentModule, DropDownsModule, InputsModule]
})
export class SharedModule {
public static forRoot(): ModuleWithProviders {
return {
ngModule: SharedModule,
providers: [
]
};
}
}
I just checked primng website and they change the implementation of tree table in version 7 and that is causing the issue. There are a lot of places where we used primeng tree table so is there any way we could use the old code and now move to the new one. I understand using primeng version 5 would be the solution but would like to know if there is any other way.Could you please let me know.
