Add .js scripts in Angular 2 project

Question

I am building a web app with Angular 2 framework and I want to use an external template (https://freehtml5.co/preview/?item=splash-free-html5-bootstrap-template-for-any-webs

Answer 1

If you're using the Angular CLI you can include .js files from your node_modules in your .angular-cli.json.

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"
      }
    }
  ]
}

Answer 2

i think loading script tags inside angular 2 components is not allowed but take a look at this it may help you How do I include a JavaScript file in another JavaScript file?

Answer 3

Script tags are not allowed in component templates. Including scripts in your index.html should make them globally accessible. It isn't clear what you mean when you say you're browsing to another page, but if you use the angular router with router-outlet all scripts you import should be accessible.