如何为 Angular2 安装组件包装器（尤其是 Dragula）答案

【问题标题】：How to install a component wrapper for Angular2 (Dragula in particular)如何为 Angular2 安装组件包装器（尤其是 Dragula）
【发布时间】：2016-01-31 22:19:58
【问题描述】：

我对 npm 和 Angular2 都很陌生。我已经按照 Angular2 关于创建初始应用程序的教程进行操作，并且我已经有了相当丰富的内容。 https://angular.io/docs/ts/latest/tutorial/

我需要为我的应用程序添加拖放功能，并相信我应该使用 Angular 原生的东西而不是 jquery-ui。我找到了这个插件：

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

我已按照自述文件中的说明进行操作，并且它似乎已安装。它位于 node_modules 和 ng2-dragula 下": "^1.0.3 已添加到我的依赖项中。然后我运行 npm install 并启动。

不过，当我尝试使用自述文件中指定的指令和提供程序时，它返回 not found（在我的 IDE 和控制台中）。

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

现在，我猜我需要 (1) 在文件顶部导入组件和/或 (2) 在索引的加载库部分列出库。但是文档没有提到这一点，我一直无法找出正确的端点。就好像文档认为这些指令现在应该是 npm 安装后系统的“固有”，但我不知道这是否是一回事:)

我猜测/希望这对于习惯于处理导入第三方组件的任何人来说都是相当明显的。感谢您提供的任何帮助。

【问题讨论】：

我已经通过将 Dragula 模块的“src”文件夹复制到我的应用程序，并将指令和服务指向它们来使其工作。 import {Dragula} from './directives/dragula.directive'; import {DragulaService} from './providers/dragula.provider'; 没有这方面的文档，但我通过示例找到了它：github.com/valor-software/ng2-dragula/blob/master/src/… 我仍然想知道是否有更自动的方法来做到这一点。
我按照此处的说明到了一个发球台，但仍然无法让它工作。他们为“app.component.js”建议的directives: [Dragula] 甚至对@Component 无效：github.com/valor-software/ng2-dragula/wiki

标签： angular

【解决方案1】：

此问题的通常罪魁祸首是 tsconfig.json 文件中的标志。为了正确引用这些文件，您应该使用

"moduleResolution": "node"

您还需要使用诸如 Systemjs 之类的模块加载器库或类似的东西来导入这些。

Dragula 库应该附带一个捆绑包，然后您可以将其导入模块加载器。使用系统，这应该就像简单地将捆绑包包含在您的 index.html 文件中一样简单。

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

或任何文件被调用。

如果库不包含捆绑包，或者捆绑包不适合您，那么您可以在系统配置中对此进行注释，系统会为您执行此操作。

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

与往常一样，这可能需要根据您的确切需求进行一些调整，但应该会让您接近。需要更多信息来进一步微调针对您的特定场景的答案。

【讨论】：