How to enable source maps in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Enabling source maps allows you to debug production Angular applications by mapping minified code back to the original TypeScript source. As the creator of CoreUI with over 11 years of Angular development experience since 2014, I’ve debugged countless production issues using source maps. The most effective solution is to configure source maps in angular.json for different build configurations. This approach enables debugging without exposing unminified code to end users.
Configure source maps in angular.json for development and production builds.
// angular.json
{
"projects": {
"your-app": {
"architect": {
"build": {
"configurations": {
"development": {
"sourceMap": true,
"optimization": false
},
"production": {
"sourceMap": {
"scripts": true,
"styles": true,
"vendor": false,
"hidden": true
},
"optimization": true
}
}
}
}
}
}
}
# Build with source maps for debugging
ng build --source-map
# Development build (source maps enabled by default)
ng build
# Production build with hidden source maps
ng build --configuration production
Source maps create .map files that browsers use to display original TypeScript code in DevTools. In development, source maps are enabled by default for easier debugging. For production, use hidden source maps which aren’t referenced in the bundle but can be uploaded to error tracking services. Setting vendor: false excludes third-party library maps to reduce build size.
Best Practice Note
This is the same source map configuration we use for CoreUI Angular projects. For production, use hidden source maps and upload them to error tracking services like Sentry rather than serving them publicly. This allows production debugging without exposing source code to end users or increasing bundle download size.
