Map not displaying in Ionic-Angular-Electron and Ionic-React-Electron apps when run on desktop
See original GitHub issueI 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:
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:
- Created 3 years ago
- Comments:9 (6 by maintainers)
Top GitHub Comments
Thanks, @andygup. I got the invitation and will clone, run, and try to understand it shortly.
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.