使用Angular CLI安装Dragula

时间:2016-10-13 10:37:51

标签: angular angular-cli dragula

如何使用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一起玩的分步过程是什么?

3 个答案:

答案 0 :(得分:4)

要将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]
})

答案 1 :(得分:1)

  

但是我收到错误“无法找到模块'ng2-dragula'   我发现建议的方法建议添加它   angular-cli-build.js,但我找不到具有该名称的文件。

现在只有angular-cli.json。您可以尝试在脚本部分添加它。

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

答案 2 :(得分:0)

根据the instructions for Angular 2 Webpack,app.module中的正确import语句应为:

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