How to connect html file with a js file from node_modules?

Question

I'm trying to add \node_modules\sip.js\dist\sip.min.js , to my html file. I tried to import like import * as SIP from 'sip.js/dist/sip'; in my component.ts but this work only if I call some function from it. But I need my html file to read this sip.min.js.

Also I tried to download local this files and added in my html file

       <script src="js/sip-0.5.0.js"></script>
       <script src="js/ua.js"></script>

and added:

   public loadScript() {
        console.log("preparing to load...");
        let node = document.createElement('script');
        node.src = this.url;
         node.type = "text/javascript";
        node.async = true;
        node.charset = "utf-8";
        document.getElementsByTagName("head")[0].appendChild(node);
   }

   ngOnInit() {
        this.loadAPI = new Promise(resolve => {
            console.log("resolving promise...");
            this.loadScript();
        });
   }

But this is not working

look at this question https://stackoverflow.com/questions/44817349/how-to-include-external-js-file-in-angular-4-and-call-function-from-angular-to-j — chestas, May 31 '19 at 14:41
but there are a lot of functions, for example: I have in my html file and in that .js file is something like this. elements.configForm.addEventListener('submit', function (e) { var form, i, l, name, value; e.preventDefault(); form = elements.configForm; for (i = 0, l = form.length; i < l; i++) { name = form[i].name; value = form[i].value; if (name !== 'configSubmit' && value !== '') { config[name] = value; } } — LoginConnecter, May 31 '19 at 14:46
Possible duplicate of [How to include external js file in Angular 4 and call function from angular to js](https://stackoverflow.com/questions/44817349/how-to-include-external-js-file-in-angular-4-and-call-function-from-angular-to-j) — Reactgular, Jun 01 '19 at 13:59

Oleg Bondarenko · Answer 1 · 2019-06-01T18:40:57.130

0

You could add them to body. Also your paths should be available from client side. But adding scripts in Init event is bad practice - it is added each time as component is created. I have added scripts in service - it executes once.

     const files = ['js/sip-0.5.0.js','js/ua.js']
     files.forEach((file) => {
                const fileRef = document.createElement('script');
                fileRef.setAttribute('type', 'text/javascript');
                fileRef.setAttribute('src',  file);
                fileRef.onload = function () {
                    console.log('loaded' + file);
                };
                document.body.appendChild(fileRef);
            });

But this approach is good only for dynamic adding scripts based on some condition. If your scripts are independent from other files you could just add it to bundle file without any manually struggling.

edited Jun 01 '19 at 18:40

answered May 31 '19 at 14:46

Oleg Bondarenko

1,694
1
16
19

How to see if paths are visible or not? and this is not working for me . – LoginConnecter May 31 '19 at 14:54
@LoginConnecter it means you do not have access to your files from your client side. You should add it to static content of your server. – Oleg Bondarenko May 31 '19 at 14:55
@LoginConnecter what web package compiler do you use ? If angular one you could add your scripts to section "assets": [ "src/libs"] and access them from client "/libs" folder ], – Oleg Bondarenko May 31 '19 at 15:12
@HereticMonkey first of all it notes that approach of OP is almost correct and working. Second one code allows loading multiple sources. – Oleg Bondarenko May 31 '19 at 15:19
@OlegBondarenko I think you missed that this question was tagged for Angular. This would not work with a default Angular application. – Reactgular Jun 01 '19 at 14:04
@Reactgular I have used it in my Angular-cli appliacation with typescript and it is working. Also adding scripts in Init event is bad practice - it is added each time as component is created. I have added scripts in service - it executes once. – Oleg Bondarenko Jun 01 '19 at 18:25
@Reactgular actually it was integration Cordova plugins to Angular application. Cordova scripts should be added only for Android platforma. That I meant about dynamic adding scripts. It is example from working project based on Angular, TS and Cordova. – Oleg Bondarenko Jun 01 '19 at 18:54

How to connect html file with a js file from node_modules?

1 Answers1