1

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/[email protected]

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 should, 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);

How can I get this working?

Update 1

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.

Update 2

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.

Update 3

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.

enter image description here

4
  • try import * as IScroll from 'iscroll'; or try import IScroll from 'iscroll'; or try import { IScroll } from 'iscroll';
    – Jamshed
    Jul 13, 2018 at 5:13
  • or import in to your index.html and then declare var IScroll; in you some.component.ts
    – Jamshed
    Jul 13, 2018 at 5:15
  • Thanks @Jamshed, I've added comments to these as UPDATE2 so can get the formatting.
    – peterc
    Jul 13, 2018 at 7:07
  • I have a follow up to this here where I use a "manual workaround" to get the library at least loading..
    – peterc
    Jan 2, 2019 at 12:28

1 Answer 1

0

I know, already 3 years passed. But i ran into similar need today and found this: https://www.npmjs.com/package/@types/iscroll

Just add it to dependencies it will create a Typescript filler

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.