CODEWITHSUNDEEP
angularangular-cli
David
David

Reputation: 603

How to debug Angular in prod server?

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 ?

Upvotes: 42

Views: 41506

Answers (4)

Karl
Karl

Reputation: 3099

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

enter image description here

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.

Hint: To get to the input for the sourcemap url, click right on the .js source file as shown here

enter image description here

Upvotes: 9

DeborahK
DeborahK

Reputation: 60518

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

Upvotes: 38

nandithakw
nandithakw

Reputation: 1029

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,**
                 --------

Upvotes: 22

Ali
Ali

Reputation: 341

If you are deploying on test server than do not use --prod so if error comes it will show u complete detail of error but your application will run in dev mode

Upvotes: -3

Related Questions