Add third party JavaScript file to Angular 4

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

I am trying to follow the instructions from HERE: .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=".0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
  <script src=".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 ponent 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: './appponent.html',
  styleUrls: ['./appponent.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=".0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
  <script src=".0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
  <script src=".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?

I am trying to follow the instructions from HERE: https://developer.here./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./v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://js.api.here./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 ponent 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.ponent.html',
  styleUrls: ['./app.ponent.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./v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://js.api.here./v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://js.api.here./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?

Share Improve this question edited Oct 11, 2017 at 8:33 asked Oct 10, 2017 at 13:55 jns_ai_unr 9231 gold badge9 silver badges20 bronze badges

1 It has already been answered -> stackoverflow./questions/37081943/… – mutantkeyboard Commented Oct 10, 2017 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 Commented Oct 11, 2017 at 8:29
If you're using the Angular CLI, use the scripts: stackoverflow./questions/38855891/… – t3__rry Commented Oct 11, 2017 at 8:45

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

You can add js in particular ponent like

ngOnInit(){
  var scriptUrl = 'http://js.api.here./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);
}

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

I also needed to add:

declare var test: any;

to my ponent.

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./v3/3.0/mapsjs-ui.css" />
  <script src="http://js.api.here./v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://js.api.here./v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://js.api.here./v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://js.api.here./v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://js.api.here./v3/3.0/mapsjs-pano.js" type="text/javascript" charset="utf-8"></script>

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

app.ponent.ts

import {AfterViewInit, Component} from '@angular/core';

declare var H: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.ponent.html',
  styleUrls: ['./app.ponent.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);
  }
}

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 ponent 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./package/angular-heremaps

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Add third party JavaScript file to Angular 4 - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)