Unable to call a JS function from Typescript in Angular 13

Question

I'm trying to call the following function, LoadMultiSelect(), from one of my components because I am using a non-Angular library:

https://ibnujakaria.github.io/multiple-select-js/

This works perfectly in the console:

new MultipleSelect('#select-multiple-language', {
  placeholder: 'Select Language'
})

And loads the JS component.

Later, I try adding it in Angular, but I cannot find how to.

I tried to export the JS function in two ways:

export default function LoadMultiSelect() {
  new MultipleSelect('#select-multiple-language', {
    placeholder: 'Select Language'
  });
}

And like this:

LoadMultiSelect() {
  new MultipleSelect('#select-multiple-language', {
    placeholder: 'Select Language'
  });
}

var multiselect = new LoadMultiSelect();

export { multiselect };

I created a file to load the exported function:

assets/js/multiselect.js

Later, I added it in my build in the scripts section from my angular.json like this:

"scripts": [
              "./node_modules/multiple-select-js/dist/js/multiple-select.js",
              "src/assets/js/multiselect.js"
            ]

And then I tried to add it in my component like this:

import LoadMultiSelect from '../../../../../assets/js/multiselect';

import LoadMultiSelect from 'src/assets/js/multiselect';

But nothing works, I get this error:

Could not find a declaration file for module '../../../../../assets/js/multiselect'. '/Users/fanmixco/Documents/GitHub/holma-bootstrap/src/assets/js/multiselect.js' implicitly has an 'any' type.

Or others, any idea what I'm doing wrong?

P.S.:

Also, I tried using require, but it also failed.
I already tested previous solutions with an older version of Angular:

If you plan to close it, show me how the angular 6 or earlier versions are compatible. — Federico Navarrete
– Federico Navarrete, Commented Dec 21, 2021 at 20:12
"I added it in my build in the scripts section from my angular.json like this: "src/assets/js/multiselect.js" " Why? Remove it. It makes no sense. Programming by guessing doesn't work. The second snippet isn't valid JavaScript/TypeScript. — user16540390
– user16540390, Commented Dec 21, 2021 at 20:28
This whole approach looks pretty strange. Is there a reason for this approach? What is MultipleSelect? Why do you use the extension *.js? — user16540390
– user16540390, Commented Dec 21, 2021 at 20:32
Hi @jabaa, I have a non-Angular JS library that I must call from my component. That's the main challenge. — Federico Navarrete
– Federico Navarrete, Commented Dec 21, 2021 at 20:33
Does this library already exist? Does it contain the invalid code like the second snippet? — user16540390
– user16540390, Commented Dec 21, 2021 at 20:37

Federico Navarrete · Accepted Answer · 2021-12-22 10:45:51Z

1

I just tried this in my local system, with some random file like below,

export function MultipleSelect(val1, val2){
    console.log('Be awesome always', val1, ' and ', val2);
}

now I import this in my component like this,

export class AppComponent {
    title = 'stackoverflow-examples';
    declare MultipleSelect: any;

    constructor(
      private fb: FormBuilder
    ) {
    }

    ngOnInit() {
      import('./someRandomFile').then(randomFile=>{
        randomFile.MultipleSelect('one', 'two')
      });
    }
}

In order for this file to be imported in the angular ts file, I must allow it in tsconfig.json by allowing the js import as given below,

"allowJs": true

see the result in the console below,

Note: If unable to load the file from node_modules, please put that in regular folder like asset and do the import as suggested

edited Dec 22, 2021 at 10:45

Federico Navarrete

3,2945 gold badges50 silver badges87 bronze badges

answered Dec 22, 2021 at 3:36

Deepak Jha

1,61913 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Federico Navarrete Over a year ago

I keep facing: Uncaught SyntaxError: Unexpected token 'export'

Federico Navarrete Over a year ago

Also, it seems to be skipping this library altogether: "./node_modules/multiple-select-js/dist/js/multiple-select.js" any idea?

Deepak Jha Over a year ago

I had a same situation with a js library, I kept the library out from nodemodules as that was not required to be upgraded/updated in future but our functionality was dependent on it so removed it from there and kept it in assets like folder and imported it

Federico Navarrete Over a year ago

It worked. Can you add that to your answer? Then, I'll accept it because this is a tricky topic. Thanks!

Federico Navarrete Over a year ago

This topic is quite tricky, was tried to be closed even twice and even got -1 votes when this is a real issue in Angular 13. Thanks.

|

Collectives™ on Stack Overflow

Unable to call a JS function from Typescript in Angular 13

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related