Load scripts through all components in Angular 2

Question

I have been using Angular 2 with AdminLTE which needs to run some scripts to load properly. So I have added them in in my .anglular-cli.json:

"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/admin-lte/dist/js/adminlte.min.js",
    "../node_modules/moment/min/moment.min.js"
],

Unfortunately, this does not work all time. The page loads fine the first time but when I route to another page, scripts are not reloaded for the component template.

I could not find any information about this which is very surprising for me since I thought it would be a general problem! I might be totally lost with this!

you might be using some scripts that are overriding them – Rahul Singh Sep 27 '17 at 13:05 — Rahul Singh, Sep 27 '17 at 13:05
I'm afraid I'm not using any other script at all – m33n Sep 27 '17 at 14:48 — m33n, Sep 27 '17 at 14:48

Sunny Gohil · Answer 1 · 2017-10-19T10:51:37.497

A simple solution I found was just to add a window.location.href = '...' to whatever link you are opening after login. Heres my function for the when the login button is clicked.

this.authService.authenticateMember(member).subscribe(data => {
  if (data.success) {
      ...
      window.location.href = '/'
      ...
  } else {
      ...
  }
}

So if you are using authentication then you can put that above code at the end of your login success response and it will refresh the page aswell as take the user to wherever they are going after a successful login.

This is not the best solution but it is the simplest one i can think of that dosent require too many changes. Hope it helps :)

That's a very interesting solution! – m33n Oct 19 '17 at 10:35 — m33n, Oct 19 '17 at 10:35

score 0 · Accepted Answer · answered Oct 04 '17 at 09:49

You can remove and recreate your script elements in DOM every time you need, like this:

document.getElementById("myScript").remove();
var testScript = document.createElement("script");
testScript.setAttribute("id", "myScript");
testScript.setAttribute("src", "assets/js/script.js");
document.body.appendChild(myScript);

I posted a question in GitHub where I explain how to do it.

Load scripts through all components in Angular 2

2 Answers2

Linked