我想在我的角度2项目中使用d3-tip。我使用的是angular-cli
在polyfills.ts中我补充说:
import "d3";
import "d3-tip";
在组件中我试过:
import * as d3 from "d3";
...
private tip = d3.tip().attr('class', 'd3-tip')
但我有一个错误:
__WEBPACK_IMPORTED_MODULE_2_d3__.tip is not a function
我正在安装@ types / d3和@ types / d3-tip。没有d3-tip一切正常。
我无法理解为什么@ types / d3-tip无法正常工作。
构建错误:
Property 'tip' does not exist on type 'typeof "/node_modules/@types/d3/index"'.
答案 0 :(得分:1)
我不熟悉d3,但我遇到了与firebase相同的问题。
问题始于firebase.js文件没有声明它的命名空间变量firebase
(或者你的情况下d3
全局var)作为一个包含方法的对象,而只是说var firebase=null;
,然后继续在浏览器导入和执行文件时发生的几个内部函数调用中构建它的内容。
当它通过angular-cli构建时,它会转换为不同的结构,您可以在错误消息__WEBPACK_IMPORTED_MODULE_2_d3__.tip ....
中看到这些结构,并且因为构建过程不执行.js首先是文件,只需要它能够看到的内容,如果我是对的,那么var firebase=null;
和var d3=null;
就是{。
这是问题的原因。可悲的是,我没有简单的解决方案,在我的情况下,我能够解决它,因为firebase API是通过调用initializeApp()
来初始化的,firebase.anything
是全局的并且在firebase.stuff
空间之外并且它返回一个对象它提供了使用库所需的几乎所有内容,因此我可以通过此对象执行操作,并完全避免调用var d3 = {
tip: function();
.....
}
。
可能为你工作的一种方式,但在未来的维护方面相当困难,是找到在.js文件中声明d3变量的位置并修改声明,以便它是一个对象,包含您要使用的方法和属性的名称,例如
d3
除了那里的结构之外,它不需要任何东西,比如.d.ts文件 - 只是这样,webpack构建器会发现这不是一个空变量,而是一个对象。如上所述,将它链接到.d.ts并找出对象的结构是不够智能的 - 它只需要在.js文件中声明它所看到的内容。
这可能需要您手动添加对库执行的任何代码的调用,以初始化ngOnInit()
var,最好是在某些组件的pause
方法中,但它可能也可以在没有它的情况下工作