How to load javascript libraries after content is loaded in Angular 2/4?

Question

At this moment my javascript libraries are linked with a script tag within the head of my index.html file. Is it possible to load those libraries after the content of the first html page has been loaded? I am using Angular 2/4?

score 2 · Answer 1 · answered Sep 28 '17 at 12:37

2

Yes, you can make your scripts be loaded after additional resources, making them be loaded after things like resources and content, by putting the script tag at the end of your body tag.

Here's a related question on Stackoverflow for further reference.

answered Sep 28 '17 at 12:37

S.V.

1,181
6
23

In angular the page content is loaded different from a custom made webpage. Loading... is being replaced by html content. Do you think this will still work? – Klyner Sep 28 '17 at 12:49

score 0 · Answer 2 · answered Sep 28 '17 at 13:23

If you're using the Angular CLI you can include .js files from your node_modules in your .angular-cli.json so when the CLI bundles your application all your JS libraries are included as well.

Right under the the styles array and above the environmentSource you should see the scripts array. I've included a little bit (I've truncated it) of the JSON as reference for you.

{
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "styles": [
        "styles.scss"
      ],
      "scripts": [
        "../node_modules/hammerjs/hammer.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ]
}

How to load javascript libraries after content is loaded in Angular 2/4?

2 Answers2