How to Use Source Map Explorer in Angular for Bundle Analysis

To use source-map-explorer in Angular, first install it with npm install -D source-map-explorer. Then build your Angular app with source maps enabled using ng build --prod --source-map and run npx source-map-explorer dist/your-app-name/main.*.js to visualize the bundle contents.

Syntax

The basic syntax to use source-map-explorer with Angular is:

• ng build --prod --source-map: Builds your Angular app in production mode with source maps enabled.
• npx source-map-explorer <path-to-js-file>: Runs the explorer on the generated JavaScript bundle file.

You replace <path-to-js-file> with the actual path to your main JavaScript bundle inside the dist folder.

bash

ng build --prod --source-map
npx source-map-explorer dist/your-app-name/main.*.js

Example

This example shows how to build an Angular app with source maps and analyze the main bundle using source-map-explorer. It helps you see which libraries or code parts take the most space.

bash

npm install -D source-map-explorer
ng build --prod --source-map
npx source-map-explorer dist/my-angular-app/main.*.js

Output

Opening interactive visualization in your browser showing bundle size breakdown by file and package.

Common Pitfalls

1. Not enabling source maps: If you skip --source-map during build, source-map-explorer cannot map the minified code back to original files.

2. Wrong file path: Using an incorrect path or filename for the bundle will cause errors. Use glob patterns like main.*.js to match hashed filenames.

3. Using production build without source maps: Production builds often disable source maps by default, so you must explicitly enable them.

bash

ng build --prod
npx source-map-explorer dist/my-angular-app/main.*.js

# Wrong: No source maps, error or empty output

# Correct:
ng build --prod --source-map
npx source-map-explorer dist/my-angular-app/main.*.js

Quick Reference

• Install source-map-explorer as a dev dependency.
• Build Angular app with --source-map flag.
• Run npx source-map-explorer on the main JS bundle.
• Use glob patterns for hashed filenames.
• View interactive bundle size visualization in your browser.

Key Takeaways

Always build Angular with --source-map to enable source map explorer analysis.

Use npx source-map-explorer on the main JavaScript bundle file inside dist folder.

Check file paths carefully and use glob patterns for hashed filenames.

source-map-explorer opens an interactive visual report in your browser.

This tool helps identify large dependencies and optimize bundle size.