Angular 2 Framework 的 DHTMLX 甘特图使用给出错误

Question

按照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);
    }
}

这里有一个错误

ERROR in src/app/views/tasks/gantt.component.ts(19,3): error TS2304: Cannot find name 'gantt'.

我没有发现我的和下载的项目有什么不同，它运行没有任何错误。 Link 至 git https://github.com/DHTMLX/angular2-gantt-demo

Answer 1

当我将这个包用于我正在从事的项目时，我确实不得不用它做一些不寻常的事情

我在导入中添加了这一行

import {} from '@types/dhtmlxgantt';

我认为当他们开发这个图表时，他们并没有完全理解类型如何与 TypeScript 一起工作以及如何正确地打包它们。

我确实发现 this blog post 在使用这个包时很有帮助。我最终放弃了使用这个包并构建了我自己的自定义甘特图，因为他们的图表没有我的项目所需的功能。希望这对您有所帮助！

Answer 2

在 tsconfig.app.json 文件中添加三行代码即可解决所有问题

"types": [
    "dhtmlxgantt"
]

Answer 3

我的试用版解决方案如下：

不要在 index.html 中添加 .css 和 .js，因为我认为这里是建议的： https://docs.dhtmlx.com/gantt/desktop__install_with_bower.html#addingprofessionaleditionintoproject。将它们添加到 angular.json 中。
在dhtmlx-gantt

npm

package.json

更改试用版的 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"
      }
    }

Answer 4

从“dhtmlx-gantt”导入{甘特图}；

而不是

导入“dhtmlx-甘特图”；

似乎对我有用。

Angular 2 Framework 的 DHTMLX 甘特图使用给出错误

DHTMLX Gantt Chart Usage with Angular 2 Framework gives an error

angular-cli

dhtmlx