How can i use in Angular 10 Application?

[pedrocvm]

I'm having trouble using Frappe-Gantt in my Angular 10 application.

My Component looks like this: ` import { Component, ViewChild, ElementRef, OnInit } from '@angular/core'; import * as Gantt from 'frappe-gantt';

@Component({ selector: 'myGantt', templateUrl: './gantt.component.html', styleUrls: ['./gantt.component.scss'], })

export class GanttComponent implements OnInit { @ViewChild('gantt') ganttEl: ElementRef;

gantt; tasks = [ { id: 'Task 1', name: 'Redesign website', start: '2016-12-28', end: '2016-12-31', progress: 20, dependencies: 'Task 2, Task 3', }, ];

ngOnInit() { this.gantt = new Gantt('#gantt', this.tasks); } } `

The Template looks like this: <svg id="gantt" style="min-height: 100%"></svg>

And I'm getting this error on my Console: "ERROR TypeError: frappe_gantt__WEBPACK_IMPORTED_MODULE_1__ is not a constructor"

I think the problem is in the import of the Gantt Object, but I've tried everything and I couldn't.

can anybody help me?

[pedrocvm]

I managed to solve:

Just set the Component like this:

` import Gantt from 'frappe-gantt'; import {Component, ViewChild, ElementRef, OnInit} from '@ angular / core';

@Component ({ selector: 'myGantt', templateUrl: './gantt.component.html', styleUrls: ['./gantt.component.scss'], }) export class GanttComponent implements OnInit { @ViewChild ('gantt') ganttEl: ElementRef;

gantt; tasks = [ { id: 'Task 1', name: 'Redesign website', start: '2016-12-28', end: '2016-12-31', progress: 20, dependencies: 'Task 2, Task 3', }, ];

ngOnInit () { this.gantt = new Gantt ('# gantt', this.tasks); } } `

And add the flag "allowSyntheticDefaultImports": true in the tsconfig.json file

[musfandi]

@pedrocvm no error in console but only show back box using angular 11.0.5

[eniserkaya]

also in angular 12 shows black box. When adding "node_modules/frappe-gantt/src/gantt.scss" to styles in angular.json, black box disappear and gantt chart shows properly.

"styles": [
              "node_modules/frappe-gantt/src/gantt.scss"
            ],

[alvarosinmarca]

This work with Angular 14:

npm commands to install:

npm i frappe-gantt npm i --save-dev @types/frappe-gantt

angular.json

"styles": [ "node_modules/frappe-gantt/src/gantt.scss" ], "scripts": [ "node_modules/frappe-gantt/dist/frappe-gantt.min.js" ]

component.html

<svg id="gantt" style="min-height: 100%"></svg>

component.ts

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import Gantt from 'frappe-gantt';

@Component({
  selector: 'app-gantt-chart',
  templateUrl: './gantt-chart.component.html',
  styleUrls: ['./gantt-chart.component.scss']
})
export class GanttChartComponent implements OnInit {
  @ViewChild('gantt') ganttElement!: ElementRef;

  gantt: any;

  tasks = [
    {
      id: 'Tarea 1',
      name: 'Fabricar X',
      start: '2016-12-28',
      end: '2016-12-31',
      progress: 20,
      dependencies: 'Task 2, Task 3',
    },
    {
      id: 'Tarea 2',
      name: 'Ensamblar Y',
      start: '2016-12-28',
      end: '2016-12-31',
      progress: 20,
      dependencies: 'Tarea 1',
    },
    {
      id: 'Tarea 3',
      name: 'Montar Z',
      start: '2016-12-28',
      end: '2016-12-31',
      progress: 20,
      dependencies: '',
    },
  ];

  constructor() { }

  ngOnInit(): void {
    this.gantt = new Gantt('#gantt', this.tasks);
  }

}

[safwansamsudeen]

I think this is part of Angular related bugs as mentioned in #300.