🧞‍♂️ GenieOS – Angular Dependency Inspector

Note: This project is licensed under the Apache License 2.0.

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, allowing you to:

• inspect the dependency injection tree structure in real time,
• analyze the state of services,
• observe relationships between components,
• detect potential memory leaks and architectural issues.

✨ 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.

⚙️ Angular version compatibility

GenieOS is currently implemented against Angular 20.

Current support

• ✅ Angular 20 – fully supported and recommended

Planned compatibility

Support for earlier Angular versions (e.g. Angular 17–19) is planned, but not yet available.

🚀 Quick start

Installation

Using npm:

npm install ngx-genie --save-dev

Using yarn:

yarn add ngx-genie --dev

Configuration

GenieOS supports both standalone and NgModule-based Angular applications.

Option 1: Standalone Applications (recommended)

Add the provider to your application configuration (app.config.ts):

import {ApplicationConfig} from '@angular/core';
import {provideGenie} from 'ngx-genie';

export const appConfig: ApplicationConfig = {
  providers: [
    provideGenie({
      hotkey: 'F1',          // default: F1
      enabled: true,         // default: true
      visibleOnStart: false  // default: true
    })
  ]
};

Option 2: NgModule-based Applications

Import GenieModule.forRoot() in your root AppModule:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {GenieModule} from 'ngx-genie';

import {AppComponent} from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    GenieModule.forRoot({
      hotkey: 'F1',          // default: F1
      enabled: true,         // default: true
      visibleOnStart: false  // default: true
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

🧩 Adding the panel component (<ngx-genie />)

Configuring providers alone is not sufficient to display the GenieOS interface.

To render the debugger panel in the application, you must add the <ngx-genie /> component to the component tree, typically in the AppComponent.

Standalone Components

If your application uses Standalone Components, import the GenieComponent directly:

import {Component} from '@angular/core';
import {GenieComponent} from 'ngx-genie';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GenieComponent],
  templateUrl: './app.component.html'
})
export class AppComponent {}

NgModule-based Components

If you're using GenieModule.forRoot(), the component is already available in your module. Simply add it to your template:

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {}

Template (app.component.html)

Add the GenieOS component anywhere in the template (recommended at the end):

<!-- other application components -->

<ngx-genie/>

Run the application and press F1 (or another configured hotkey).

🧪 Project status

GenieOS is currently in an experimental / early-stage phase.

This is the first public version of the library and should be treated as a proof of concept and evolving developer tool, not a production-hardened framework.

Important notes

• ❗ No unit tests yet – the library/plugin does not currently include unit or integration tests. Test coverage is planned for future releases.
• 🧭 APIs and internal behavior may change between versions as the project stabilizes.
• 🧠 The focus of the current version is architecture exploration, UX experimentation, and real-world validation.

🤖 AI disclaimer

This project was developed with the assistance of Generative AI tools. The code, architecture, and documentation are the result of collaboration between the author and AI assistants.

While best efforts were made to ensure quality and correctness, some patterns characteristic of AI-generated code may be present.

This project was developed with the assistance of AI tools. While human oversight was applied, some code patterns may reflect AI generation.

⚖️ License

This project is licensed under the Apache License 2.0.

You are free to use GenieOS in commercial and non-commercial projects, including internal tooling, development workflows, and enterprise applications.

The license:

• ✅ allows commercial use
• ✅ allows modification and redistribution
• ✅ includes an explicit patent grant
• ❌ does not grant rights to use the GenieOS name or branding

The software is provided "AS IS", without warranties or conditions of any kind.

See the LICENSE file for the full license text.

👤 Author

Wiktor Wróbel @SparrowVic