如何在 Angular 6 中使用外部 JS 文件

Question

我用 Angular 開始了一個項目，但我從沒想過安裝它的最新版本會給我帶來一些問題。 我也在使用 Materialize，所以當我嘗試“導入”它的 Javascript 文件時它不起作用。 我不知道為什么，我從上周五開始就一直在尋找答案，但一無所獲。

我已經更改了 angular.json 文件並在其中引用了我的 JS 位置，但這還不夠。

PD 我不能使用 CDN 來實現 JS。

Answer 1

angular 6 及更高版本的 CLI 項目使用angular.json而不是.angular-cli.json進行構建和項目配置。 這意味着您正在使用 Angular 6。
從 v6 開始，文件的位置已更改為angular.json 。 由於不再有前導點，默認情況下文件不再隱藏並且處於同一級別。 這也意味着 angular.json 中的文件路徑不應包含前導點和斜線，即您應該提供絕對路徑

從 npm 安裝 MaterializeCSS 和 angular2-materialize

 npm install materialize-css --save 
 npm install angular2-materialize --save 
 npm install jquery@^2.2.4 --save
 npm install hammerjs --save

安裝所有必需的依賴項后，將它們添加到angular.json樣式和腳本數組

"styles": [
             
      "src/styles.css",
      "node_modules/materialize-css/dist/css/materialize.css"
],
"scripts": [
      "node_modules/jquery/dist/jquery.js",
       "node_modules/hammerjs/hammer.js",
       "node_modules/materialize-css/dist/js/materialize.js"
 ]

對於 Angular 版本 11+

配置

angular.json 配置中的樣式和腳本選項現在允許直接引用包：

之前： "styles": ["../node_modules/bootstrap/dist/css/bootstrap.css"]
之后： "styles": ["bootstrap/dist/css/bootstrap.css"]

聚苯乙烯
Additonal Info ： Error import javascript library in typescript

Answer 2

我認為關鍵是：配置的正確位置。 我們有兩個地方可以粘貼腳本的路徑。 （角 CLI：6.1.5）

第一個是：（項目 => 你的應用程序名稱 => 架構師 => 構建）

"build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/<your app name>",
        "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": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]
      },
      "configurations": { ... }
    }

第二個是：（項目 => 你的應用程序名稱 => 架構師 => 測試） - 錯誤的地方

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

之后，您的瀏覽器上應該有類似的內容：

我希望它有所幫助;)

Answer 3

js 總是用“”寫在腳本標簽中。

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Vhls": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/Vhls",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/videogular2/fonts/videogular.css",
              "src/styles.scss"
            ],
            "scripts": [
              "src/assets/js/hls.min.js"
            ]
          },
          "configurations": {...............