Question

我在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
使用扩展namespace L中现有接口的typescript重写插件。
停止使用键入的“传单”，然后导入用ES5编写的节点模块，然后在角度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"
      }
    }

Answer 1

这是与缺少的打字无关的运行时错误。该问题与leaflet-canvasicon版本不匹配有关。

似乎leaflet专为旧版leaflet而设计。尝试使用版本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

对于将来，您可以记住，在将旧版扩展程序加载到leaflet版本＆gt; = 1后，#! /bin/bash git log -1 if git log -1 === "pre-defined message"; then echo "already pushed and bumped exiting" exit 1 else echo "not bumped -- continuing job" ./setup-git.sh fi 典型问题

Answer 2

如果您需要在打字稿中使用传单插件，请在传单之后导入此文件。

    binding.CloseTimeout = TimeSpan.FromSeconds(_timeout);
    binding.OpenTimeout = TimeSpan.FromSeconds(_timeout);
    binding.SendTimeout = TimeSpan.FromSeconds(_timeout);
    binding.ReceiveTimeout = TimeSpan.FromSeconds(_timeout);

如果您愿意，可以明确说明类型。

在Angular 2项目

2 个答案: