Splitter error in new project

[Bill Gauvey]

I create a simple gantt chart and get this error:

---- html ----

<ejs-gantt

[dataSource]="data">

</ejs-gantt>

---- exception -----

ERROR TypeError: Class constructor Component cannot be invoked without 'new'

    at new Splitter (VM33655 vendor.js:229064)

    at Splitter$1.renderSplitter (VM33655 vendor.js:176368)

    at ComponentBase.render (VM33655 vendor.js:177077)

    at ComponentBase.appendTo (VM33655 vendor.js:134476)

    at VM33655 vendor.js:127578

    at ZoneDelegate.invokeTask (VM33651 polyfills.js:3397)

    at Object.onInvokeTask (VM33655 vendor.js:81021)

    at ZoneDelegate.invokeTask (VM33651 polyfills.js:3396)

    at Zone.runTask (VM33651 polyfills.js:3174)

    at invokeTask (VM33651 polyfills.js:3471)

----package json ---

dependencies": {

"@angular/animations": "~8.1.0",

"@angular/common": "~8.1.0",

"@angular/compiler": "~8.1.0",

"@angular/core": "~8.1.0",

"@angular/forms": "~8.1.0",

"@angular/platform-browser": "~8.1.0",

"@angular/platform-browser-dynamic": "~8.1.0",

"@angular/router": "~8.1.0",

"@clr/angular": "^2.0.1",

"@clr/icons": "2.0.1",

"@clr/ui": "2.0.1",

"@syncfusion/ej2-angular-gantt": "^17.1.47",

"@syncfusion/ej2-angular-layouts": "^17.1.51",

"@webcomponents/custom-elements": "^1.0.0",

"rxjs": "~6.4.0",

"ts": "^0.2.2",

"tslib": "^1.9.0",

"zone.js": "~0.9.1"

},

[Pooja Priya Krishna Moorthy]

Hi Bill, 

 

Greetings from Syncfusion support. 

 

We analyzed the code snippet shared by you and noted down that you are using Angular 8. We are also facing the same issue while using Syncfusion control in Angular 8 with JavaScript target as ES2015 or ES6. 

This issue occurs in Angular CLI itself, we already reported about this issue to the Angular team, now you can resolve the issue by changing the target property as ‘es5’ in tsconfig.json.  

Please find the issue link below. 

Issue Link -  https://github.com/angular/angular-cli/issues/14717 

 

We have also prepared a sample with Angular 8 and ES5, please find the below link. 

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/ANGULA~1-89614521 

 

Please let us know if you require further assistance on this. 

 

Regards, 

Pooja Priya K 

[Bill Gauvey]

I have angular 8.1

with es5, I get 

core.js:7376 ERROR TypeError: Cannot read property 'ganttProperties' of undefined

    at TaskProcessor.push../node_modules/@syncfusion/ej2-gantt/src/gantt/base/date-processor.js.DateProcessor.getProjectStartDate (date-processor.js:401)

    at TaskProcessor.push../node_modules/@syncfusion/ej2-gantt/src/gantt/base/task-processor.js.TaskProcessor.calculateScheduledValues (task-processor.js:323)

    at TaskProcessor.push../node_modules/@syncfusion/ej2-gantt/src/gantt/base/task-processor.js.TaskProcessor.createRecord (task-processor.js:189)

    at TaskProcessor.push../node_modules/@syncfusion/ej2-gantt/src/gantt/base/task-processor.js.TaskProcessor.prepareRecordCollection (task-processor.js:138)

    at TaskProcessor.push../node_modules/@syncfusion/ej2-gantt/src/gantt/base/task-processor.js.TaskProcessor.prepareDataSource (task-processor.js:129)

    at TaskProcessor.push../node_modules/@syncfusion/ej2-gantt/src/gantt/base/task-processor.js.TaskProcessor.cloneDataSource (task-processor.js:121)

    at TaskProcessor.push../node_modules/@syncfusion/ej2-gantt/src/gantt/base/task-processor.js.TaskProcessor.checkDataBinding (task-processor.js:61)

    at GanttComponent.push../node_modules/@syncfusion/ej2-gantt/src/gantt/base/gantt.js.Gantt.render (gantt.js:333)

    at GanttComponent.push../node_modules/@syncfusion/ej2-base/src/component.js.Component.appendTo (component.js:129)

    at component-base.js:100

[Jesus Arockia Sankaran S]

Hi Bill, 

 

We have prepared a sample in angular 8.1 with es5. To render basic Gantt, we need to provide data source and map the id, start date, end date and duration fields properly to Gantt control. We can render Gantt with empty data source also, but when we define the task in data source we need to provide the date values properly and map these field to Gantt by using taskFields property. When we provide the date values for tasks in data source,  Gantt will automatically calculate the project start date and end date values, else we need to provide the value to projectStartDate, projectEndDate  properties 

 

We have prepared a basic sample, please find the sample and documentation link below. 

Sample – https://www.syncfusion.com/downloads/support/directtrac/general/ze/simpleGantt-1016945796 

Documentation - https://ej2.syncfusion.com/angular/documentation/gantt/getting-started/ 

 

If your issue has not been resolved, please share your code snippet. So that it will be very helpful for us to serve you better. 

 

Regards, 

Jesus Arockia Sankaran S 

[Hazim Hafis]

I have angular 8.1.2, and I also have a problem regarding the date properties which i think I have provide the date values properly. 

