How to include external JS file to angular5?

Question

I am new to angular and started learning angular5 from this tutorial .

I am converting normal HTML template to Angular 5 version now I am facing difficulties when adding external JS file to angular 5 project.

Can anyone help me to add external js file to angular5 project ?

Here is my updated angular.json file. still not working for me.

/*angular.json*/
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "minimus-master": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/minimus-master",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [
              "src/assets/vendors/jquery/jquery.min.js",
              "src/assets/vendors/imagesloaded/imagesloaded.pkgd.js",
              "src/assets/vendors/isotope-layout/isotope.pkgd.js",
              "src/assets/vendors/jquery-one-page/jquery.nav.min.js",
              "src/assets/vendors/jquery.easing/jquery.easing.min.js",
              "src/assets/vendors/jquery.matchHeight/jquery.matchHeight.min.js",
              "src/assets/vendors/magnific-popup/jquery.magnific-popup.min.js",
              "src/assets/vendors/masonry-layout/masonry.pkgd.js",
              "src/assets/vendors/jquery.waypoints/jquery.waypoints.min.js",
              "src/assets/vendors/swiper/swiper.jquery.js",
              "src/assets/vendors/menu/menu.js",
              "src/assets/vendors/typed/typed.min.js",
              "src/assets/js/main.js"            
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "minimus-master:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "minimus-master:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "minimus-master:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "minimus-master-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "minimus-master:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "minimus-master:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "minimus-master"
}

Answer 1

You can add Javascript files to the global scope via the scripts option inside your project's build target options in angular.json. These will be loaded exactly as if you had added them in a <script> tag inside index.html.

<script src="path to your js file"></script>

or

You can specify the global scripts to be included in the build , In your angular project's angular.json file scripts array

(angular-cli.json file if your angular version is < 6.0).

{
  "scripts": [
    // path to your js file
  ]
}

Refer this article for more info.