In Angular 8, how do I access an injected service from the browser console?

Question

I'm using Angular 8. I'd like to access an injected service from my browser console (Chrome dev tools). I can access the injector from my browser console like so

ng.probe(document.querySelector('app-root')).injector

I would like to access an injected service in the dev tools console but when I try this

ng.probe($0).injector.get("AbcService")

I get the below error. I have verified the name of my service is correct. What else do I need to do to access my service from the console?

core.js:8991 Uncaught Error: StaticInjectorError(AppModule)[ActivationService]: 
  StaticInjectorError(Platform: core)[AbcService]: 
    NullInjectorError: No provider for AbcService!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8895)
    at resolveToken (core.js:9140)
    at tryResolveToken (core.js:9084)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8981)
    at resolveToken (core.js:9140)
    at tryResolveToken (core.js:9084)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8981)
    at resolveNgModuleDep (core.js:21208)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:21897)
    at Object.resolveDep (core.js:22268)

Edit: The service I'm trying to access is imported into my component like so

import { AbcService } from '@myapp/services';

Answer 1

The injected service will be available as a property on the componentInstance. If AbcService is injected into AppComponent

  export class AppComponent {  
    constructor(private abcService: AbcService) {}
  }

then you can get it in the console with:

ng.probe(document.querySelector('app-root')).componentInstance.abcService

Answer 2

At least in Angular 10+ the method ng.probe does not exist anymore. You can use instead ng.getComponent:

// Get the root component
ng.getComponent(document.querySelector('app-root'));

// Any property (injected object) or method in the root component can be used:
const abcService = ng.getComponent(document.querySelector('app-root')).abcService;
abcService.getSomeAwesomeResults();

Answer 3

injector get method token value can be class reference (object) ,string or number value this related how you set the provider

providers : [
  AbcService // class ref
]

you can get the service like this

ng.probe(document.querySelector('app-root')).injector.get(AbcService)

but when you run the app you will not be able to get a refrence to AbcService from the developer console ,the AbcService is not avilable in global scope.

in case the token is just a string value

providers : [
  {provide : 'AbcService' , useClass :AbcService} , 
]

this will work

ng.probe(document.querySelector('app-root')).injector.get(`AbcService`)

in both cases if the token does not exist an error will throw

Updated!! 🚀🚀

you can save a ref to NgModuleRef class like this

platformBrowserDynamic()
  .bootstrapModule(AppModule).then(ref => {
    window['ngRef'] = ref; // 👈
  })
  .catch(err => console.error(err));

then can just create an object contains a reference to all service you want to test

import {AbcService} from './abc.service';
import {ZService} from './z.service';

export const ServRef = {
  AbcService,
  ZService
}

save this object globally

window['servRef'] = ServRef;

in the developer console you can do this

ngRef.get(servRef.AbcService);
ngRef.get(servRef.ZService)

demo ⚡⚡