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

angularjs and angular are two very different things

baao
– baao

2018-07-06 07:58:00 +00:00
Commented Jul 6, 2018 at 7:58 — baao
– baao, Commented Jul 6, 2018 at 7:58

Anuradha Gunasekara · Accepted Answer · 2018-07-06 08:18:34Z

4

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.

edited Jul 6, 2018 at 8:18

answered Jul 6, 2018 at 7:59

Anuradha Gunasekara

7,0132 gold badges29 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Ronak Chauhan Over a year ago

I updated my angular.json file still not working for me.

Ronak Chauhan Over a year ago

it's working for me but showing "jquery.easing.min.js:1 Uncaught ReferenceError: jQuery is not defined"

Anuradha Gunasekara Over a year ago

how are you loading the js file ? have you already download the js file ?

Ronak Chauhan Over a year ago

yes I already downloaded files and added in /src/assets folder. you can see my updated angular.json file above

Anuradha Gunasekara Over a year ago

Your path should be chnaged like this. "./assets/vendors/imagesloaded/imagesloaded.pkgd.js",

|

baao · Accepted Answer · 2018-07-06 08:00:04Z

0

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

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

answered Jul 6, 2018 at 8:00

baao

73.6k18 gold badges152 silver badges209 bronze badges

Collectives™ on Stack Overflow

How to include external JS file to angular5?

2 Answers 2

12 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related