Registry / devops / angular-esbuild-visualizer

angular-esbuild-visualizer

library0.5.0jsnpmunverified

Visualizes the import branch of an Angular production bundle built with the esbuild/Vite builder. Starting from index.html, it produces an interactive HTML tree showing chunk-to-chunk imports (eager + lazy routes) and per-chunk original module contents using the build's stats.json metafile. Unlike flat bundle analyzers, it understands Angular's two-tier loading model, showing what ships on first paint, what loads later via dynamic imports, and why a module is in a particular chunk. Current stable version: 0.5.0. Requires Node.js ≥ 22.6.0. Released as needed, open source under MIT.

devops

npm install angular-esbuild-visualizer

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · ANGULAR-ESBUILD-VI

angular-esbuild-visualizer

devopsjavascriptv0.5.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

analyzeBundle

✓ import { analyzeBundle } from 'angular-esbuild-visualizer';

✗ const { analyzeBundle } = require('angular-esbuild-visualizer');

The package is ESM-only; CommonJS require() will throw. This function is the main entry for programmatic usage.

generateReport

✓ import { generateReport } from 'angular-esbuild-visualizer/report';

✗ import { generateReport } from 'angular-esbuild-visualizer';

generateReport is exported from a subpath — not from the main index. This generates the final HTML string.

CliOptions

✓ import type { CliOptions } from 'angular-esbuild-visualizer';

✗ import { CliOptions } from 'angular-esbuild-visualizer';

CliOptions is a TypeScript type, not a value; use import type to avoid runtime errors.

Shows how to programmatically analyze an Angular bundle from stats.json and index.html, then generate a self-contained HTML report using the library's two main functions.

import { analyzeBundle, generateReport } from 'angular-esbuild-visualizer'; import { readFileSync, writeFileSync } from 'node:fs'; const statsJson = JSON.parse(readFileSync('dist/my-app/browser/stats.json', 'utf-8')); const indexHtml = readFileSync('dist/my-app/browser/index.html', 'utf-8'); const { tree, chunks } = analyzeBundle(statsJson, indexHtml, { top: 3 }); const html = generateReport(tree, { title: 'My App Bundle Visualizer' }); writeFileSync('report.html', html); console.log('Report generated: report.html');

Debug

Known issues

breakingRequires Node.js >= 22.6.0. Older Node versions will fail with syntax errors due to use of --experimental-strip-types and modern JavaScript features.

fix

Update Node.js to v22.6.0 or later.

affects: <22.6.0

gotchaThe CLI expects the build output directory to contain both stats.json and index.html. If either is missing, the tool will crash with a file not found error.

fix

Ensure both files exist in the specified directory, or use --stats and --html flags to point to specific paths.

affects: >=0.1.0

gotchaThe stats.json must be produced by the esbuild/Vite Angular builder (@angular/build or @angular-devkit/build-angular:application). Using other builders (e.g., webpack) will produce incompatible metafiles.

fix

Enable statsJson in angular.json or use ng build --stats-json. Ensure the builder is set to application (esbuild).

affects: >=0.1.0

deprecatedThe --top option default is 3; setting it to 0 may cause display issues in the generated HTML.

fix

Use --top with a positive integer, or omit it for the default.

affects: >=0.1.0

Errors

Common errors & fixes

Error: Cannot find module 'angular-esbuild-visualizer'

The package is ESM-only and cannot be loaded with require() in CommonJS projects.

fix

Switch your project to ESM ("type": "module" in package.json) or use dynamic import: const { analyzeBundle } = await import('angular-esbuild-visualizer');

TypeError: statsJson is not a valid metafile

The stats.json provided is not from the esbuild builder (e.g., it's from webpack bundle-stats or incorrect format).

fix

Ensure you run ng build --stats-json with the application builder. Verify that stats.json contains 'inputs' and 'outputs' properties.

ENOENT: no such file or directory, open 'dist/my-app/browser/stats.json'

The specified directory does not contain stats.json. Either the build hasn't been run or the path is wrong.

fix

Run ng build --stats-json first, then pass the correct output directory (e.g., dist/my-app/browser).

Upgrade

Version history

0.5.0latest on npm

Audit

Dependencies

commanderrequiredCLI argument parsing

openoptionalOpening the generated HTML in the default browser (--open flag)

Agent activity

29 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/sergiypayu/angular-esbuild-visualizer ↗

packageangular-esbuild-visualizer ↗

homepagehttps://github.com/sergiypayu/angular-esbuild-visualizer#readme ↗