How to import an external script in my Angular library?

Question

I am trying to export some business logic ts files of my Angular application into an Angular library. Unfortunately, I need to use a Javascript file to connect to a proprietary service build by other people, which is only available as a pure javascript file and requires jQuery. Without libraries (when I was using the script in my angular application), I solved this by adding these js files to the .angular.json under the "scripts" section.

The js file is huge so I could not consider the option to rewrite in typescript.

Is there some way to import and use a javascript file in my ng library?

Thanks Karan

@pc_coder, Sorry, but angular libraries do not have index.html. Thanks anyways — Karan Deep Singh
– Karan Deep Singh, Commented Jun 7, 2020 at 4:31
@KaranDeepSingh: Sorry I had pasted the wrong link. Dees that one help ? stackoverflow.com/a/53313401/1160794 — David
– David, Commented Jun 7, 2020 at 10:01
@pc_coder, thanks for sharing this. I had looked at this post already. It does not seem to solve the issue. Thanks for your help. — Karan Deep Singh
– Karan Deep Singh, Commented Jun 7, 2020 at 17:28

Karan Deep Singh · Accepted Answer · 2020-07-27 18:33:07Z

2

I have finally solved my issue. Turns out there is no way to add a javascript file to an Angular library since ng library does not support "script" tag.

There is one other way: i.e. you can publish your library without the javascript file dependency, and the client using it will have to do 2 things:

npm install "your-library"
Now add the dependent javascript file to scripts tag in angular.json file.

Example in my case:

Run npm install wps-ng

And my Angular.json looks like this:

"scripts": [ "node_modules/jquery/dist/jquery.js", "node_modules/wps-js-52-north/src/web/lib/wps-js-all.js" ]

Unlike the other libraries, just a simple npm install is not sufficient, the client will just need to add their javascript file to scripts tag.

answered Jul 27, 2020 at 18:33

Karan Deep Singh

911 silver badge8 bronze badges

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

2 Comments

mattstuehler Over a year ago

Thanks for this solution. But 1) How does the client get the dependent JavaScript file? 2) Why is the path of the dependent file node_modules/wps-js-52-north/src/web/lib/?

Daniel Methner Over a year ago

how do you use that script in a module then?

Collectives™ on Stack Overflow

How to import an external script in my Angular library?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related