# @angular-experts/ng-parsel

> Tool that transforms Angular codebase to JSON representation

Latest version **5.8.1** (published 2026-09-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install @angular-experts/ng-parsel
pnpm add @angular-experts/ng-parsel
yarn add @angular-experts/ng-parsel
bun add @angular-experts/ng-parsel
```

Provides the command `ng-parsel`.

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.8.1 |
| Published | 2026-09-11 |
| First published | 2022-11-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 162.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | Kevin Kreuzer |
| Maintainers | kreuzerk, tomastrajan |
| Keywords | Angular, Typedoc, JSON, Parser |

## Links

- npm: https://www.npmjs.com/package/@angular-experts/ng-parsel
- Repository: https://github.com/angular-experts-io/ng-parsel
- Homepage: https://github.com/angular-experts-io/ng-parsel#readme
- Issues: https://github.com/angular-experts-io/ng-parsel/issues
- npm.io page: https://npm.io/package/@angular-experts/ng-parsel

## Dependencies (7)

- [ora](https://npm.io/package/ora.md) ^5.4.1
- [glob](https://npm.io/package/glob.md) ^8.0.3
- [chalk](https://npm.io/package/chalk.md) ^5.1.2
- [table](https://npm.io/package/table.md) ^6.8.2
- [commander](https://npm.io/package/commander.md) ^9.4.1
- [cosmiconfig](https://npm.io/package/cosmiconfig.md) ^8.0.0
- [@phenomnomnominal/tsquery](https://npm.io/package/@phenomnomnominal/tsquery.md) ^5.0.1

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 5.8.1 (latest) — 2026-09-11
- 5.8.0 — 2026-01-05
- 5.7.0 — 2026-01-05
- 5.6.0 — 2025-10-21
- 5.5.0 — 2025-09-23
- 5.4.0 — 2025-09-08
- 5.3.2 — 2025-08-25
- 5.3.1 — 2025-06-23
- 5.3.0 — 2025-06-17
- 5.2.1 — 2025-04-08
- 5.2.0 — 2025-04-08
- 5.1.1 — 2024-08-21
- 5.1.0 — 2024-08-20
- 5.0.1 — 2024-08-06
- 5.0.0 — 2024-08-06
- … 23 more at https://npm.io/package/@angular-experts/ng-parsel/versions

## README

# ng-parsel

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->

[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)

<!-- ALL-CONTRIBUTORS-BADGE:END -->

[![Coverage Status](https://coveralls.io/repos/github/angular-experts-io/ng-parsel/badge.svg?branch=main)](https://coveralls.io/github/angular-experts-io/ng-parsel?branch=main)

> Convert your Angular components to JSON

<div style="display: flex; justify-content: center">
<img src="https://github.com/angular-experts-io/ng-parsel/blob/main/docs/logo.png?raw=true" style="width: 250px">
</div>

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [What is this module about](#what-is-this-module-about)
- [Getting started](#getting-started)
  - [Install](#install)
  - [Init configuration](#init-configuration)
- [Commands](#commands)
  - [Parse](#parse)
    - [Parse script](#parse-script)
    - [NPX](#npx)
    - [Configuration](#configuration)
  - [Stats](#stats)
    - [Stats script](#stats-script)
    - [NPX](#npx-1)
- [Types](#types)
- [Type detection](#type-detection)
- [Outputs](#outputs)
- [Contributors](#contributors)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## What is this module about

This module extracts the most important information of your Angular code base and converts it into JSON. Having the most
important parts of your Angular code base as JSON can be very useful to perform custom analysis or to display APIs.
Displaying APIs is especially useful for library authors that want to illustrate their library in a component showcase.

## Getting started

### Install

Install ng-parsel as a dev dependency in your repository.

```bash
npm i -D @angular-experts/ng-parsel
```

### Init configuration

Once installed you can use npx to create an initial configuration for ng-parsel.

```bash
npx @angular-experts/ng-parsel init
```

Running this command will create a `.parselrc.json` configuration file in the root of your repository. Check the initial
configuration and adjust if needed. The configuration properties and their meaning are explained in
the [configuration section](#configuration).

## Commands

### Parse

To parse the code base you can either create a parse script in your `package.json`which calls `ng-parsel` or you can use
npx.

#### Parse script

Add the following script to your `package.json`.

```json
"parse": "@angular-experts/ng-parsel parse"
```

Once added, you can open up a terminal and run the following command.

```bash
npm run parse
```

#### NPX

To parse your code base with npx you can run the follwoing command inisde a terminal of your choice.

```bash
npx @angular-experts/ng-parsel parse
```

#### Configuration

ng-parsel offers the following configurations.

| Property        | Default value | Description                                                                                                                                                                                                                                                                |
| --------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| src             | 'src'         | Glob to query all the src files that should be parsed                                                                                                                                                                                                                      |
| out             | 'ng-parsel'   | Output directory                                                                                                                                                                                                                                                           |
| parseComponents | true          | If set to `true` ng-parsel will parse Angular Components and include them in the output.                                                                                                                                                                                   |
| parseServices   | true          | If set to `true` ng-parsel will parse Angular Services and include them in the output.                                                                                                                                                                                     |
| parsePipes      | true          | If set to `true` ng-parsel will parse Angular Pipes and include them in the output.                                                                                                                                                                                        |
| parseDirectives | true          | If set to `true` ng-parsel will parse Angular Directives and include them in the output.                                                                                                                                                                                   |
| parseModules    | true          | If set to true ng-parsel will parse Angular Modules and include them in the output.                                                                                                                                                                                        |
| parseHarnesses  | true          | If set to true ng-parsel will parse Harness test files (all files ending with `.harness.ts`) and include them in the output.                                                                                                                                               |
| parseValidators | true          | If set to true ng-parsel will parse Validators (all files ending with `.validator.ts`) and include them in the output.                                                                                                                                                     |
| parseSpecs      | true          | If set to true ng-parsel will parse testing files (all files ending with `.spec.ts`) and include them in the output.                                                                                                                                                       |
| singleFile      | true          | If set to to `true` the output will be written to a `ng-parsel.json` file in the output directory. If set to false, ng-parsel will generate multiple output files, one for each `componentType`. (Find out more on component types in the [next section](#component-type)) |

### Stats

The stats command is a command that gives you a quick overview of your Angular application. It shows you how many components, services, pipes, directives, modules, harnesses and specs you have in your application. Furthermore, it shows you interesting insights, like how many are standanlone and how many are part of a module.
To run the stats command you can either create a stats script in your `package.json`which calls `ng-parsel` or you can use `npx`;

#### Stats script

```json
"stats": "@angular-experts/ng-parsel stats"
```

#### NPX

```bash
npx @angular-experts/ng-parsel stats
```

## Types

Currently ng-parsel classifies each file into one of the following `NgParselOutputType`.

- Component
- Service
- Pipes
- Modules
- Directives
- Harnesses
- Specs
- Unknown

Unknown files will not be parsed. If you need support for additional types please raise an issue or open a PR.

## Type detection

Harnesses, Specs and Validators are detected by the filename. Everything that ends with `.spec` will be classified
as a spec file. Everything that ends with `.harness` will be classified as a harness file. Everything that ends with
`.validator` will be classified as a validator file.

All other types are detected by their Angular decorators.

## Outputs

Single outputs will be written to a `ng-parsel.json` file in the output directory.
If `singleFile` is set to `false` ng-parsel will generate multiple output files, one for each `componentType`. (Find out more on [component types](#component-type))

## Contributors

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tbody>
    <tr>
      <td align="center" valign="top" width="14.28%"><a href="https://medium.com/@kevinkreuzer"><img src="https://avatars.githubusercontent.com/u/5468954?v=4?s=100" width="100px;" alt="Kevin Kreuzer"/><br /><sub><b>Kevin Kreuzer</b></sub></a><br /><a href="https://github.com/angular-experts-io/ng-parsel/commits?author=kreuzerk" title="Code">💻</a> <a href="https://github.com/angular-experts-io/ng-parsel/issues?q=author%3Akreuzerk" title="Bug reports">🐛</a> <a href="#content-kreuzerk" title="Content">🖋</a> <a href="https://github.com/angular-experts-io/ng-parsel/commits?author=kreuzerk" title="Documentation">📖</a> <a href="#design-kreuzerk" title="Design">🎨</a> <a href="#ideas-kreuzerk" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-kreuzerk" title="Maintenance">🚧</a> <a href="#platform-kreuzerk" title="Packaging/porting to new platform">📦</a> <a href="#research-kreuzerk" title="Research">🔬</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://www.npmjs.com/~ngdaddy"><img src="https://avatars.githubusercontent.com/u/81327266?v=4?s=100" width="100px;" alt="@NgDaddy"/><br /><sub><b>@NgDaddy</b></sub></a><br /><a href="#ideas-NgDaddy" title="Ideas, Planning, & Feedback">🤔</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://medium.com/@lilbeqiri"><img src="https://avatars.githubusercontent.com/u/24731032?v=4?s=100" width="100px;" alt="Ilir Beqiri"/><br /><sub><b>Ilir Beqiri</b></sub></a><br /><a href="https://github.com/angular-experts-io/ng-parsel/commits?author=ilirbeqirii" title="Code">💻</a> <a href="https://github.com/angular-experts-io/ng-parsel/commits?author=ilirbeqirii" title="Tests">⚠️</a></td>
      <td align="center" valign="top" width="14.28%"><a href="http://quentin.monmert.pagesperso-orange.fr/"><img src="https://avatars.githubusercontent.com/u/9989211?v=4?s=100" width="100px;" alt="Quentin"/><br /><sub><b>Quentin</b></sub></a><br /><a href="#maintenance-qmonmert" title="Maintenance">🚧</a> <a href="https://github.com/angular-experts-io/ng-parsel/commits?author=qmonmert" title="Code">💻</a></td>
    </tr>
  </tbody>
</table>

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

---
_Source: https://npm.io/package/@angular-experts/ng-parsel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
