I am trying to integrate MapLibre GL JS into a typescript based Angular app, but I have a strict CSP policy and need to use the alternative CSP version that is supplied in the npm package. The MapLibre GL JS documentation mentions only how to do this in vanilla Javascript and not how to do this in a typescript/Angular/node/npm based environment.
The MapLibre GL JS package.json's main points to dist/maplibre-gl.js but I somehow need to build with this changed to dist/maplibre-gl-csp.js.
{
"name": "maplibre-gl",
"description": "BSD licensed community fork of mapbox-gl, a WebGL interactive maps library",
"version": "5.6.1",
"main": "dist/maplibre-gl.js",
"style": "dist/maplibre-gl.css",
...
How can I achieve getting my Angular app to work with this CSP version?
MapLibre GL JS docs:
For strict CSP environments without worker-src blob: ; child-src blob: enabled, there's a separate MapLibre GL JS bundle (maplibre-gl-csp.js and maplibre-gl-csp-worker.js) which requires setting the path to the worker manually:
<script>
maplibregl.setWorkerUrl("${urls.js().replace('.js', '-csp-worker.js')}");
...
</script>