JSPM

ngrx-flow

0.1.0-beta.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 6
  • Score
    100M100P100Q27818F
  • License MIT License

Package Exports

  • ngrx-flow
  • ngrx-flow/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngrx-flow) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

NgRx Flow

ngrx-flow

ngrx-flow is a tool that uses static code analysis to map and visualize NgRx and Angular components relations. It helps you understand and debug your NgRx state management and Angular components interactions.

Features

  • Generate a graph of NgRx actions, effects, reducers and selectors and Angular components, services and pipes
  • Show the dependencies and data flows between NgRx and Angular elements
  • Export the graph as a mmd file
  • Customize the graph layout and appearance

Installation

You can install ngrx-flow globally using npm:

npm install -g ngrx-flow

Or you can use npx to run it without installing:

npx ngrx-flow

Usage

To use ngrx-flow, you need to have a TypeScript project that uses NgRx and Angular. You can run ngrx-flow from the root directory of your project:

ngrx-flow

This will scan your project files and generate a graph of NgRx and Angular elements. The graph will be saved in the ./ngrx-flow folder as ngrx.mmd.

You can also specify the path to your tsconfig file using the -p or --project option:

ngrx-flow -p src/tsconfig.app.json

This will use the specified tsconfig file to resolve your TypeScript modules and paths.

Options

You can customize the behavior and appearance of ngrx-flow using the following options:

  • -h, --help Display help for command
  • -v, --version Output the version number
  • -p, --project <path> Specify path to tsconfig (default: "./tsconfig.json")
  • -o, --output <path> Specify output directory (default: "./ngrx-flow")
  • -l, --renderer <renderer> (default: "elk")
  • -t, --theme <theme> Specify graph theme: light or dark (default: "light")
  • -s, --silent Suppress console output

Examples

Here is an example of a graph generated by ngrx-flow:

NgRx-Angular graph

License

MIT