如何将外部JS文件包含到angular5中? [英] How to include external JS file to angular5?

问题描述

我不熟悉angular，并开始从教程中学习angular5.

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

现在我正在将普通的HTML模板转换为Angular 5版本，在将外部JS文件添加到angular 5 项目时遇到了困难.

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

有人可以帮助我将外部js文件添加到angular5项目吗?

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

这是我更新的angular.json文件.仍然不能为我工作.

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

推荐答案

您可以通过scripts将Javascript文件添加到全局范围 angular.json中项目的构建目标选项中的option选项. 这些文件将被完全加载，就像您已将它们添加到<script>中一样 标记在index.html中.

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>

或

您可以指定要包含在构建中的全局脚本，它可以在您的角度项目的 angular.json文件脚本数组中

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

(如果您的角度版本为< 6.0，则为angular-cli.json文件).

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

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

有关更多信息，请参考这篇文章.

Refer this article for more info.

这篇关于如何将外部JS文件包含到angular5中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！