Использование диаграммы Ганта DHTMLX с Angular 2 Framework дает ошибку

Проделал все шаги в соответствии с руководством, предоставленным DHTMLX. Однако при инициализации Ганта возникает ошибка:

import {Component, ElementRef, OnInit, ViewChild} from "@angular/core";
import "dhtmlx-gantt";


@Component({
    selector: "gantt",
    styles: [
        `
        :host{
            display: block;
            height: 600px;
            position: relative;
            width: 100%;
        }
    `],
    template: "<div #gantt_here style='width: 100%; height: 100%;'></div>",
})
export class GanttComponent implements OnInit {
    @ViewChild("gantt_here") ganttContainer: ElementRef;

    ngOnInit(){
        gantt.init(this.ganttContainer.nativeElement);
    }
}

Вот ошибка

ОШИБКА в src/app/views/tasks/gantt.component.ts(19,3): ошибка TS2304: не удается найти имя «Ганта».

Я не нашел никакой разницы между моим и загруженным проектом, который работает без ошибок. Ссылка на git https://github.com/DHTMLX/angular2-gantt-demo


angular-cli dhtmlx
person Arman Oralov    schedule 08.12.2018    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Мое решение для пробной версии следующее:

  • Не добавляйте .css и .js в index.html, как я предполагал здесь: https://docs.dhtmlx.com/gantt/desktop__install_with_bower.html#addingprofessionaleditionintoproject. Вместо этого добавьте их в angular.json.
  • Snoop в файле package.json бесплатной npm устанавливаемой версии dhtmlx-gantt
  • Измените package.json пробной версии, чтобы 1) удалить ссылку на index.js и 2) добавить типы. Мой выглядит так:
    {
      "name": "dhtmlx-gantt-samples",
      "version": "1.0.0",
      "description": "Simple backend and REST api for dhtmlx gantt samples",
      "main": "codebase/dhtmlxgantt.js",
      "types": "codebase/dhtmlxgantt.d.ts",
      "author": "DHTMLX",
      "license": "DHTMLX Evaluation License",
      "dependencies": {
        "body-parser": "^1.18.3",
        "express": "^4.16.4",
        "striptags": "^3.1.1"
      }
    }
person hastudil    schedule 16.06.2019

arrow_upward
0
arrow_downward

Пока я использовал этот пакет для проекта, над которым работал, мне пришлось сделать с ним что-то немного необычное.

Я добавил эту строку в свой импорт

import {} from '@types/dhtmlxgantt';

Я думаю, когда они разрабатывали эту диаграмму, они не до конца понимали, как типы работают с TypeScript и как их правильно упаковать.

Я нашел эту запись в блоге весьма полезной, когда дело дошло до использования этого пакета. В конце концов я отказался от использования этого пакета и построил свою собственную диаграмму Ганта, потому что их диаграмма не обладала функциями, необходимыми для моего проекта. Надеюсь это поможет!

person kszalai    schedule 10.12.2018

arrow_upward
0
arrow_downward

добавление трех строк кода в файл tsconfig.app.json решает всю проблему

"types": [
    "dhtmlxgantt"
]
person Arman Oralov    schedule 10.12.2018
comment
Добавление его в компиляторOptions:{ types: [dhtmlxgantt]} избавляет от ошибки, и веб-пакет запустит сервер, но я все еще получаю, что gantt не определен. Ищем эту ошибку. - person wwjdm; 13.12.2018