title: Can't import datamap library into HTML of a Angular 2 app
body: <p>I am building a small angular 2 app for learning purposes and I plan to use <a href="https://github.com/markmarkoh/datamaps" rel="nofollow">datamaps</a> for the map interface.</p>
  
  <p>But there is no directive for this lib yet, so I am trying to hotwire it myself.</p>
  
  <p>I've installed data maps </p>
  
  <blockquote>
    <p>npm install datamaps</p>
  </blockquote>
  
  <p>and I am using ng serve from angular-cli, but I can't make it work, I've tried importing it directly in the HTML ( just to see if it worked ) and it couldn't find the lib.</p>
  
  <p>I get this from direct HTML import, even with the file in the correct location it is not send to the browser</p>
  
  <pre><code>datamaps.world.hires.min.js:1 Uncaught SyntaxError: Unexpected token &lt;
  </code></pre>
  
  <p>I added it into my package.json and tried using it in my component, but also could not find it.</p>
  
  <p>like this in my package.json</p>
  
  <pre><code>"datamaps": "^0.5.8"
  </code></pre>
  
  <p>What should be done for my html to see it if I am using it like this:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;AskTheWorld&lt;/title&gt;
    &lt;base href="/"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
    &lt;script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"&gt;&lt;/script&gt;
    &lt;script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"&gt;&lt;/script&gt;
    &lt;script src="../node_modules/datamaps/dist/datamaps.world.hires.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-geochart-component&gt;Loading...&lt;/app-geochart-component&gt;
    &lt;div id="container" style="position: relative; width: 500px; height: 500px;"&gt;&lt;/div&gt;
    &lt;script&gt;
      var map = new Datamap({element: document.getElementById('container')});
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Also what is the best way to import it into my component? I've seen that datamaps does not have a typings declared or a module from what I could find (I am using TS 2)</p>
  
  <p>Here is my component so far</p>
  
  <p>import {Component, OnInit, ViewChild} from '@angular/core';
      import { Datamap } from '../../../node_modules/datamaps/dist/?????????????';</p>
  
  <pre><code>@Component({
    selector: 'app-geochart-component',
    templateUrl: './geochart-component.component.html',
    styleUrls: ['./geochart-component.component.css']
  })
  export class GeochartComponentComponent implements OnInit {
  
    @ViewChild('container') canvas;
  
    constructor() { }
  
    ngOnInit() {
      var map = new Datamap(this.canvas);
    }
  
  }
  
  }
  </code></pre>