Configuring sourcemaps with the Angular CLI
How to configure 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#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
I am Sébastien Dubois. You can follow me on X 🐦 and on BlueSky 🦋.
I am an author, founder, and coach. I write books and articles about Knowledge Work, Personal Knowledge Management, Note-taking, Lifelong Learning, Personal Organization, and Zen Productivity. I also craft lovely digital products . You can learn more about my projects here.
If you want to follow my work, then become a member.
Ready to get to the next level?
To embark on your Knowledge Management journey, consider investing in resources that will equip you with the tools and strategies you need. Check out the Obsidian Starter Kit and the accompanying video course. It will give you a rock-solid starting point for your note-taking and Knowledge Management efforts.
If you want to take a more holistic approach, then the Knowledge Worker Kit is for you. It covers PKM, but expands into productivity, personal organization, project/task management, and more:
If you are in a hurry, then do not hesitate to book a coaching session with me:
