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.