我在 Angular 2 应用程序中使用 LeafletJS 库。库本身运行良好,因为我包含了类型定义 (leaflet.d.ts),当然还有传单节点模块。
我正在尝试为名为“leaflet-canvasicon”的传单库导入一个插件,但没有可用的类型定义,因为每当我尝试包含它时它都是用 ES5 编写的,编译器很满意,但我在控制台收到以下错误:
leaflet-src.js:314
Uncaught TypeError: this.callInitHooks is not a function
at Object.NewClass (http://localhost:2080/main.bundle.js:58716:8)
at http://localhost:2080/main.bundle.js:77650:180
at Object.<anonymous> (http://localhost:2080/main.bundle.js:77652:3)
at __webpack_require__ (http://localhost:2080/inline.js:53:30)
at Object.<anonymous> (http://localhost:2080/main.bundle.js:54476:18)
at __webpack_require__ (http://localhost:2080/inline.js:53:30)
at Object.<anonymous> (http://localhost:2080/main.bundle.js:54411:90)
at __webpack_require__ (http://localhost:2080/inline.js:53:30)
at Object.<anonymous> (http://localhost:2080/main.bundle.js:54600:70)
at __webpack_require__ (http://localhost:2080/inline.js:53:30)
我想了很多办法:
为插件创建一个新的类型定义 (
leaflet-canvasicon.d.ts
) 并使用 Typescript 中的命名空间声明合并功能,以便仍将插件用作L.CanvasIcon
使用 typescript 重写插件,扩展
namespace L
中的现有接口(interface)。停止使用类型化的“leaflet”,只导入用 ES5 编写的节点模块,然后在 Angular 的
typings.d.ts
文件中添加 L 声明:declare var L: any ;
但每次我都会遇到编译器问题。我想我做错了。我怎样才能包含插件,让编译器满意并能够将其用作 L.CanvasIcon
这是package.json
文件:
"dependencies": {
"@angular/common": "2.1.2",
"@angular/compiler": "2.1.2",
"@angular/compiler-cli": "2.1.2",
"@angular/core": "2.1.2",
"@angular/forms": "2.1.2",
"@angular/http": "2.1.2",
"@angular/platform-browser": "2.1.2",
"@angular/platform-browser-dynamic": "2.1.2",
"@angular/platform-server": "2.1.2",
"@angular/router": "3.1.2",
"@types/leaflet": "^1.0.36",
"core-js": "^2.4.1",
"leaflet": "^1.0.1",
"leaflet-canvasicon": "^0.1.6",
"leafletjs-canvas-overlay": "^1.0.1",
"rxjs": "5.0.0-rc.1",
"ts-helpers": "^1.1.2",
"zone.js": "^0.6.26"
},
"devDependencies": {
"angular-cli": "1.0.0-beta.19-3",
"ts-node": "1.6.1",
"tslint": "3.15.1",
"typescript": "2.0.6",
"typings": "^1.5.0"
}
}
最佳答案
这是与缺失类型无关的运行时错误。该问题与 leaflet
版本不匹配有关。
似乎 leaflet-canvasicon
是为旧版本的 leaflet
设计的。尝试使用版本 0.7.x
回退到 leaflet
。
"dependencies": {
"@angular/common": "2.1.2",
"@angular/compiler": "2.1.2",
"@angular/compiler-cli": "2.1.2",
"@angular/core": "2.1.2",
"@angular/forms": "2.1.2",
"@angular/http": "2.1.2",
"@angular/platform-browser": "2.1.2",
"@angular/platform-browser-dynamic": "2.1.2",
"@angular/platform-server": "2.1.2",
"@angular/router": "3.1.2",
"@types/leaflet": "0.7.x",
"core-js": "^2.4.1",
"leaflet": "0.7.x", // note the change
"leaflet-canvasicon": "^0.1.6",
"leafletjs-canvas-overlay": "^1.0.1",
"rxjs": "5.0.0-rc.1",
"ts-helpers": "^1.1.2",
"zone.js": "^0.6.26"
},
"devDependencies": {
"angular-cli": "1.0.0-beta.19-3",
"ts-node": "1.6.1",
"tslint": "3.15.1",
"typescript": "2.0.6",
"typings": "^1.5.0"
}
}
为了将来,您可以记住 this.callInitHooks is not a function
是 typical problem after loading old extensions to leaflet
version > =1
关于angular - 在 Angular 2 项目中导入和使用带有 Typescript 2 的无类型传单 JS 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40598594/