How can I use this in my Angular4 app?

[Jamlearner]

First, I installed npm install draggabilly and npm install --save @types/draggabilly

Then in my modules.ts of my angular app:

import Draggabilly from 'draggabilly';

@NgModule({
    declarations: [
    imports: [
        Draggabilly
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

In my component, this is how i try to attach draggabilly to the container

    ngAfterContentInit() {
        const holder = new Draggabilly('.draggable', {containment: false});
    }

Code seems to have no linting errors but I am unable to compile.

ERROR in TypeError: Cannot use 'in' operator to search for 'providers' in null

How can i use draggabilly in my Angular4 application?

[Jamlearner]

I have also tried the module approach:

With ONLY "draggabilly": "^2.2.0" and "jquery": "^3.3.1" installed. Removing the typing files from npm install --save @types/draggabilly

<!-- CSS-->
  .container {
    padding: 10px;
    border: 2px solid #F90;
    height: 200px;
  }
  
  .draggable {
    width: 140px;
    height: 140px;
    background: #F90;
    border-radius: 10px;
    margin: 0 10px 10px 0;
    float: left;
  }
  .draggable.is-pointer-down {
    background: #09F;
    z-index: 2; /* above other draggies */
  }
  .draggable.is-dragging { opacity: 0.7; }

<!-- Markup -->
<div class="draggable"></div>
<div class="draggable"></div>
<div class="draggable"></div>

In my angular component:

var Draggabilly = require('draggabilly');

 ngAfterContentInit() {
      var draggie = new Draggabilly( '.draggable', {
        // options
      });
}

No compiler errors for this approach but my boxes wont drag.

[David DeSandro]

See possibly solution in #178

[Jamlearner]

Found the solution.

Import like this,

import * as Draggabilly from 'draggabilly/draggabilly';