here is the error

ERROR TypeError: Cannot read property 'ganttProperties' of undefined

    at TaskProcessor.push../node_modules/@syncfusion/ej2-gantt/src/gantt/base/date-processor.js.DateProcessor.getProjectStartDate (date-processor.js:401)

    at TaskProcessor.push../node_modules/@syncfusion/ej2-gantt/src/gantt/base/task-processor.js.TaskProcessor.calculateScheduledValues (task-processor.js:340)

    at TaskProcessor.push../node_modules/@syncfusion/ej2-gantt/src/gantt/base/task-processor.js.TaskProcessor.createRecord (task-processor.js:189)

    at TaskProcessor.push../node_modules/@syncfusion/ej2-gantt/src/gantt/base/task-processor.js.TaskProcessor.prepareRecordCollection (task-processor.js:138)

    at TaskProcessor.push../node_modules/@syncfusion/ej2-gantt/src/gantt/base/task-processor.js.TaskProcessor.prepareDataSource (task-processor.js:129)

    at TaskProcessor.push../node_modules/@syncfusion/ej2-gantt/src/gantt/base/task-processor.js.TaskProcessor.cloneDataSource (task-processor.js:118)

    at TaskProcessor.push../node_modules/@syncfusion/ej2-gantt/src/gantt/base/task-processor.js.TaskProcessor.checkDataBinding (task-processor.js:61)

    at GanttComponent.push../node_modules/@syncfusion/ej2-gantt/src/gantt/base/gantt.js.Gantt.render (gantt.js:432)

    at GanttComponent.push../node_modules/@syncfusion/ej2-base/src/component.js.Component.appendTo (component.js:134)

    at component-base.js:100

here is my package json:

{

  "name": "smartmob",

  "version": "0.0.0",

  "scripts": {

    "ng": "ng",

    "start": "ng serve",

    "build": "ng build",

    "test": "ng test",

    "lint": "ng lint",

    "e2e": "ng e2e"

  },

  "private": true,

  "dependencies": {

    "@angular/animations": "^8.1.2",

    "@angular/cdk": "^8.1.1",

    "@angular/common": "^8.1.2",

    "@angular/compiler": "^8.1.2",

    "@angular/core": "^8.1.2",

    "@angular/forms": "^8.1.2",

    "@angular/http": "^7.2.15",

    "@angular/material": "^8.1.1",

    "@angular/platform-browser": "^8.1.2",

    "@angular/platform-browser-dynamic": "^8.1.2",

    "@angular/router": "^8.1.2",

    "@syncfusion/ej2-angular-gantt": "^17.2.35",

    "angular-2-daterangepicker": "^1.1.52",

    "angular-wizard-form": "^0.4.1",

    "angular2-flash-messages": "^3.0.1",

    "angular2-text-mask": "^9.0.0",

    "angular2-wizard": "^0.4.0",

    "bootstrap": "^4.3.1",

    "chart.js": "^2.8.0",

    "core-js": "^3.1.4",

    "datatables.net": "^1.10.19",

    "datatables.net-bs4": "^1.10.19",

    "daterangepicker": "^3.0.5",

    "daypilot-pro-angular": "https://npm.daypilot.org/daypilot-pro-angular/trial/2018.2.3297.tar.gz",

    "font-awesome": "^4.7.0",

    "html2canvas": "^1.0.0-alpha.12",

    "jsgantt-improved": "^2.3.0",

    "jspdf": "^1.5.3",

    "moment": "^2.24.0", 

    "ng-gantt": "^2.1.0",

    "ng2-charts": "^2.3.0",

    "ngx-spinner": "^8.0.3",

    "node-sass": "^4.12.0",

    "rxjs": "~6.5.2",

    "sweetalert2": "^8.14.0",

    "terser": "^4.1.2",

    "ts": "^0.2.2",

    "zone.js": "~0.9.1"

  },

  "devDependencies": {

    "@angular-devkit/build-angular": "^0.801.2",

    "@angular/cli": "^8.1.2",

    "@angular/compiler-cli": "^8.1.2",

    "@angular/language-service": "^8.1.2",

    "@types/jasmine": "^3.3.14",

    "@types/jasminewd2": "^2.0.6",

    "@types/jquery": "^3.3.30",

    "@types/node": "~12.6.8",

    "codelyzer": "~5.1.0",

    "gulp-sass": "^4.0.2",

    "jasmine-core": "~3.4.0",

    "jasmine-spec-reporter": "~4.2.1",

    "jquery": "^3.4.1",

    "karma": "~4.2.0",

    "karma-chrome-launcher": "~3.0.0",

    "karma-coverage-istanbul-reporter": "~2.0.6",

    "karma-jasmine": "~2.0.1",

    "karma-jasmine-html-reporter": "^1.4.2",

    "protractor": "^5.4.2",

    "ts-node": "~8.3.0",

    "tslint": "~5.18.0",

    "typescript": "^3.4.5"

  }

}



appended are the component file and the component html






Attachment: Documents_a715a90b.zip

[Jesus Arockia Sankaran S]

Hi Hazim, 

 

We have analyzed the provide files and code snippets of package.json file. We can’t make this file as runnable because dataSource was get from API call. 

Please share us the data source value or Gantt.Service file and also please share the dashboard-supervisor.component.html file, It will be very helpful for us to provide proper solution. 

 

Thanks, 

Jesus Arockia Sankaran S