Debugging Angular Application in Production mode

Some bugs appear in a production environment only with no obvious way to reproduce them in development no matter how hard you try.

To solve these kinds of issues we have to debug the output of our production code.

To do this Angular CLI has provided us with a number of useful features

--watch flag

• The --watch flag, watches our code for changes then runs build process every time our code changes

--source-map

• The --source-map outputs maps for scripts and styles

• Source maps are used to map our minified code back to its original state so we can debug and read that code

Now back to our original problem,

1. First, we will open a CMD

2. Change the Directory to the root of our application

3. Run ng build --prod --watch --source-map

4. And wait till the build process finishes

5. Then we need to open another CMD

6. Change the Directory to the root of our application

7. Here we will use a server application to sever the files of our built Angular app

8. Run npx lite-server --baseDir=dist

There you go! Now we have a Production built version of our Angular served locally on our computer for debugging purposes. We can add/remove breakpoints apply changes to our code and rebuild just like we normally do in day-to-day development activity.