Angular2 + KineticJS 错误：kinetic_kinetic__WEBPACK_IMPORTED_MODULE_4__.Kinetic 未定义答案

【问题标题】：Angular2 + KineticJS error: kinetic_kinetic__WEBPACK_IMPORTED_MODULE_4__.Kinetic is undefinedAngular2 + KineticJS 错误：kinetic_kinetic__WEBPACK_IMPORTED_MODULE_4__.Kinetic 未定义
【发布时间】：2018-06-27 18:25:00
【问题描述】：

背景：

我目前正在将旧网站从 PHP+MySQL+Jquery+KineticJS 迁移到 Angular6 + Firebase。他们有一个广阔的区域，有很多拖放功能和画布的乐趣，都是用 Jquery+KineticJS 编写的——我希望我可以将它几乎原样导入到一个组件中，为客户和我自己节省大量时间.

角度堆栈：

"dependencies": {
    "@angular/animations": "^6.0.5",
    "@angular/common": "^6.0.5",
    "@angular/compiler": "^6.0.5",
    "@angular/core": "^6.0.5",
    "@angular/flex-layout": "^6.0.0-beta.16",
    "@angular/forms": "^6.0.5",
    "@angular/http": "^6.0.5",
    "@angular/platform-browser": "^6.0.5",
    "@angular/platform-browser-dynamic": "^6.0.5",
    "@angular/router": "^6.0.5",
    "angular2-notifications": "^1.0.0",
    "core-js": "^2.5.7",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.3.1",
    "kinetic": "^5.2.0",
    "lodash": "^4.17.5",
    "nodemailer": "^4.6.7",
    "rxjs": "^6.2.1",
    "typescript": ">=2.7.0 <2.8.0",
    "zone.js": "^0.8.26"
  },

采取的步骤：

正如您在上面看到的，jquery 和 kinetic 软件包都已安装。

然后我将其添加到项目的 index.html 以处理 KineticJS 使用的缺少的全局范围：

<script>
    var global = global || window;
    var Buffer = Buffer || [];
    var process = process || {
      env: { DEBUG: undefined },
      version: []
    };
</script>

现在我得到了这个错误：

ERROR TypeError: "kinetic_kinetic__WEBPACK_IMPORTED_MODULE_4__.Kinetic is undefined"

当我打电话时：

new Kinetic.Stage({
    container: 'elementId',
    width: canvasWidth,
    height: canvasHeight
});

我想不通，看起来好像没有其他人在四处搜索:(

我刚试过 KineticJS 5.1.0，和旧网站一样，同样的错误。

那么，有人知道解决这个问题的方法吗？还是我应该停止尝试将这个正方形放入圆圈并进行重建？任何清晰或想法将不胜感激谢谢:)

【问题讨论】：

标签： angular kineticjs

【解决方案1】：

对于任何试图这样做的可怜人来说，我的建议是不要打扰 - 只需使用以下库之一进行重建：

德拉古拉：https://github.com/valor-software/ng2-dragula
拖放：https://github.com/ObaidUrRehman/ng-drag-drop

我选择了 Dragula，到目前为止，它非常易于使用，实际上并没有花费我太多时间来重建。

案件结案...

【讨论】：