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" ] typescriptlang.org/docs/handbook/tsconfig-json.html — Lukas Bonzelett
– Lukas Bonzelett, Commented Apr 25, 2019 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
– Omu, Commented Apr 25, 2019 at 12:21
Possible duplicate of How to include external js file in Angular 4 and call function from angular to js — Dblaze47
– Dblaze47, Commented Apr 25, 2019 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
– Omu, Commented Apr 25, 2019 at 12:32
you need to call the local path for mylib, unless your lib mylib was downloaded from NPM. — LostJon
– LostJon, Commented Apr 25, 2019 at 12:33

Afshar · Accepted Answer · 2019-04-25 12:31:57Z

1

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

export mylib;

answered Apr 25, 2019 at 12:31

Afshar

3073 silver badges13 bronze badges

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

1 Comment

Omu Over a year ago

I've added export mylib; still getting Failed to compile. Module not found: Error: Can't resolve 'mylib'

Omu · Accepted Answer · 2019-04-26 11:41:26Z

1

(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

answered Apr 26, 2019 at 11:41

Omu

71.6k95 gold badges286 silver badges413 bronze badges

Collectives™ on Stack Overflow

add and use custom js file in angular 7 app

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related