The powerful combination of harp.gl and Angular NG

We've integrated harp.gl into our ng Angular application, but we're encountering issues when trying to connect to data sources that previously worked in our yarn demo.
The datasource is created as follows:

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 the MapView is created like this:

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

then the data source is added using the following code:

mapView.addDataSource(dataSource);

This results in the following messages being displayed on 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 the webpage's debug console shows:

: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've spent countless hours troubleshooting and am open to any assistance.

Answer №1

If you refer to this resource, it suggests adding an extra meta tag in the head section of your page.

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

Answer №2

Check out the new guide for getting started with Angular that was recently added here: https://github.com/heremaps/harp.gl/blob/master/docs/GettingStartedAngular.md

One important step towards the end is adding decoder.bundle.js to the asset section of the angular.json file:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing Microdata with React and Typescript: A Comprehensive Guide

Whenever I include itemscope itemtype="http://schema.org/Product" in h1, an error pops up: The type '{ children: string; itemscope: true; itemtype: string; }' is not compatible with the type 'DetailedHTMLProps<HTMLAttributes<HTMLH ...

Experimenting with a VSCode extension that requires the act of launching a folder/workspace

Currently, I am developing a custom VSCode extension that considers the path of the file being opened within the workspace. To create a reproducible test scenario, I want to open the test folder itself in VSCode and then proceed to open the test file with ...

Should you approach TypeScript modules or classes with a focus on unit testing?

When it comes to unit testing in TypeScript, which content architecture strategy is more effective: Creating modules or classes? Module Example: moduleX.method1(); // Exported method Class Example: var x = moduleX.method1(); // Public method ...

What is the process for injecting a template into the Kendo Upload's template?

Apologies if this question has already been addressed, but I am struggling to grasp the concept or find the answer. I am diving into templating in Angular (2/4) and seeking some assistance. I have developed a component that utilizes the kendo upload compo ...

Adjusting table to include hashed passwords for migration

How can I convert a string password into a hash during migration? I've tried using the following code, but it seems the transaction completes after the selection: const users = await queryRunner.query('SELECT * FROM app_user;'); user ...

What is the best way to invoke a function that is declared within a React component in a TypeScript class?

export class abc extends React.Component<IProps, IState> { function(name: string) { console.log("I hope to invoke this function"+ name); } render() { return ( <div>Hello</div> ); } } Next, can I cal ...

Error message encountered during angular project build using ng build: angular.json file missing

I had successfully created a project on my laptop a month ago and didn't encounter any errors. However, when I cloned the repository to a new computer today, I encountered some issues. After running 'npm i' to install packages, I attempted t ...

Angular 4 incorporating a customized Bootstrap 4 accordion menu for seamless navigation

I am trying to implement a nested menu using a JSON object in Angular 4. Below is the code I have written. <div id="panel-group"> <div class="panel panel-default" *ngFor="let mainItem of objectKeys(my_menu); let i = index"> <div class ...

How can I display an agm-polyline within a map in Angular 7?

I need assistance with adjusting the polylines on my map and dynamically setting the zoom level based on their size and position. Here is the code I am currently using: <agm-map style="height: 500px" [latitude]='selectedLatitude' [longitude ...

Struggling to effectively organize data routing within Angular? Let's tackle the challenges of

As a newcomer to Angular, I initially had success with CRUD operations without using routing. However, after implementing routing, I encountered an issue where the added values were not displaying in the content table on another page. It seems like there ...

Unable to find a matching router for the Angular component

In my project, I am tasked with creating a specific path structure: "myapp/category/subcategory". The "myapp/" part is fixed, while the category is represented by the variable "cat.title" and subcategory by "sub.title". To achieve this, I have JSON data ...

activate the change detection for a specific subcomponent

Let's say I am conducting a test on MyComponent, which has a template that includes SubComponent The structure of MyComponent is as follows @Component({ selector: 'my-component', template: ` <sub-component [input]="property"> ...

What is the most effective strategy for handling JSON responses in Angular's Front End when subscribing to them using a forkJoin?

After researching various solutions for handling JSON mapping issues in the front end, I still haven't found a satisfactory answer. Despite trying different approaches, such as working with Root-object and nested interfaces, I'm struggling to map ...

Issue encountered with Ionic and ssh2: process.binding is not supported

I am currently delving into the world of Ionic and experimenting with creating a basic application that utilizes SSH2 to establish an ssh connection between the app and a server. Here is a breakdown of the steps I took to encounter the issue: Steps to Rep ...

Tips for synchronizing the value of one field in a reactive form with changes in another field

I have a reactive form below where I'm using a form builder with groups. Fig: https://i.sstatic.net/gdc7p.png Here is the HTML code of the component <div class=""> <form [formGroup]="FeedBack" (ngSubmit)="on ...

I'm curious about the equivalent of "ng serve" for nodejs. Do other languages have similar tools available?

ng serve has revolutionized my workflow. With a simple save, I can instantly see the changes in my Angular code reflected in the running instance of my project, allowing me to quickly iterate on my work. But why doesn't a similar tool exist for other ...

Google+ login is functional on browsers but not on smartphones when using Ionic 2

Successfully logged in using Google+ on my app. It works fine when checked on Chrome/Explorer, but on my smartphone or Android emulator, after pressing "login with Google+", it shows a successful login message but stays on the same login page without progr ...

Customizing themes in Angular 4

My app allows users to select 4 colors: Brand Accent Contrast Accent Light These color choices are saved in the user's account, and I retrieve and store this data upon login. I am looking for a way to apply these color choices as a global theme ...

Type guard does not narrow down the union type

Explore the following code snippet: type UnionType = 'foo' | 'bar' | 'baz' const obj = { foo: 'huh', bar: 'hmm' } function func(input: UnionType) { if(input in obj) { input } } In ...

Issue: XHR failure (404 Not Found) while attempting to load angular2/http

I'm currently utilizing angular-cli for my Angular2 application. Whenever I attempt to load angular2/http in my Components/Services, no errors are displayed in the cli terminal. However, the browser's console shows the following message - GET ...