How to use IScroll in an Angular / TypeScript project

问题

I have an Angular (Ionic) application where I need momentum scrolling for desktop (running inside Electron).

One promising way of doing this may be to use IScroll, however I cannot get this to load.

I have installed so I have the following in my package.json

 "iscroll": "^5.2.0",

and also installed the typings via npm install @types/iscroll@5.2.1

First, I could not import, I get an error [ts] File 'd:/dev/capacitor/electron2/node_modules/@types/iscroll/index.d.ts' is not a module.

I then tried adding the following to the bottom of iscroll/index.d.ts..

export {IScroll};

It now seemed to remove the error .

I now added the following code:

 public ngAfterViewInit() {
   var wrapper = document.getElementById('wrapper');
   var myScroll = new IScroll(wrapper);
 }

(I know I shoud, and will, use @ViewChild() just trying to get it working initially)

This builds ok,but when I go to the test page, I get the following error..

        Error: Uncaught (in promise): TypeError: __WEBPACK_IMPORTED_MODULE_3_iscroll__.IScroll is not a constructor
    TypeError: __WEBPACK_IMPORTED_MODULE_3_iscroll__.IScroll is not a constructor
        at ListPage.webpackJsonp.190.ListPage.ngAfterViewInit (http://localhost:8100/build/main.js:114:24)
        at callProviderLifecycles (http://localhost:8100/build/vendor.js:13122:18)

IN the type definition, we do have the following...

declare class IScroll {
  constructor (element: string, options?: IScrollOptions);
  constructor (element: HTMLElement, options?: IScrollOptions);

Does anyone know how to get this working?

Thanks in advance for any help!

[UPDATE1] My next attempt was to remove the export from the type definition, try and import as follows.

import  'iscroll';

The app builds and run with no TypeScript error, until we enter the page that instantiates the IScroll, where error now becomes

    Error: Uncaught (in promise): ReferenceError: IScroll is not defined
    ReferenceError: IScroll is not defined
        at ListPage.webpackJsonp.190.ListPage.ngAfterViewInit (http://localhost:8100/build/main.js:116:24)
        at callProviderLifecycles (http://localhost:8100/build/vendor.js:13122:18)

So, still no where.

[UPDATE2]

Tried the suggestions from @Jamshed

 import * as IScroll from 'iscroll'; or
 import IScroll from 'iscroll'; or
 import { IScroll } from 'iscroll'

All of these give

[ts] File 'd:/dev/capacitor/electron2/node_modules/@types/iscroll/index.d.ts' is not a module

I did try just adding the "old way".

So in index.html I added

<script src='D:/dev/capacitor/electron2/node_modules/iscroll/build/iscroll-lite.js'></script>

and then the declare var IScroll: any; in the ts component file.

But once again I get

Error: Uncaught (in promise): ReferenceError: IScroll is not defined
    ReferenceError: IScroll is not defined

at runtime.

[UPDATE3]

I found this post, but if I copy his index.d.ts file into mine, I still cannot import {IScroll}. I can see a number of other exports, in there, but not IScroll...

来源：https://stackoverflow.com/questions/51307505/how-to-use-iscroll-in-an-angular-typescript-project

标签

javascript

angular

typescript

ionic-framework