search

mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.26k stars 2.23k forks source link

Unable to locate mapbox-gl.css stylesheet warning reported during "ng build" after upgrading to Angular 12 #10853

Closed tgilino closed 3 years ago

tgilino commented 3 years ago

mapbox-gl-js version: 2.3.1

browser: Chrome

Steps to Trigger Behavior

  1. Follow the instructions to create a new Angular CLI workspace from https://angular.io/start/start-deployment
  2. Download the minimally reproducible example stackblitz: https://stackblitz.com/edit/angular12-mapbox-css-build-error?file=src/app/app.module.ts
  3. Copy the contents of the src folder from the downloaded project into your new angular project created in step 1
  4. Run ng build - in generating index.html step you will see the following error (bolded) 
    c:\src\stackblitz\ng12-mapbox-css>ng build
√ Browser application bundle generation complete.
√ Copying assets complete.
- Generating index html...Unable to locate stylesheet: c:\src\stackblitz\ng12-mapbox-css\dist\ng12-mapbox-css\https:\api.mapbox.com\mapbox-gl-js\v2.3.1\mapbox-gl.css
√ Index html generation complete.

Link to Demonstration

See above steps to reproduce. Note that this issue is only seen on "ng build" not on "ng serve". Other reports to the angular team have identified that there are usually issues in the external css being reference that cause this warning. See https://github.com/angular/angular-cli/issues/20804

https://jsbin.com/

Expected Behavior

No warning is shown

Actual Behavior

Warning is shown on ng build

ryanhamley commented 3 years ago

Hi @tgilino unfortunately this appears to be an issue with Angular's build system. See https://github.com/angular/angular-cli/issues/20760. It seems to be triggered by inline data URIs which our CSS depends on and we can't change on our end. There does appear to be a workaround for Angular as well which hopefully will work, especially since GL JS's CSS file is fairly minimal. Sorry for the inconvenience but I don't think there's anything we can do on our end.