title: Add third party JavaScript file to Angular 4
body: <p>i am currently trying to read myself into Angular 4. For a project i need to display a map using "HERE Maps" within an Angular App.
  But i can't figure out how to import the script while maintaining access to the classes within a component.</p>
  
  <p>I am trying to follow the instructions from HERE:
  <a href="https://developer.here.com/documentation/maps/topics/quick-start.html" rel="nofollow noreferrer">https://developer.here.com/documentation/maps/topics/quick-start.html</a></p>
  
  <p>I tried adding the .js script to the index.html like this:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;See720&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="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
    &lt;script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      var platform = new H.service.Platform({
        'app_id': '****',
        'app_code': '****',
        useCIT: true
      });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I tried to somehow inject the .js file into a component or a service in order to use the classes contained in the .js file. Yet i could not get it to work.</p>
  
  <p>I expected to put this part:</p>
  
  <pre><code>var platform = new H.service.Platform({
      'app_id': '****',
      'app_code': '****',
      useCIT: true
  });
  </code></pre>
  
  <p>... into an OnInit() method somehow. But the "H" object never gets recognized. Using plane old JavaScript and Html i can get this to work though.</p>
  
  <p>What is the correct way to import such a JavaScript file in Angular 4 and how do i access its classes and methods?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>My code currently looks like this:
  Template:</p>
  
  <pre><code>&lt;div style="text-align:center"&gt;
    &lt;!--&lt;div&gt;&lt;font color="white"&gt;This is some text!&lt;/font&gt;&lt;/div&gt;--&gt;
    &lt;div id="mapContainer" style="width: 900px; height: 600px"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>import {AfterViewInit, Component} from '@angular/core';
  
  declare var H: any;
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements AfterViewInit {
    title = 'C720';
  
    ngAfterViewInit() {
      // Initialize the platform object:
      let platform = new H.service.Platform({
        'app_id': '****',
        'app_code': '****',
        useCIT: true
      });
  
      // Obtain the default map types from the platform object
      let defaultLayers = platform.createDefaultLayers();
  
      // Instantiate (and display) a map object:
      let map = new H.Map(
        document.getElementById('mapContainer'),
        defaultLayers.normal.map,
        {
          zoom: 5,
          center: { lat: 52.5, lng: 13.5 }
        }
      );
    }
  }
  </code></pre>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;See720&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="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
    &lt;script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
    &lt;script src="http://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The map is displaying, but now i need to add an eventlistener and but the H.mapevent class from the third package ("mapjs-mapevents.js") is not recognized.</p>
  
  <p>How can i tell Angular to look within the third script for other classes?</p>