@ngx-di-inspector/core

Runtime Dependency Injection telemetry, Dev HUD overlay, provideShadowed() helper, and accidental shadow detection engine for Angular 18+.

Installation

# Using pnpm
pnpm add -D @ngx-di-inspector/core

# Using npm
npm install -D @ngx-di-inspector/core

Setup in app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideDiInspector } from '@ngx-di-inspector/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideDiInspector({
      hotkey: 'ctrl+shift+d', // Toggle shortcut
      floatingPill: true,     // Bottom-right floating badge
    }),
  ],
};

Zero Overhead in Production: When isDevMode() === false, provideDiInspector() automatically resolves to an empty provider array, ensuring zero bytes added to production bundles.

Intentional Scoping with provideShadowed()

When a child component or route intentionally requires an isolated instance of a service, wrap the provider with provideShadowed():

import { Component } from '@angular/core';
import { provideShadowed } from '@ngx-di-inspector/core';
import { LoggerService } from './logger.service';

@Component({
  selector: 'app-widget',
  standalone: true,
  providers: [
    provideShadowed(LoggerService, {
      reason: 'Widget requires isolated prefixed logger instance',
    }),
  ],
  template: `<p>Widget View</p>`,
})
export class WidgetComponent {}

Documentation & Repository

For complete guides, interactive live demo, and source code, visit the ngx-di-inspector GitHub repository.

License

MIT © 2026 Jake Weidokal