Welcome to AnguLens, a VSCode extension build to aid understanding of Angular based projects through visualization.
Using AnguLens you can:
- Choose a project directory
- View folder-file hierarchy
- Navigate to selected files in views via double click
- View inputs / outputs of all components
- View routers
- View component hierarchy between parent and child components
- View additional information of files on click via modal
- Install AnguLens from extension marketplace
- Open commands (cmd/ctrl + shift + p) and run "Start AnguLens"
- Right click on "src" folder in Angular project
- Click "Copy Path"
- Paste path into text input and click generate
Displays file structure of selected directory
- Click on folders to open or close them for a cleaner view
Displays component hierarchy, including routers, with overlayed connections representing different connections
- Filter component connections using dropdown menu
- Inputs/Outputs
- Component Hierarchy
- Click on components to get additional information in modal -Inputs -Outputs -Services
-Displays every service as a new network, with any components that utilize that service
AnguLens is an open source project and we encourage iteration and or contribution. To coontribute fork the repo, make feature branches, and PR from your feature branch into AnguLen's dev.
- Removing use of retain context when hidden from VSCode API and use state instead
- Support for Workspaces/monorepos
- Mapping Signals
- Expanding module support
- Mapping Observabels