Importing interactjs 1.7.2 in Angular 8 not working

Question

I'm trying to import interactive.js 1.7.2 in Angular 8. I installed as follows:

npm install interactjs@next

then imported in different ways and none worked:

import * as interact from 'interactjs';

import interact from 'interactjs'

import from 'interactjs';

import * as interact from '@interactjs/interactjs';

declare var interact:any; (with no imports)

The solution here seems to work for others but not for me.

I get many errors when starting up Angular so it has to be a problem with the import, for example I get:

src/app/web/visuals/svg.rectangle.ts(65,25): error TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'typeof import("C:/projects/myproject/node_modules/@interactjs/interactjs/index")' has no compatible call signatures.

../../node_modules/@interactjs/core/Interactable.d.ts(7,19): error TS1086: An accessor cannot be declared in an ambient context.

../../node_modules/@interactjs/core/Interaction.d.ts(74,45): error TS2304: Cannot find name 'Omit'.

How to fix this issue?

UPDATE

This problem is documented here but with no solution.

What version of TypeScript are you using? Can you please provide more details about your setup? — Roy, Dec 15 '19 at 16:41
@Roy TypeScript 3.7.3, I'm using VS code and also get errors while editing the Angular file, such as `This expression is not callable.` on `interact('.item').draggable({`. — ps0604, Dec 15 '19 at 16:45
None of the 3 answers worked for me angular-15.1.0 and ts-4.9.4 — kaushalpranav, Feb 19 '23 at 11:40

score 2 · Accepted Answer · answered Dec 16 '19 at 04:26

2

You can do like this using es5 syntax

const interact = require('interactjs')

answered Dec 16 '19 at 04:26

Tony Ngo

19,166
4
38
60

score 0 · Answer 2 · answered Dec 15 '19 at 16:20

0


import interact from 'interactjs'

interact('.item').draggable({
  onmove(event) {
    console.log(event.pageX,
                event.pageY)
  }
})

https://interactjs.io/

As shown on the official page

answered Dec 15 '19 at 16:20

Hitech Hitesh

1,641
1
9
18

score 0 · Answer 3 · answered Mar 06 '20 at 11:16

For angular 8 below code work for me.

import * as InteractJS from 'interactjs/dist/interact.js';

  ngOnInit() {
    InteractJS('.item').draggable({
      onmove(event) {
        console.log(event.pageX, event.pageY);
      }
    });
  }

.item {
  touch-action: none;
  user-select: none;
  height: 80px;
  width: 80px;
  background-color: red;
}

Importing interactjs 1.7.2 in Angular 8 not working

3 Answers3