ng-lens
A Node.js tool that statically analyzes Angular components to detect service usage patterns and routing information from any API library.
Overview
NgLens is a static analysis tool for Angular applications that examines TypeScript components to identify service dependencies and method usage. It helps developers understand API consumption, plan refactoring, and map component relationships in large codebases.
Key Features
- Service Injection Detection — Identifies services from specified API libraries injected via Angular constructor dependency injection.
- Method Usage Tracking — Analyzes component code to track which service methods are actually called.
- Routing Analysis — Scans Angular routing modules to extract component, full path, menu ID, and import path data.
- Scalable Architecture — Class-based design capable of analyzing thousands of files efficiently.
- Structured JSON Output — Provides clean, formatted output suitable for integration with other tools.
- Configurable Analysis — Allows customization of target modules and source file patterns.
Architecture
NgLens follows a modular, class-based architecture adhering to the Single Responsibility Principle. Key components include the AngularAnalyzer orchestrator, ImportAnalyzer for detecting injections, ServiceUsageAnalyzer for method call tracking, RoutingAnalyzer for route parsing, and ReportGenerator for output formatting.
Philosophy
NgLens is designed to provide deep, actionable insights into Angular codebases through static analysis, enabling better understanding of API usage and component dependencies without runtime overhead.
Related Projects
oxc-angular-compilerExperimental Angular Compiler based Oxc
angular-compiler-outputAngular Compiler Output is an educational demo tool designed to help developers understand how the Angular template compiler works. It provides immediate visibility into the JavaScript code that Angular generates from templates, making the compilation process transparent and easier to learn. ## Key Features - **Live Template Compilation** — Enter any Angular template and see the corresponding JavaScript output in real-time. - **Syntax Highlighting** — Uses Shiki for clear, color-coded display of the generated JavaScript code. - **Code Formatting** — Integrates Prettier to ensure the output is well-formatted and readable. - **Educational Focus** — Specifically built to teach the fundamentals of Angular's template compilation process. ## Philosophy The project emphasizes learning through visualization, allowing developers to directly observe and analyze the transformation from Angular templates to executable JavaScript.
ngx-genieGenieOS (ngx-genie) is an advanced developer tool for the Angular framework, designed for visualizing, analyzing, and diagnosing the Dependency Injection (DI) system. It works as an intelligent overlay on top of your application, providing real-time insights into the DI tree, service states, and component relationships to help identify memory leaks and architectural problems. ## Key Features * **Tree View** — A hierarchical view of the component tree and their Injectors (Element, Environment). * **Org Chart** — Visualization of the application structure as a classic organizational chart, making parent–child relationships easier to understand. * **Matrix View** — A powerful dependency matrix generated by a Web Worker. * **Constellation View** — An interactive force-directed graph presenting the dependency network as a constellation of nodes and connections. * **Diagnostics** — Automatic detection of anomalies (e.g. circular dependencies, singleton violations, heavy state). * **Live Inspector** — Real-time inspection of service state, including Signals and Observable values. * **Deep Focus** — A mode that isolates a single branch of the tree for easier analysis in large applications. ## Philosophy GenieOS is designed as an evolving developer tool focused on architecture exploration, UX experimentation, and real-world validation to enhance Angular development workflows.
angular-doctorScan your Angular codebase for performance, architecture, and dead code issues — outputs a 0–100 health score with actionable diagnostics
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.