使用 Angular CLI 安装 Dragula答案

【问题标题】：Installing Dragula with Angular CLI使用 Angular CLI 安装 Dragula
【发布时间】：2016-10-13 10:37:50
【问题描述】：

如何使用 Angular CLI 将 Dragula 合并到 Angular 2 项目中？

我已经安装了它：

npm install ng2-dragula dragula --save

并将其添加到我的app.module 中：

import { DragulaModule, DragulaService }   from 'ng2-dragula';

但是，我得到了错误：

"找不到模块'ng2-dragula'

我找到的方法建议将其添加到angular-cli-build.js，但我找不到具有该名称的文件。

让第三方模块（如 Dragula）与 Angular CLI 一起使用的分步过程是什么？

【问题讨论】：

标签： angular angular-cli dragula

【解决方案1】：

要将 Dragula 添加到您的项目中，请将 css 和 js 添加到 angular-cli.json （注意为这两个部分添加目录，因为它们从 src 工作）

  "styles": [
    "../node_modules/dragula/dist/dragula.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/dragula/dist/dragula.js"
  ]

..然后将 ng2-dragula 添加到包部分

  "packages": [
    "node_modules/ng2-dragula"
  ]

在 app.module.ts 中导入模块并声明服务。

import { DragulaModule, DragulaService } from '../../node_modules/ng2-dragula/ng2-dragula';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    DragulaModule
  ],
  providers: [
    DragulaService
  ],
  bootstrap: [AppComponent]
})

【讨论】：

包部分在哪里？在 angular-cli.json 上找不到

【解决方案2】：

但是我收到错误“找不到模块 'ng2-dragula'。我发现的建议方法建议将其添加到 angular-cli-build.js，但我找不到同名的文件。

现在只有 angular-cli.json。您可以尝试将其添加到 scripts 部分。

https://github.com/angular/angular-cli#3rd-party-library-installation

【讨论】：

它删除了编译警告。我今天没有时间检查功能，但只要我有时间，我就会将其标记为正确，因为它有效。

【解决方案3】：

根据the instructions for Angular 2 Webpack，app.module 中正确的导入语句应为：

import {DragulaService, Dragula} from 'ng2-dragula/ng2-dragula';

【讨论】：