harp.gl and angular ng

Question

We are using harp.gl in an ng angular application, but are having trouble connecting to data sources in the same way that worked in our yarn demo.
We create the datasource as:

const dataSource = new OmvDataSource({
  baseUrl: "https://vector.hereapi.com/v2/vectortiles/base/mc",
  apiFormat: APIFormat.XYZOMV,
  styleSetName: "tilezen",
  authenticationCode: apikey,
  authenticationMethod: {
        method: AuthenticationMethod.QueryString,
        name: "apikey"
  }
});

and create a MapView as:

const mapView = new MapView({
    canvas: mapCanvas,
    theme: "assets/resources/berlin_tilezen_base.json",
    // note, this URL may vary depending on configuration of webpack
    // for this example, it is assumed that app is server from project root
    decoderUrl: "harp-gl-decoders.bundle.js"
    // note, this URL may vary depending on configuration of webpack
    // for this example, it is assumed that webpack emits bundles to project root
});

and add the data source thus:

mapView.addDataSource(dataSource);

and see this at the console:

[WDS] App updated. Reloading...  
Angular is running in the development mode. Call enableProdMode() to enable the production mode.  
MapView: Failed to connect to datasource anonymous-datasource#1: Error during worker initialization  
[WDS] Live Reloading enabled.

and this at the debug console of the webpage:

:4200/decoder.bundle.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)  
ConsoleChannel.js:15 MapView: Failed to connect to datasource anonymous-datasource#1: Error during worker initialization

I have spent many hours grasping at straws and would accept any help.

score 0 · Answer 1 · answered Jun 25 '20 at 19:55

0

As seen here, you may need an additional meta tag in your page head

<head>
    <meta http-equiv="Content-Security-Policy" content="child-src blob:">
</head>

answered Jun 25 '20 at 19:55

Nigel G

51
2

score 0 · Answer 2 · answered Aug 18 '20 at 20:37

Recently a getting started guide for Angular was added here: https://github.com/heremaps/harp.gl/blob/master/docs/GettingStartedAngular.md

Almost at the end it adds the decoder.bundle.js to the asset section of the angular.json:

        "assets": [
          "src/favicon.ico",
          "src/assets",
          {
            "glob": "decoder.bundle.js",
            "input": "./",
            "output": "./"
          }
        ],

harp.gl and angular ng

2 Answers2