我在Angular 2应用程序中使用LeafletJS库。本身是工作的罚款,因为我已经包含了类型定义(leaflet.d.ts),当然传单节点模块的库。
我试图导入一个插件叫做“单张库瓣叶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
),并使用在打字稿空间声明合并功能,以仍然使用插件作为L.CanvasIcon
使用typescript重写插件,以扩展中的现有接口namespace L
。
停止使用类型化的“传单”,只是导入写在ES5然后在角的是添加L-声明节点模块typings.d.ts
文件: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
。尝试回退到leaflet
version 0.7.x
。
"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
是将旧扩展加载到版本> = 1后的典型问题leaflet
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句