Splitter error in new project

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"
  },

Reply | Reply with quote

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.

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

Reply | Reply with quote

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

Reply | Reply with quote

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.

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

Reply | Reply with quote

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

Reply | Reply with quote

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

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US