Angular 4：如何包含外部js庫？

Question

我知道有一些這樣的話題，但我找不到解決問題的方法。

我試圖包含這個庫： https ： //github.com/euoia/hex-grid.js#new_module_hex-grid--HexGrid_new不幸的是我不能。

我將解壓縮的項目放入src / js文件夾中。 在scripts標簽內的angular-cli.json中，我把url放到了hex-grid.js：“scripts”：[“js / hex-grid.js-master / src / hex-grid.js”]。 路線很好，因為應用程序是成功編譯的。 我有一個game-map.component.ts文件，我想使用這個lib。

import {Component} from '@angular/core';

declare var hexGrid: any;

@Component({
  selector: 'app-game-map',
  templateUrl: './game-map.component.html',
  styleUrls: ['./game-map.component.css']
})
export class GameMapComponent {

hex: any;

constructor() {
  this.hex = new hexGrid({
    width: 20,
    height: 10,
    orientation: 'flat-topped',
    layout: 'odd-q'
  });
  }
}

但我得到了這個錯誤：未捕獲的ReferenceError：模塊未在scripts.bundle.js：2中定義

這個模塊有問題：module.exports =（function（）{/ **

有人可以在這個問題上幫助我嗎？ 謝謝！

Answer 1

npm install hex-grid.js在cmd中npm install hex-grid.js

2. import * as hexGrid from 'hex-grid.js'

然后使用它

Answer 2

要使用這種技術，您必須將someJsFile.js放在公共文件夾中，以便gwt編譯器將其復制到放置html和js內容的最終文件夾中。

如果您正在使用maven，則必須檢查資源插件是否正在將此文件復制到war以及路徑中。

順便說一句，還有其他技術可以在您的文檔中插入外部JavaScript：

將腳本標記放在.html文件中。 使用ScriptInjector.fromUrl（）。 更好的方法是使用TextResource和ScriptInjector.fromString（），以便編譯器讀取javascript文件並將內容包含在最終編譯文件中。 您可以使用gwtquery Ajax.getScript通過ajax獲取腳本並將其注入dom中。 最近添加到gwtquery的一種新方法允許您將javascript包含為JSNI塊，以便編譯器可以對其進行優化和混淆。