angular 2 - webpack module import support

[manuelfink]

I'm looking for a way to use with this https://github.com/valor-software/ng2-dragula in angular 2. Is it possible to add support to import in ng2 with:

import {autoScroll} from 'dom-autoscroller';

[hollowdoor]

I don't know. I don't use angular. Could you explain what limitations are preventing this from being used with ng2. As far as I can tell the import statement you have there is like an es2015 import. Can you direct me to some documentation that would show me some method of introducing compatibility with angular?

[zacol]

@manuelfink All you need to do to import dom-autoscroller is two steps:

1. Use this line to import library:
   import AutoScrollerFactory from 'dom-autoscroller';

2. Use this code to initialize script:

this.scroll = AutoScrollerFactory([
      document.querySelector('.list1'),
      document.querySelector('.list2'),
    ], {
      margin: 20,
      maxSpeed: 10,
      scrollWhenOutside: true,
      autoScroll: () => {
        // Only scroll when the pointer is down, and there is a child being dragged
        return this.scroll.down && this.isDragging;
      },
    });

[hollowdoor]

Thanks @zacol. Let me know if that solves this @manuelfink .

[hollowdoor]

Since this seems to be solved I'm closing. @manuelfink Thanks anyway. I learned a little bit about angular while researching for this.

[ericeubank-powerschool]

I know this issue is closed, but in case @manuelfink was still having a problem, I had a problem with this but the problem was problem with Webpack, not Angular. There's an indirect dependency on an npm module called 'iselement' via the dependency on 'dom-set' by this project. iselement's package.json is incorrect and directs Webpack's require resolver to the wrong .js file. The fix that worked for me was to add the packageMains property to my Webpack config:

  resolve: {
    extensions: ['', '.js', '.ts'],
    packageMains: ['browser', 'web', 'browserify', ['jam', 'main'], 'main']
  }

Note that I'm still using Webpack 1. If you are using Webpack 2 I believe the property is now called mainFields.

[hollowdoor]

@eeubank In the latest version of dom-set I temporarily replaced iselement with an internal module. There's another issue that's dealing directly with this problem #22. I'm waiting to see if others are still having problems there. I used rollup for testing so even though iselement wasn't working for almost everyone else that are using babel it worked locally for me.

[pbasnagetr]

Hi, I'm trying to add
import {AutoScrollerFactory} from "dom-autoscroller";
in my app.module.ts file and I'm getting an error:

    TS7016: Could not find a declaration file for module 'dom-autoscroller'. '/node_modules/dom-autoscroller/dist/bundle.js' implicitly has an 'any' type.
  Try `npm install @types/dom-autoscroller` if it exists or add a new declaration (.d.ts) file containing `declare module 'dom-autoscroller';`

@manuelfink Let me know if you managed a work-around but I've been trying to get this to work for quite some time with no luck. I'm using the latest angular (4.4.5), if someone could help me with this import or point me to another ng4 auto-scroll library with good documentation/demo I would be extremely grateful

[hollowdoor]

@pbasnagetr The export is default so you'd do:

import autoScroller from 'dom-autoscroller';

[pbasnagetr]

I get the same error both when I include that in my component and my app.module.ts

[hollowdoor]

I'm not familiar with Typescript. Looking at similar issues elsewhere people have their noImplicitAny set to true. microsoft/TypeScript#15031 https://blog.mariusschulz.com/2017/02/17/typescript-2-1-untyped-imports

Also see https://www.reddit.com/r/typescript/comments/6g1fgy/importing_nontyped_modules_with_noimplicitany/

[arj060892]

@pbasnagetr / @manuelfink were you able to resolve the dependency?
as i'm facing the same issue because of which i'm not able to integrate autoscroller with my Dragula module for auto-scroll while dragging inside a scroll-able div/body

[pbasnagetr]

@arj060892 I'd suggest abandoning Dragula for a drag library that is still active, being updated, and has this feature. I've switched to Sortable myself.

[hollowdoor]

I don't know if this is the problem, but the way a lot of libraries handle default is different than the way it used to be. webpack, and babel do this. It's possible typescript is doing it as well. So maybe sometimes this is the problem if a person is using a newer version of these libraries.

import auto from 'dom-auto-scroller';
const autoScroller = auto.default;

I use rollup personally which exports default the obvious way. Though rollup could change in the future.