Configuring sourcemaps with the Angular CLI

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/

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! ✨

Go Further

How to create a custom Angular Webpack configuration

Understand how you can customize the Webpack configuration of your Angular applications

Sébastien DuboisSébastien Dubois

Using ngx-translate with Storybook stories

How to use ngx-translate with Storybook stories

Sébastien DuboisSébastien Dubois

TypeScript 3 Projects: What's next?

An appendix to my TypeScript book

Sébastien DuboisSébastien Dubois

Want to go deeper?

Knowii Community - Master Knowledge Management + AI | From €4.99/month

Join 400+ members mastering Knowledge Management AND AI. Community + Courses + Tools integrated. €500+ value in Knowledge Master tier.

Knowledge ForgeSébastien Dubois

About Sébastien

I'm Sébastien Dubois, and I'm on a mission to help knowledge workers escape information overload. After 20+ years in IT and seeing too many brilliant minds drowning in digital chaos, I've decided to help people build systems that actually work. Through the Knowii Community, my courses, products & services and my Website/Newsletter, I share practical and battle-tested systems.

I write about Knowledge Work, Personal Knowledge Management, Note-taking, Lifelong Learning, Personal Organization, Productivity, and more. I also craft lovely digital products and tools.

If you want to follow my work, then become a member and join our community.

Ready to get to the next level?

Want to level up as a developer?

• 📖 Dev Concepts — 12 volumes covering IT & software development from scratch
• 💼 Knowledge Worker Kit — Productivity guides for knowledge workers
• 🚀 Obsidian Starter Kit — Organize your dev knowledge
• 🎯 Join Knowii — Community + ALL courses & tools