How to generate sourcemaps using Angular CLI and upload them to Sentry?

Question

There are two ways to set up sourcemaps: having them hosted on the site and referenced in the bundled files or uploading them directly to a service like sentry. I'm trying to accomplish the latter. The problem is that there seems to be no way to generate sourcemaps using angular cli without having the filepath written to the bundled files.

My first thought was to have two builds - one with sourcemaps generate and one without. I would then just deploy the build without sourcemaps and upload the build with them to sentry. That doesn't work because the bundle filenames are different (angular cli uses the file hash as the filename for cache busting and when you generate sourcemaps it adds the path to the .map file as a comment at the end causing a change in hash and filename).

My other option would be to build with sourcemaps, upload them to sentry, and then delete the map files before deploying the site. The problem there though is that the bundle files still contain a reference to a now non-existent map file. That shouldn't be an issue in and of itself but it might raise an issue with extensions or browsers down the line and just seems like a hackish solution.

How would you implementing something like this into the build process?

Answer 1

As mentioned in the comments, you can enable sourceMaps in the angular.json file like this:

 "configurations": {   "production": {     "sourceMap": {       "scripts": true,       "styles": true,       "hidden": true     }, 

Also, I recommend you remove the .map files after uploading to sentry and before deploying. So in your ci add this line:

rm -rf dist/YOUR_PROJECT/*.map