We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Splitter error in new project

Thread ID:

Created:

Updated:

Platform:

Replies:

145762 Jul 8,2019 03:10 AM UTC Jul 24,2019 01:54 PM UTC Angular - EJ 2 5
loading
Tags: Gantt Chart
Bill Gauvey
Asked On July 8, 2019 03:10 AM UTC

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 [Syncfusion]
Replied On July 8, 2019 01:34 PM UTC

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. 
 
We have also prepared a sample with Angular 8 and ES5, please find the below link. 
 
Please let us know if you require further assistance on this. 
 
Regards, 
Pooja Priya K 


Bill Gauvey
Replied On July 9, 2019 01:40 AM UTC

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 [Syncfusion]
Replied On July 9, 2019 10:49 AM UTC

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. 
 
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
Replied On July 22, 2019 06:59 AM UTC

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 [Syncfusion]
Replied On July 24, 2019 01:54 PM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon