Skip to content

Configuring sourcemaps with the Angular CLI

Sébastien Dubois /

2 min read

Webpack provides a lot of control over sourcemaps generation.

Of course, the trade-off when using the Angular CLI is that the build system is hidden away from us.

It is indeed liberating because it means that we can focus on creating business value by working on actual product features.

Without the CLI, we should have to take care of defining build steps, adding and configuring loaders and dealing with a lot of nitty gritty details.

On the other hand, we lose a bit of control over the build.

Fortunately, the CLI has evolved a lot and provides us with means to tweak many things.

Recently, I wanted to adapt the sourcemaps generation for my Angular app and couldn’t find much information in the CLI documentation.

You can configure sourcemaps generation for the different targets (e.g., serve, production, etc) through the angular.json file:

...
"architect": {
  ...
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "web:build",
      "sourceMap": {
        "scripts": true,
        "styles": true,
        "vendor": true
      }
    },
   ...
...

As you can see above, we can enable/disable sourcemaps for scripts, styles and vendor code.

Minko Gechev’s article provides more background about this: https://blog.mgechev.com/2019/02/06/5-angular-cli-features#hidden-source-maps

Also, check out the following article on Angular in Depth, which goes in detail about how to leverage sourcemaps to troubleshoot applications in production: https://blog.angularindepth.com/debug-angular-apps-in-production-without-revealing-source-maps-ab4a235edd85

That’s it for today ^^.

About Sébastien

Hello everyone! I'm Sébastien Dubois. I'm an author, founder, and CTO. I write books and articles about software development & IT, personal knowledge management, personal organization, and productivity. I also craft lovely digital products 🚀

If you've enjoyed this article and want to read more like this, then subscribe to my newsletter, check out my PKM Library and my collection of books about software development 🔥.

You can follow me on Twitter 🐦

If you want to discuss, then don't hesitate to join one of my communities: the Software Crafters community, the Personal Knowledge Management community, and the focusd Productivity community
Subscribe to my newsletter
Weekly newsletter discussing personal knowledge management, software development, building in public and productivity