Angular2 + KineticJS error: kinetic_kinetic__WEBPACK_IMPORTED_MODULE_4__.Kinetic is undefined

Question

背景：

我目前正在努力将旧网站从 PHP+MySQL+Jquery+KineticJS 迁移到 Angular6 + Firebase。他们有一个广泛的领域，有很多拖放功能和 Canvas 的乐趣，这些都是用 Jquery+KineticJS 编写的——我希望我可以将它几乎原封不动地导入到组件中，从而节省了很多时间给客户和我自己。

Angular 堆栈：

"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，同样的错误。

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

Answer 1

好的，对于尝试这样做的任何可怜的灵魂，我的建议是不要打扰 - 只需使用以下库之一重建：

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

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

结案...

Angular2 + KineticJS error: kinetic_kinetic__WEBPACK_IMPORTED_MODULE_4__.Kinetic is undefined

Angular2 + KineticJS error: kinetic_kinetic__WEBPACK_IMPORTED_MODULE_4__.Kinetic is undefined

kineticjs

angular