Our state of the art Gantt chart


Unable to integrate Gantt in my angular cli Project

Post Reply

Post by rahulranjan »

Angular version - 5
Hi i am not able to integrate gantt in angular project . I tried to do all the things at last i am getting error :
ERROR in ../bryntum-gantt/gantt.module.js
Module parse failed: Unexpected token (22:510)
You may need an appropriate loader to handle this file type.

Post by Maxim Gorkovsky »

Hello.
As I can see, there is an object spread operator ({ ...foo}) in gantt.module.js, which is not supported in Edge/IE11. Try to import classes from gantt.umd.js, instead of gantt.module.js

Post by rahulranjan »

Hi
Still Facing Problem
File '/build/gantt.umd.d.ts' is not a module.

I tried to import but not able to get

Post by Maxim Gorkovsky »

Probably you omitted extension, import should be 
import {...} from 'bryntum-gantt/gantt.umd.js'
(this is how module name is declared in umd.d.ts).
I tried that locally and found that when I use umd import I get several errors.
1. bad typings
you can add //@ts-ignore above each line which prevents ts from building (or extend gantt.umd.d.ts with missing types). I opened ticket to fix bad typings: https://app.assembla.com/spaces/bryntum ... te/details
2. runtime TypeError.
It is caused by local lib/Task class, which is es6 class, being instantiated incorrectly by umd bundle. I opened ticket about that also: https://app.assembla.com/spaces/bryntum ... ar/details
For now you can either figure angular config yourself, or get rid of that class

Sorry for inconvenience.

Post by rahulranjan »

