在Angular 2项目中使用Typescript 2导入和使用无类型的传单JS插件

艾哈迈德·哈希姆

我在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尝试回退到leafletversion 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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Angular项目中使用带有TypeScript,接口和依赖项注入的多态

在Angular 6和.net core 2项目中使用ngx-toastr

在我的angular 2项目中使用外部JS库

如何在angular 2项目中使用“ regression-js”

在angular2项目中使用jspdf导出动态生成的div的问题

如何在基于服务的Angular2项目中使用依赖注入

在Angular2项目中更新Typescript

在TypeScript + Angular项目中使用requirejs(-m amd)的利弊

如何在Spring Boot + Angular 2项目中使用Gradle构建将静态文件添加到jar

如何捆绑一组 Typescript 类并在其他 angular2/typescript 项目中使用它?

如何在 angular 2 项目中使用脚本标签

在非Angular项目中使用Angular

在使用cli生成的Angular2项目中导入d3的本地文件

无法在angular 2项目中使用带有时间插件的datetime对出生日期进行排序

使用Angular2项目中的AngularJS(Angular1)模块

如何在angular 5项目中使用lodash函数?

在angular 6项目中使用jquery库是否很好?

Angular6项目中如何在createJS中使用sortChildren?

如何在angular 6项目中使用自定义jquery代码?

在Angular 9项目中使用不带JQuery的Bootstrap 4

如何在Angular 9项目中使用Amplify-Authenticator修复生产版本?

在Rails项目中使用最少的Angular

找出在 Angular 项目中使用的更改事件的 Typescript 类型

angular2项目中的类型是什么?

在Xcode 5项目中使用Core Plot 2

在Ionic 2项目中使用哪个View lifeCycle

在Qt 5项目中使用Nite 2

如何在使用bootstrap-loader的Angular 2项目中覆盖bootstrap sass变量?

HTML5必需的属性在使用CLI安装的Angular 2项目中不起作用