question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Map not displaying in Ionic-Angular-Electron and Ionic-React-Electron apps when run on desktop

See original GitHub issue

I am reporting an issue with

  • TypeScript definitions
  • another resource in this repository

I’m trying to create an Ionic-Angular application with a map on its main page, using ArcGIS ES Modules. I’ve used the code from https://github.com/Esri/jsapi-resources/blob/master/esm-samples/jsapi-angular-cli/src/app/app.component.ts to display the map.

This works OK when I build and run the app in Android. When I try to build and run a desktop app using Electron, though, the code errors here:

if (t = h.url, "image" === (s = h.requestOptions).responseType) { if (Object(_core_has_js__WEBPACK_IMPORTED_MODULE_1__["default"])("host-webworker") || Object(_core_has_js__WEBPACK_IMPORTED_MODULE_1__["default"])("host-node")) throw M("request:invalid-parameters", new Error("responseType 'image' is not supported in Web Workers or Node environment"), h)

When the basemap is set to some kind of vector map, a map does appear, but other maps just leave an empty area where the map should be. Here’s what I see in the console of the app window: image

The code to get the map is in the only layer I know that will result in it showing up in the app UI, but it seems that somehow when trying to run it in an Electron window it’s running in an unsupported environment.

I was told by @andygup that this is a problem between Angular and Chrome. However, the problem is occurring in both an Ionic-Angular project and an Ionic-React project. The former is here: https://github.com/brentgti/IonicUiEsriPoc, with the code for the map in /blob/main/src/app/home/home.page.ts. The latter is here: https://github.com/brentgti/ionicReactTest, with the code for the map here: /blob/main/src/components/Map.tsx.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:9 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
brentgticommented, Jan 25, 2021

Thanks, @andygup. I got the invitation and will clone, run, and try to understand it shortly.

0reactions
andygupcommented, Jan 26, 2021

Closing the issue for now, the problem reported is only partially resolved - the map still isn’t able to display in Ionic/Angular/Electron. However, stand-alone webpack + JS API ESM works just fine with Electron (and so does our AMD CDN).

Conclusion: There’s an issue somewhere in the multi-framework implementation - with the right combination of settings and configuration it can eventually be coaxed to work, but that’s beyond the scope of simple troubleshooting.

Read more comments on GitHub >

github_iconTop Results From Across the Web

ArcGIS Online web maps are not displayed in the Maps list or ...
Problem: ArcGIS Online web maps are not displayed in the Maps list or under Groups in the ArcGIS Field Maps mobile app. Description....
Read more >
Google map is not showing in android - angular - Stack Overflow
I have an app where I am using maps javascript api in ionic @capacitor/google to show map. It is working fine when I...
Read more >
Set map options for apps—ArcGIS Online Help | Documentation
Set map options for apps. ArcGIS includes ready-to-use apps that you can use to view maps in web browsers, mobile devices, and desktop...
Read more >
Map Visualization not working on Android
Solved: Hi all, We have an issue with Map visual, it works fine on Desktop, Service but when opened in Mobile version Map...
Read more >
If Maps isn't working on your Apple device
Do you see the wrong results in Maps on your iPhone, iPad, iPod touch, ... In the Settings app, tap Privacy, then tap...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found