Adding a script JS to my angular7 project

Question

For my project I need to install the "Loadingbar.js" lib to one of my pages (which you can find here: https://loading.io/progress/). I did paste the CSS in my global "style.css" file.

So, first, I just tried to put the <script></script> in my index:

<script type="text/javascript" src="assets/js/loading-bar.js"></script>

It worked for few hours, and now it does not work anymore. So I tried everything: I tried to put the <script> everywhere on each line of my index.html or even in the html of my page, in the body, under the body, under the <app-root></app-root>... nothing worked.

Also, the Angular project is sometime trolling me: the js is loaded once very rarely. If I refresh the page without changing anything- it does not work anymore.

I tried to add "defer" to the <script></script>.

I tried to wait document ready, I tried the setTimeout, but it never worked.

I tried to add the path to the script in "angular.json", didn't work.

What can I do to make this work? How do I add JS lib to an angular project?

Thanks.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

First thing you should know is that in angular applications it's better to use npm dependency of any library if possible. If this is not possible and you need to use external js files, you can follow these steps:

First, put your js inside the node_modules folder. eg: node_modules/test-lib/loading-bar.js
Inside your app.module.ts, you can put this line at top of the file:

import test-lib/loading-bar.js(without node_modules)

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 18, 2019 at 16:16

hamed

8,04517 gold badges66 silver badges119 bronze badges

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

1 Comment

Pierre Herman Over a year ago

Thanks, but if I use that, I can't push my project on Git because the node_module folder isn't pushed.

Kyle Burkett · Accepted Answer · 2019-03-18 17:33:26Z

0

Loading.io links their library to their GitHub account.

They offer an Angular example here: https://github.com/loadingio/angular-loading-bar

It looks like the best approach is to install the library via npm or yarn.

answered Mar 18, 2019 at 17:33

Kyle Burkett

1,44313 silver badges29 bronze badges

1 Comment

Pierre Herman Over a year ago

Thanks, the library is not working, some imports arn't true like the "ldBar" import

Collectives™ on Stack Overflow

Adding a script JS to my angular7 project

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related