Getting dragula to work with Ionic2 RC0

install dragula for ionic2rc0.md

Getting dragula to work with Ionic2 RC0

Install Dragula

npm install dragula --save

Install Dragula typings

npm install @types/dragula --save

We would usually install ng2-dragula from npm, but that is failing with Ionic2 RC0 because it has angular/common version 2.0.0 as a dependency. To use 2.1.0 we can download the zip and load it from the src dir as a custom module

Download ng2-dragula-master.zip to a new app/src/modules directory and unzip it

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

Next, ng2-dragula is also breaking when importing the dragula namespace, so in:

modules/ng2-dragula-master/components/dragula.directive.ts
modules/ng2-dragula-master/components/dragula.provider.ts

change:

import * as dragula from 'dragula';

to:

import dragula from 'dragula';

Then import DragulaModule in src/app/app.module.ts. We also add DragulaModule to the @NgModule imports array. If you want to set ng2-dragula config options, add import the DragulaService in src/app/app.components.ts. See the other files in this gist for the full file.

Now ionic serve should run fine.

app.components.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';

import { Tabs } from '../pages/tabs/tabs';

import { DragulaService } from '../modules/ng2-dragula-master/components/dragula.provider';


@Component({
  template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
  rootPage = Tabs;

  constructor(
    platform: Platform,
    dragulaService: DragulaService
    ) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });

    dragulaService.setOptions('first-bag', {
      copy: true
    });

  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { DragulaModule }  from '../modules/ng2-dragula-master/ng2-dragula';
import { DragulaService } from '../modules/ng2-dragula-master/components/dragula.provider';


@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    DragulaModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    DragulaService
  ]
})
export class AppModule {}