How to debug Angular in prod server?

Question

In the development environment I can debug with the Chrome source tab , but in the prod server I use the dist folder content after running ng build --prod. This folder contains compiled code so if there is a problem in the production I don't know how to debug to find the problem.

Is it possible to debug through the production compiled code ?

Solution 1

Update: You can tryng build --prod --sourcemap

For the previous versions of angular-2 this would work , ng build --prod --sourcemap

For Angular 12

ng build --source-map

For Angular 8

As mentioned in the comments

ng build --prod --sourceMap

Solution 2

In Angualr CLI 6 options seems to be changed as

ng build --prod --source-map

Or else you can enable source maps in angular.json by setting the sourceMap:true in production configurations

"configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              **"sourceMap": false,**
                 --------

Solution 3

Debugging production build without revealing source maps can be done easily.

You just have to attach your source map from a local or remote server to your production build.

Approach and Concept:

1. Build app without sourcemaps for production deployment

   ng build YOURAPP --prod

2. Deploy production build to your webserver

3. Build app again, this time with sourcemaps option

   ng build YOURAPP --prod --sourceMap

4. Attach sourcemap in your local development environment to your production build in the F12-Development Tools in your browser

Then debug as you are used to do. This way you can even reference sourcemaps from remote devices. For example if you are inspecting a web app on your mobile device (e.g. chrome android) Very useful to detect platform specific behaviour for your apps.

And the best, your sourcemaps never have to be revealed on a public server. They are always kept safe in your development environment.