ng-di-graph

oxc-angular-compiler

Experimental Angular Compiler based Oxc

angular-compiler-output

Angular 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-genie

GenieOS (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-doctor

Scan your Angular codebase for performance, architecture, and dead code issues — outputs a 0–100 health score with actionable diagnostics