Add third party JavaScript file to Angular 4

Question

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.

I am trying to follow the instructions from HERE: https://developer.here.com/documentation/maps/topics/quick-start.html

I tried adding the .js script to the index.html like this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>See720</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <script src="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    var platform = new H.service.Platform({
      'app_id': '****',
      'app_code': '****',
      useCIT: true
    });
  </script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

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.

I expected to put this part:

var platform = new H.service.Platform({
    'app_id': '****',
    'app_code': '****',
    useCIT: true
});

... 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.

What is the correct way to import such a JavaScript file in Angular 4 and how do i access its classes and methods?

UPDATE

My code currently looks like this: Template:

<div style="text-align:center">
  <!--<div><font color="white">This is some text!</font></div>-->
  <div id="mapContainer" style="width: 900px; height: 600px"></div>
</div>

Component:

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 }
      }
    );
  }
}

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>See720</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <script src="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

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.

How can i tell Angular to look within the third script for other classes?

It has already been answered -> https://stackoverflow.com/questions/37081943/angular2-import-external-js-file-into-component — mutantkeyboard, Oct 10 '17 at 13:59
Thank you for that link @mutantkeyboard . I updated my Question above. How do i access classes on the same object from another script? — jns_ai_unr, Oct 11 '17 at 08:29
If you're using the Angular CLI, use the `scripts`: https://stackoverflow.com/questions/38855891/angular-cli-webpack-how-to-add-or-bundle-external-js-files#answer-39661714 — t3__rry, Oct 11 '17 at 08:45

score 2 · Answer 1 · answered Oct 11 '17 at 11:12

2

You can add js in particular component like

ngOnInit(){
  var scriptUrl = 'http://js.api.here.com/v3/3.0/mapsjs-core.js';
  let node = document.createElement('script');
  node.src = scriptUrl;
  node.type = 'text/javascript';
  node.async = true;
  node.charset = 'utf-8';
  document.getElementsByTagName('head')[0].appendChild(node);
}

answered Oct 11 '17 at 11:12

Punith

191
1
5

can you exploian what node ,node.src,node.type,node.aysnce.node.charset is. – Jul 23 '22 at 09:29

score 2 · Answer 2 · answered Oct 11 '17 at 13:12

Ill answer my own question:

Adding the script hyperlinks to the index.html was the right approach. I was missing a TypeDefinition translating the Javascript Code to TypeScript.

https://www.npmjs.com/package/@types/heremaps

The link above shows where to get those. It can be installed via:

npm install --save @types/heremaps

The according files are installed into "node-modules/@types/..." As described in an answer to the following question:

Angular2: import external js file into component

I also needed to add:

declare var test: any;

to my component.

I am now able to access all the functions of all five external scripts. And my project looks kind of like this:

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>See720</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link rel="stylesheet" href="http://js.api.here.com/v3/3.0/mapsjs-ui.css" />
  <script src="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://js.api.here.com/v3/3.0/mapsjs-pano.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>
  <app-root></app-root>
</body>
</html>

app.component.ts

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
    });

    document.body.style.backgroundColor = 'black';

    // 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 }
      }
    );
    // document.getElementById('whiteSpace').style.backgroundColor = 'white';
    // Enable the event system on the map instance:
    var mapEvents = new H.mapevents.MapEvents(map);
    var ui = H.ui.UI.createDefault(map, defaultLayers);

    // Add event listeners:
    map.addEventListener('tap', function(evt) {
      // Log 'tap' and 'mouse' events:
      console.log(evt.type, evt.currentPointer.type);
    });

    // Instantiate the default behavior, providing the mapEvents object:
    var behavior = new H.mapevents.Behavior(mapEvents);
  }
}

score 0 · Answer 3 · answered Oct 11 '17 at 08:46

0

the easiest way to import js file is to add it to an angular cli project (add it to scripts in .angular-cli-package.json), then simply : 1 - Add it to your main app module, as root(), with the right user + keys 2 - "import HereMap from 'heremaps' in the component not only 'declare var H: any;" as it does not indicate the lib path. You can do both in some cases, but with angular 4 I use import.

https://www.npmjs.com/package/angular-heremaps

answered Oct 11 '17 at 08:46

andrea06590

1,259
3
10
22

Thank you for your answer. How do i achieve step 1.? Could you show me an example? I am fairly new to Angular and do not seem to understand all the core concepts. – jns_ai_unr Oct 11 '17 at 08:59
The link you provided links to a npm package for angularjs. As far as i know its not possible to use angularjs code with angular 2/4. – jns_ai_unr Oct 11 '17 at 10:00
It is possible of course, either js or angular js package, if you want to use it with typescript, then you can get the types. To achieve step 1 first get the package that seems to match your needs. – andrea06590 Oct 11 '17 at 12:46
Sorry I pressed enter all the time, so here is the full answer : - If you are in an angular cli project add your css and js to apps in .angular-cli : [ scripts : [heremap.js, ...] and styles : [heremaps.css, ...] If not, add it to your main index.html file - If you can get the types do it as typescript is easier to write and read : https://www.npmjs.com/package/@types/heremaps - Then simply go in your component and "import * as HereMap from 'heremaps' " where heremaps is the declared name in the index.d.ts you just installed (npm install --save @types/heremaps) – andrea06590 Oct 11 '17 at 12:53
I got it to work. You can see my code below. Yet i dont think its an elegant way. If i use "import * as HereMap from '@types/heremaps'" instead of "declare var H: any;" doesnt work though. Do you have any idea why? Where would i need to put the the scripts if i downloaded them? Do they go into the assets folder? Thank you for your help. – jns_ai_unr Oct 11 '17 at 13:21
I didn't wanted to say that, but I said you can do both 'declare H from 'heremaps' and import * as H from 'heremaps'; If you downloaded them, simply add it to your index.html inside a script and style tag and it should do the same as angular-cli. Check this : https://hackernoon.com/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af This tuto is very good but only show how to do it using angular-cli If you still have problems let me know ;) – andrea06590 Oct 11 '17 at 13:37

Add third party JavaScript file to Angular 4

3 Answers3