如何为Angular2安装组件包装器（特别是Dragula）

Question

我是一位有帮助的助手，可以为您翻译文本。

我很新于npm和Angular2。我已经按照Angular2的教程创建了一个初始应用程序，并且已经有了相当实质性的东西。 https://angular.io/docs/ts/latest/tutorial/ 我需要向我的应用程序添加拖放功能，并认为我应该使用原生于Angular的东西而不是jquery-ui。我找到了这个插件：

https://github.com/valor-software/ng2-dragula

我已经按照README中的说明进行操作，看起来已经安装成功了。它出现在node_modules下，并且ng2-dragula": "^1.0.3已添加到我的依赖项中。然后我运行了npm install和start。

但是，当我尝试按照readme中的指示使用指令和提供程序时，在我的IDE和控制台中都返回未找到。

@Component({
  selector: 'sprint-tasks',
  inputs: ['sprintTask'],
  templateUrl: './views/sprint-tasks.html',
  directives: [Dragula],
  providers: [SprintTaskService],
  viewProviders: [DragulaService]
})

现在，我猜想我需要（1）在文件顶部导入组件和/或（2）在我的索引的加载库部分列出该库。但是文档没有提到这一点，而且我一直无法找出正确的端点。文档似乎认为这些指令应该在npm安装后“内在”于系统中，但我不知道这是否可行 :) 我猜/希望对于习惯于处理导入第三方组件的人来说，这将是相当明显的。感谢您提供的任何帮助。

- daprezjer

---

我已经通过将dragula模块的“src”文件夹复制到我的应用程序中，并将指令和服务指向它们来使其工作。import {Dragula} from './directives/dragula.directive'; import {DragulaService} from './providers/dragula.provider';没有关于此的文档，但我通过示例找到了解决方法：https://github.com/valor-software/ng2-dragula/blob/master/src/examples.ts我仍然想知道是否有更自动化的方法来完成这个过程。 - daprezjer

我完全按照这里的说明操作，但仍然无法使其正常工作。他们在“app.component.js”中建议使用的directives: [Dragula]甚至对于@Component也是无效的：https://github.com/valor-software/ng2-dragula/wiki - Dan J

Answer 1

这个问题的常见原因是tsconfig.json文件上的一个标志。为了正确引用这些文件，您应该使用

"moduleResolution": "node"

同时，您需要使用类似Systemjs或类似的模块加载程序库来导入这些内容。

Dragula 库应该会随附一个捆绑包，您可以将其导入到模块加载器中。对于system，只需在index.html文件中简单地包含该捆绑包即可。

<script src="node_modules/dragula/path/to/bundle.js"></script>

或者无论文件叫什么名字。

如果库中不包含捆绑包，或者捆绑包对您不起作用，则可以在系统配置中注释此内容，系统会为您完成此操作。

System.config({
  map:{
    'dragula': 'node_modules/dragula'
  }
});

一如既往，这可能需要针对您的确切需求进行一些微调，但应该能让您接近目标。需要更多信息才能进一步调整答案以适应您的特定情况。

- SnareChops