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.

Answer 2

You would edit your angular-cli.json 's script section and add the file

"scripts": [
    "<path to your js file>",
]