如何在Angular 5（CLI）項目中導入和使用純JavaScript文件的功能

Question

我已經搜索了很多東西，並嘗試了數小時的各種解決方案，但是似乎無法解決這個問題：我試圖將純JavaScript文件與Angular CLI創建的Angular 5項目結合使用。

我嘗試了各種import方法，還嘗試了"allowJs": true ，我嘗試了exports和其他一些東西。 無濟於事！

請幫助我：如何在Angular 5項目中導入和使用.js文件的功能？ 您能一步一步地列出要做什么。

請注意：這不是我可以通過npm或類似工具安裝的軟件包。 它是一個外部庫，無法通過npm獲得。

更新：我已經嘗試在index.html聲明我的Xcelcious.Common.js文件，因為通常可以做到<script type="text/javascript" src="Xcelcious.Common.js"></script> ，使用import嘗試使用功能：

import { Xcelcious } from '../../Xcelcious.Common.js';

declare let Xcelcious: any;

但是在編譯項目時出現以下錯誤： src / app / home / home.component.ts（4,27）中的錯誤：錯誤TS6143：模塊'../../Xcelcious.Common.js'已解決到'C：/Apps/CordovaApps/BoilerplateApp2/ngCordova/src/Xcelcious.Common.js'， 但未設置'--allowJs'。

我在tsconfig.jason中設置了“ allowJs”：true，但是在編譯時出現此錯誤：錯誤TS5055中的錯誤：無法寫入文件'C：/Apps/CordovaApps/BoilerplateApp2/ngCordova/src/Xcelcious.Common.js'因為它會覆蓋輸入文件。 添加tsconfig.json文件將有助於組織同時包含TypeScript和JavaScript文件的項目。

這是我的tsconfig.json的樣子：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "allowJs":true,
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

這是我的Xcelcious.Common.js文件的示例：

Xcelcious = {
  ApiURL: "http://localhost:100/api",
  IsMobile: false,
  SimulateMobile: true,
  Camera: {
    PhotoFromLibrary: function (success, fail) {
      if (Xcelcious.IsMobile || Xcelcious.SimulateMobile) {
        navigator.camera.getPicture(success, fail, {
          quality: 100,
          destinationType: Camera.DestinationType.DATA_URL,
          //targetWidth: 1024,
          //targetHeight: 768,
          correctOrientation: true,
          allowEdit: false,
          sourceType: Camera.PictureSourceType.PHOTOLIBRARY
        });
      } else {
        //TODO: Add camera for browser
      }
    },
    PhotoFromCamera: function (success, fail) {
      if (Xcelcious.IsMobile || Xcelcious.SimulateMobile) {
        navigator.camera.getPicture(success, fail, {
          quality: 100,
          destinationType: Camera.DestinationType.DATA_URL,
          //targetWidth: 1024,
          //targetHeight: 768,
          correctOrientation: true,
          allowEdit: false,
          sourceType: Camera.PictureSourceType.CAMERA
        });
      } else {
        //TODO: Add camera for browser
      }
    }
 }

感謝幫助！

Answer 1

我不確定您使用的是webpack還是systemjs。

確保將.js文件鏈接注入到主index.html頁中，就像通常將js文件庫添加到index.html頁中一樣。

要使用js文件中的函數，請執行以下操作，我將以jQuery為例。

要使用jQuery中的$ ，您需要添加

import { ... } from '...';

declare let $: any;

@Component({ ... })
export class MyClass { ... }

declare let $: any; 在頂部，您可以在該組件內使用$ 。 這也將避免任何tslint錯誤。

可以與其他庫一起使用，例如momentjs等。

編輯：

因此，您正在使用Webpack。

在index.html添加以下內容：

<script src="./path to js/Xcelcious.Common.js"></script>

在組件內部，您不需要import { Xcelcious } from '../../Xcelcious.Common.js'; 。

進行declare let Xcelcious: any; 應該允許您訪問Xcelcious方法，例如Excelcious.IsMobile 。

Answer 2

我的解決方案非常簡單（后視！）。 @Wesley Coetzee在回答中幾乎說了什么，但必須在.angular-cli.jason添加對我的scripts array .angular-cli.jason 。

因此，為了使它正常工作 ，我需要做的所有事情 （我的自定義JavaScript文件稱為test.js ）：

1. 在我的index.html我必須引用我的腳本<script src="app/test.js">
2. 在我的.angular-cli.json我必須引用我的腳本"scripts": ["app/test.js"],
3. 在我希望使用test.js腳本功能的component ，我必須添加declare let test: any; test.js （直接在我的imports ）
4. 然后，我可以通過調用test.alert();使用該功能test.alert();

注意：就我而言，我有一個簡單的JavaScript object作為腳本中的功能。 例：

test = {
  alert: function () {
    alert('Alert!');
  },
  newAlert: function () {
    alert('New Alert!');
  }
};

為了使這種方法可行，我必須顯式declare test （第3點）作為我的變量（ let ）來訪問.js文件中的代碼，因為這是我的JavaScript object的名稱。

Answer 3

在您的組件中，您可以簡單地導入純js文件並聲明外部對象：

import 'external.js'
declare var myExtObject: any;