Installation de Dragula avec Angular CLI

Question

Comment est-il possible d'intégrer Dragula dans un projet Angular 2 avec Angular CLI ?

Je l'ai installé avec :

npm install ng2-dragula dragula --save

et l'a ajouté à mon app.module avec :

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

Cependant, je reçois l'erreur :

"Impossible de trouver le module 'ng2-dragula'.

Les méthodes que j'ai trouvées suggèrent de l'ajouter à angular-cli-build.js mais je ne trouve pas de fichier portant ce nom.

Quelle est la procédure à suivre, étape par étape, pour qu'un module tiers comme Dragula fonctionne avec Angular CLI ?

Answer 1

Pour ajouter dragula à votre projet, ajoutez les css et les js à angular-cli.json (notez qu'il faut remonter un répertoire pour ces deux sections car elles fonctionnent à partir de src )

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

puis ajouter le ng2-dragula à la section des paquets

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

Sur app.module.ts Importez le module et déclarez le service.

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

Answer 2

Cependant, je reçois l'erreur "Impossible de trouver le module 'ng2-dragula'. Les méthodes proposées par méthodes que j'ai trouvées suggèrent de l'ajouter à angular-cli-build.js, mais je ne trouve pas de fichier portant ce nom.

Maintenant il y a seulement angular-cli.json. Vous pouvez essayer de l'ajouter dans scripts section.

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

Answer 3

Conformément à les instructions pour Angular 2 Webpack la déclaration d'importation correcte dans app.module devrait être la suivante :

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