Getting ‘jquery_connections__WEBPACK_IMPORTED_MODULE_5__ is not a function’ error when using jquery-connections npm package in Angular. How to fix it?

How to use jquery-connections library in angular application and use it in every files ?

Hi I have a requirement to connect the different div elements in my angular application using lines. I have identified that the jquery-connections npm package can do it.

Link : https://www.npmjs.com/package/jquery-connections

But I am unable to use it in my angular application. I have followed the below steps to use that library in my angular application:

step 1 : Installed the library using the command ‘ npm i jquery-connections ‘

step 2 : Added the jquery.connections.js file path in angular.json files scipts section as below :

angular.jaon file :

.
.
.
 "scripts": [ 
              "node_modules/@popperjs/core/dist/umd/popper.min.js",
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/jquery-connections/jquery.connections.js"
            ],
...

step 3 : reran the application using ng server command.

step 4 : In my component html may look loke below:

component.html file :

<div id="div1" class="border">I am one div</div>
<br /><br />

<button class="btn btn-primary">I am button</button><br /><br />

<div id="div2" class="border">I am second DIV</div>

step 5 : In my typescript file I tried to connect those two div elements according to the api document of ‘jquery-connections’ as below:

Link of Api documents of jquery-connections : https://github.com/musclesoft/jquery-connections/wiki/API

component.ts file :

import * as JQConnections from 'jquery-connections';

@Component({
  selector: 'componentSelector',
  templateUrl: '..component.html',
  styleUrls: ['...scss'],
})
export class component implements OnInit {

  ngOnInit(): void {
    JQConnections('#div1', '#div2').connections();
  }

This is what I have tried so far.

Problem :

When I the component get initialized the below erroe is displayed in the console :

re.js:6210 ERROR TypeError: jquery_connections__WEBPACK_IMPORTED_MODULE_5__ is not a function
 

So , someone please help to fix this issue and kindly let me konw, If I have done anything wrong.

If the approach is wrong then kindly tell me the correct procedure otherwise any alternative ways to acheive this behaviour in angular with ease.

Thanks in advance…