Hi
I tried all the things now able to get something
But Below are problems
1. https://drive.google.com/file/d/19Lnv1H ... sp=sharing
Css and other things are missing in design
2. While clicking on create task below error is coming 
webpack-internal:///./node_modules/@angular/core/esm5/core.js:1665 ERROR Error: Uncaught (in promise): TypeError: Class constructor Task cannot be invoked without 'new'
TypeError: Class constructor Task cannot be invoked without 'new'
    at new _0x745148 (webpack-internal:///../build/gantt.umd.js:13)
    at _0x248a0c.createRecord (webpack-internal:///../build/gantt.umd.js:13)
    at _0xae5e1.ingestChildren (webpack-internal:///../build/gantt.umd.js:13)
    at _0xae5e1.insertChild (webpack-internal:///../build/gantt.umd.js:13)
    at _0xae5e1.appendChild (webpack-internal:///../build/gantt.umd.js:13)
    at _0x1db973.eval (webpack-internal:///./src/app/project-schedule/components/project-schedule-v2/ganttToolbar.ts:257)
    at step (webpack-internal:///./src/app/project-schedule/components/project-schedule-v2/ganttToolbar.ts:32)
    at Object.eval [as next] (webpack-internal:///./src/app/project-schedule/components/project-schedule-v2/ganttToolbar.ts:13)
    at eval (webpack-internal:///./src/app/project-schedule/components/project-schedule-v2/ganttToolbar.ts:7)
    at new ZoneAwarePromise (webpack-internal:///./node_modules/zone.js/dist/zone.js:891)
    at resolvePromise (webpack-internal:///./node_modules/zone.js/dist/zone.js:814)
    at new ZoneAwarePromise (webpack-internal:///./node_modules/zone.js/dist/zone.js:894)
    at __awaiter (webpack-internal:///./src/app/project-schedule/components/project-schedule-v2/ganttToolbar.ts:3)
    at _0x1db973.onAddTaskClick (webpack-internal:///./src/app/project-schedule/components/project-schedule-v2/ganttToolbar.ts:252)
    at _0xd7452a.callback (webpack-internal:///../build/gantt.umd.js:12)
    at _0xd7452a.trigger (webpack-internal:///../build/gantt.umd.js:14)
    at _0xd7452a.onInternalClick (webpack-internal:///../build/gantt.umd.js:14)
    at HTMLButtonElement.handler (webpack-internal:///../build/gantt.umd.js:13)
    at ZoneDelegate.invokeTask (webpack-internal:///./node_modules/zone.js/dist/zone.js:421)
    at Object.onInvokeTask (webpack-internal:///./node_modules/@angular/core/esm5/core.js:4967)
defaultErrorLogger @ webpack-internal:///./node_modules/@angular/core/esm5/core.js:1665
ErrorHandler.handleError @ webpack-internal:///./node_modules/@angular/core/esm5/core.js:1726
next @ webpack-internal:///./node_modules/@angular/core/esm5/core.js:5724
schedulerFn @ webpack-internal:///./node_modules/@angular/core/esm5/core.js:4558
SafeSubscriber.__tryOrUnsub @ webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:248
SafeSubscriber.next @ webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:195
Subscriber._next @ webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:136
Subscriber.next @ webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:100
Subject.next @ webpack-internal:///./node_modules/rxjs/_esm5/Subject.js:66
EventEmitter.emit @ webpack-internal:///./node_modules/@angular/core/esm5/core.js:4538
(anonymous) @ webpack-internal:///./node_modules/@angular/core/esm5/core.js:4998
ZoneDelegate.invoke @ webpack-internal:///./node_modules/zone.js/dist/zone.js:388
Zone.run @ webpack-internal:///./node_modules/zone.js/dist/zone.js:138
NgZone.runOutsideAngular @ webpack-internal:///./node_modules/@angular/core/esm5/core.js:4924
onHandleError @ webpack-internal:///./node_modules/@angular/core/esm5/core.js:4998
ZoneDelegate.handleError @ webpack-internal:///./node_modules/zone.js/dist/zone.js:392
Zone.runGuarded @ webpack-internal:///./node_modules/zone.js/dist/zone.js:154
_loop_1 @ webpack-internal:///./node_modules/zone.js/dist/zone.js:677
api.microtaskDrainDone @ webpack-internal:///./node_modules/zone.js/dist/zone.js:686
drainMicroTaskQueue @ webpack-internal:///./node_modules/zone.js/dist/zone.js:602
ZoneTask.invokeTask @ webpack-internal:///./node_modules/zone.js/dist/zone.js:500
invokeTask @ webpack-internal:///./node_modules/zone.js/dist/zone.js:1540
globalZoneAwareCallback @ webpack-internal:///./node_modules/zone.js/dist/zone.js:1566
3. I have done as you told 
import {
  Gantt,
  Panel,
  ProjectModel,
  Toast,
  WidgetHelper,
  DateHelper
} from 'bryntum-gantt/gantt.umd.js';
But now 
 // console.time("load data");
    // project.load().then(() => {
    //   const stm = gantt.project.stm;

    //   // let's track scheduling conflicts happened
    //   project.on('schedulingconflict', context => {
    //     // show notification to user
    //     Toast.show('Scheduling conflict has happened ..recent changes were reverted');
    //     // as the conflict resolution approach let's simply cancel the changes
    //     //context.continueWithResolutionResult(EffectResolutionResult.Cancel);
    //   });

    //   stm.enable();
    //   stm.autoRecord = true;

    // });
Above lines of code gives error and EffectResolutionResult is not present

Thanks

Post by mats »

Please don't post in Community discussion, moving thread to Gantt forum.

Post by Maxim Gorkovsky »

rahulranjan wrote: ↑Wed May 01, 2019 8:13 pm 1. https://drive.google.com/file/d/19Lnv1H ... sp=sharing
Css and other things are missing in design
Make sure you import css into your app, normally we do it in the src/styles.scss: 
@import "bryntum-gantt/gantt.stockholm.css";
rahulranjan wrote: ↑Wed May 01, 2019 8:13 pm 2. While clicking on create task below error is coming 
webpack-internal:///./node_modules/@angular/core/esm5/core.js:1665 ERROR Error: Uncaught (in promise): TypeError: Class constructor Task cannot be invoked without 'new'
TypeError: Class constructor Task cannot be invoked without 'new'
    at new _0x745148 (webpack-internal:///../build/gantt.umd.js:13)
    at _0x248a0c.createRecord (webpack-internal:///../build/gantt.umd.js:13)
    at _0xae5e1.ingestChildren (webpack-internal:///../build/gantt.umd.js:13)
    at _0xae5e1.insertChild (webpack-internal:///../build/gantt.umd.js:13)
    at _0xae5e1.appendChild (webpack-internal:///../build/gantt.umd.js:13)
    at _0x1db973.eval (webpack-internal:///./src/app/project-schedule/components/project-schedule-v2/ganttToolbar.ts:257)
    at step (webpack-internal:///./src/app/project-schedule/components/project-schedule-v2/ganttToolbar.ts:32)
    at Object.eval [as next] (webpack-internal:///./src/app/project-schedule/components/project-schedule-v2/ganttToolbar.ts:13)
    at eval (webpack-internal:///./src/app/project-schedule/components/project-schedule-v2/ganttToolbar.ts:7)
    at new ZoneAwarePromise (webpack-internal:///./node_modules/zone.js/dist/zone.js:891)
    at resolvePromise (webpack-internal:///./node_modules/zone.js/dist/zone.js:814)
    at new ZoneAwarePromise (webpack-internal:///./node_modules/zone.js/dist/zone.js:894)
    at __awaiter (webpack-internal:///./src/app/project-schedule/components/project-schedule-v2/ganttToolbar.ts:3)
    at _0x1db973.onAddTaskClick (webpack-internal:///./src/app/project-schedule/components/project-schedule-v2/ganttToolbar.ts:252)
    at _0xd7452a.callback (webpack-internal:///../build/gantt.umd.js:12)
    at _0xd7452a.trigger (webpack-internal:///../build/gantt.umd.js:14)
    at _0xd7452a.onInternalClick (webpack-internal:///../build/gantt.umd.js:14)
    at HTMLButtonElement.handler (webpack-internal:///../build/gantt.umd.js:13)
    at ZoneDelegate.invokeTask (webpack-internal:///./node_modules/zone.js/dist/zone.js:421)
    at Object.onInvokeTask (webpack-internal:///./node_modules/@angular/core/esm5/core.js:4967)
defaultErrorLogger @ webpack-internal:///./node_modules/@angular/core/esm5/core.js:1665
ErrorHandler.handleError @ webpack-internal:///./node_modules/@angular/core/esm5/core.js:1726
next @ webpack-internal:///./node_modules/@angular/core/esm5/core.js:5724
schedulerFn @ webpack-internal:///./node_modules/@angular/core/esm5/core.js:4558
SafeSubscriber.__tryOrUnsub @ webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:248
SafeSubscriber.next @ webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:195
Subscriber._next @ webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:136
Subscriber.next @ webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:100
Subject.next @ webpack-internal:///./node_modules/rxjs/_esm5/Subject.js:66
EventEmitter.emit @ webpack-internal:///./node_modules/@angular/core/esm5/core.js:4538
(anonymous) @ webpack-internal:///./node_modules/@angular/core/esm5/core.js:4998
ZoneDelegate.invoke @ webpack-internal:///./node_modules/zone.js/dist/zone.js:388
Zone.run @ webpack-internal:///./node_modules/zone.js/dist/zone.js:138
NgZone.runOutsideAngular @ webpack-internal:///./node_modules/@angular/core/esm5/core.js:4924
onHandleError @ webpack-internal:///./node_modules/@angular/core/esm5/core.js:4998
ZoneDelegate.handleError @ webpack-internal:///./node_modules/zone.js/dist/zone.js:392
Zone.runGuarded @ webpack-internal:///./node_modules/zone.js/dist/zone.js:154
_loop_1 @ webpack-internal:///./node_modules/zone.js/dist/zone.js:677
api.microtaskDrainDone @ webpack-internal:///./node_modules/zone.js/dist/zone.js:686
drainMicroTaskQueue @ webpack-internal:///./node_modules/zone.js/dist/zone.js:602
ZoneTask.invokeTask @ webpack-internal:///./node_modules/zone.js/dist/zone.js:500
invokeTask @ webpack-internal:///./node_modules/zone.js/dist/zone.js:1540
globalZoneAwareCallback @ webpack-internal:///./node_modules/zone.js/dist/zone.js:1566
It still looks like you are using lib/Task class somewhere in your app. Remove that class and all usages/imports, it worked locally.
rahulranjan wrote: ↑Wed May 01, 2019 8:13 pm 3. I have done as you told 
import {
  Gantt,
  Panel,
  ProjectModel,
  Toast,
  WidgetHelper,
  DateHelper
} from 'bryntum-gantt/gantt.umd.js';
But now 
 // console.time("load data");
    // project.load().then(() => {
    //   const stm = gantt.project.stm;

    //   // let's track scheduling conflicts happened
    //   project.on('schedulingconflict', context => {
    //     // show notification to user
    //     Toast.show('Scheduling conflict has happened ..recent changes were reverted');
    //     // as the conflict resolution approach let's simply cancel the changes
    //     //context.continueWithResolutionResult(EffectResolutionResult.Cancel);
    //   });

    //   stm.enable();
    //   stm.autoRecord = true;

    // });
Above lines of code gives error and EffectResolutionResult is not present

Thanks
What kind of error gives this code? One you pasted in #2? Please see solution above. Try steps I described on clean angular application which you can find in distribution.

Post by rahulranjan »

Hi
I am getting some errors 
ERROR in node_modules/bryntum-gantt/gantt.umd.d.ts(1363,18): error TS2415: Class 'DependencyStore' incorrectly extends base class 'SchedulerDependencyStore'.
  Types of property 'eventStore' are incompatible.
    Type 'TaskStore' is not assignable to type 'EventStore'.
      Property 'append' is missing in type 'TaskStore'.
node_modules/bryntum-gantt/gantt.umd.d.ts(1397,18): error TS2415: Class 'ResourceStore' incorrectly extends base class 'SchedulerResourceStore'.
  Types of property 'eventStore' are incompatible.
    Type 'TaskStore' is not assignable to type 'EventStore'.
node_modules/bryntum-gantt/gantt.umd.d.ts(1587,18): error TS2415: Class 'AssignmentModel' incorrectly extends base class 'SchedulerAssignmentModel'.
  Types of property 'event' are incompatible.
    Type 'TaskModel' is not assignable to type 'EventModel'.
      Property 'eventColor' is missing in type 'TaskModel'.
node_modules/bryntum-gantt/gantt.umd.d.ts(1709,18): error TS2415: Class 'ResourceModel' incorrectly extends base class 'SchedulerResourceModel'.
  Types of property 'eventStore' are incompatible.
    Type 'TaskStore' is not assignable to type 'EventStore'.

Post by Maxim Gorkovsky »

Hard to figure the reason without seeing the code. Please provide a test case with steps to reproduce.

Post by rahulranjan »

Hi
I have gone through the documentation If please can you provide step by step Integration or any Doc related.
Angular CLI - Project
Angular Version - 5.2.5 
ES5 
 "lib": [
      "es2017",
      "dom"
    ]
Post Reply