Import and use untyped leaflet JS plugin with Typescript 2 in Angular 2 project
<p>I'm using LeafletJS library in Angular 2 application. The library itself is working fine since I've included the type definition (leaflet.d.ts) and of course the leaflet node module.</p>

<p>I'm trying to import a plugin for the leaflet library called "<a href="https://github.com/sashakavun/leaflet-canvasicon" rel="nofollow noreferrer">leaflet-canvasicon</a>" and there is no available type definition for it and since it's written in ES5 whenever I try to include it, the compiler is satisfied, yet I recieve the following error at the console:</p>

<pre><code>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.&lt;anonymous&gt; (http://localhost:2080/main.bundle.js:77652:3)
    at __webpack_require__ (http://localhost:2080/inline.js:53:30)
    at Object.&lt;anonymous&gt; (http://localhost:2080/main.bundle.js:54476:18)
    at __webpack_require__ (http://localhost:2080/inline.js:53:30)
    at Object.&lt;anonymous&gt; (http://localhost:2080/main.bundle.js:54411:90)
    at __webpack_require__ (http://localhost:2080/inline.js:53:30)
    at Object.&lt;anonymous&gt; (http://localhost:2080/main.bundle.js:54600:70)
    at __webpack_require__ (http://localhost:2080/inline.js:53:30)
</code></pre>

<p><strong>I thought of many solutions</strong>:</p>

<ul>
<li><p>Make a new type definition for the plugin (<code>leaflet-canvasicon.d.ts</code>) and use the namespace declaration merging feature in Typescript in order to still use the plugin as <code>L.CanvasIcon</code></p></li>
<li><p>Rewrite the plugin using typescript extending the existing interfaces in <code>namespace L</code>.</p></li>
<li><p>Stop using the typed 'leaflet' and just import the node module written in ES5 then add L declaration in angular's <code>typings.d.ts</code> file:  <code>declare var L: any;</code></p></li>
</ul>

<p><strong>But every time I face compiler issues. I think I'm doing it wrong. How can I include the plugin, keep the compiler satisfied and be able to use it as <code>L.CanvasIcon</code></strong>   </p>

<p>Here is <code>package.json</code> file:</p>

<pre><code> "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"
      }
    }
</code></pre>