add and use custom js file in angular 7 app

Question

assuming I have a js file mylib.js in an angular 7 app, located in assets/mylib.js:

mylib = function(){
    return {
        hi: function() { alert('hi'); }
    };
}();

and I want in my hero-form.component.ts to be able to call mylib.hi(), what would be the proper way to do this ?

I tried to the same as the jquery package that I installed and it works so I added in angular.json -> projects/myproject/architect/build/options/scripts like this: "scripts": ["node_modules/jquery/dist/jquery.js", "src/assets/mylib.js"] and in hero-form.component.ts:

import * as $ from "jquery"; // works, installed via npm
import * as mylib from "mylib"; // cannot find module mylib

I test it by calling in the component:

  ngOnInit() {
    $('body').css('background','gainsboro');
    mylib.hi();    
  }

please note, I don't want to add the scripts in the index.html header globally, I want to call import for each component that needs it

Maybe it will to add it withitn the tsconfig.json into , `'include": [ "./src", // need to be there if you add the include "path to the file" ]` https://www.typescriptlang.org/docs/handbook/tsconfig-json.html — Lukas Bonzelett, Apr 25 '19 at 11:52
@LukasBonzelett there's no mention of jquery in any of the `tsconfig` files so I assume adding jquery to them won't help either — Omu, Apr 25 '19 at 12:21
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) — Dblaze47, Apr 25 '19 at 12:28
@Dblaze47 the question you referenced is about angular 4, and the answer mentions `angular-cli.json` which is not present in angular 7, but it might be useful — Omu, Apr 25 '19 at 12:32
you need to call the local path for `mylib`, unless your lib `mylib` was downloaded from NPM. — LostJon, Apr 25 '19 at 12:33
@Omu I missed that sorry. That post contains many of the possible solutions to accomplishing this, and yes it might be useful. :) — Dblaze47, Apr 25 '19 at 12:35
@LostJson, what do you mean by that, which file I need to edit and what to edit it with ? — Omu, Apr 25 '19 at 12:38
@deathangel908 I've uploaded it here: https://files.fm/u/fgku5mk8 — Omu, Apr 25 '19 at 13:02
I found this one https://www.truecodex.com/course/angular-6/how-to-use-external-js-files-and-javascript-code-in-angular — Lukas Bonzelett, Apr 25 '19 at 13:36
@LUkasBonzelett yes, using `declare const mylib: any;` as in the link you posted worked, I only had to remove the `export mylib` as was suggested in an answer, you can add this as an answer — Omu, Apr 25 '19 at 18:37

score 1 · Answer 1 · answered Apr 25 '19 at 12:31

1

Export mylib from mylib.js as (just put it at the bottom of the file):

export mylib;

answered Apr 25 '19 at 12:31

Afshar

262
3
10

I've added `export mylib;` still getting `Failed to compile. Module not found: Error: Can't resolve 'mylib'` – Omu Apr 25 '19 at 12:36

score 1 · Accepted Answer · answered Apr 26 '19 at 11:41

(since the answer that helped me was deleted I'm posting this)

in the hero-form.component.ts I had to do use

declare const mylib: any;

instead of import * as mylib from "mylib"

another important thing is that you have close the console (or ctrl+c) running ng serve after adding scripts in angular.json and run ng serve again
I also had to remove the export mylib; from mylib.js as suggested in answer, as this was throwing an error unexpected token export

I got to this answer by following an article suggested in the comments: https://www.truecodex.com/course/angular-6/how-to-use-external-js-files-and-javascript-code-in-angular

add and use custom js file in angular 7 app

2 Answers2