Question

我对npm和Angular2都很新。我已经关注Angular2关于创建初始应用程序的教程，而且我已经有了相当可观的东西。 https://angular.io/docs/ts/latest/tutorial/

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

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

我已按照自述文件中的说明操作，似乎已安装。它存在于node_modules和ng2-dragula＆＃34;：＆＃34; ^ 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）在我的索引的加载库部分中列出库。但文档没有提到这一点，我也无法弄清楚正确的终点。它几乎就像文档认为这些指令现在应该是天生的＃34;在npm安装之后到系统，但我不知道这是否是一件事：）

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

Answer 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'
  }
});

一如既往，您可能需要对您的确切需求进行一些调整，但应该让您亲近。需要更多信息来进一步微调特定情景的答案。

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

1 个答案: