Debugging production angular builds in local machine

Recently I faced some weird issues at work in an Angular app. This is after upgrading it from Angular 9 to Angular 11. The issue was that some features worked well in dev build but not in production build.

After some classic "It works on my Machine" arguments with the QA, I realized that the issue is somewhere in the build process. I began trying to debug the issue and fixed most of them with varying success using

ng serve --prod

The main problem with serving a prod build is that the source maps will be stripped off and we'll be presented with cryptic and vague error messages. After spending few painful hours of fixing the issue from these cryptic messages, I gave up.

It was clear that I need the prod build and meaningful error message to continue. It was easier to do if we're creating a build with ng build. But our app has some proxy setting so I can't do with build. I needed source maps and prod build to work with ng serve.

I tried ng serve --sourceMaps --prod, it threw errors saying sourceMaps is not a valid argument. After this, I decided to try modifying the build configuration in angular.json file for the production build.

I set the sourceMap to true and buildOptimizer to false under the production key. I was able to run ng serve --prod now with source maps enabled. I got actionable errors now and fixing the actual error was just a matter of minutes after that.

Maybe it is time I gave a read on what each thing in the angular.json is for and this is a great starting point. I hope this helps someone else too.