Question

我知道有一些主题，但我没有找到解决问题的方法。

我试图将这个lib包括在内：https://github.com/euoia/hex-grid.js#new_module_hex-grid--HexGrid_new不幸的是我不能。

我将解压缩的项目放入src / js文件夹中。在scripts标签内的angular-cli.json中，我把url放到了hex-grid.js：＆＃34;脚本＆＃34;：[＆＃34; js / hex-grid.js-master / src / hex-grid.js＆＃34;]。路线很好，因为应用程序是成功编译的。我有一个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

1.在cmd中安装npm install hex-grid.js

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

3.然后使用它

Answer 2

要使用此技术，您必须将someJsFile.js放在公共文件夹中，以便gwt编译器将其复制到放置html和js内容的最终文件夹中。

如果您正在使用maven，则必须检查资源插件是否正在将此文件复制到战争中以及路径中。

顺便说一句，还有其他技术可以在您的文档中插入外部JavaScript：

将脚本标记放在.html文件中。使用ScriptInjector.fromUrl（）。更好的方法是使用TextResource和ScriptInjector.fromString（），以便编译器读取javascript文件并将内容包含在最终编译文件中。您可以使用gwtquery Ajax.getScript通过ajax获取脚本并将其注入dom中。最近添加到gwtquery的一种新方法允许您将javascript包含为JSNI块，以便编译器可以对其进行优化和混淆。

Answer 3

您应该使用as

导入

试试这个

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

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

3 个答案: