Get access to Angular service instance from JavaScript code

Question

What I'm trying to do is have some testing assertions based on the data in the Angular service, i.e. we're trying to create E2E tests and the tool we're using allows us to execute arbitrary JavaScript code for assertions, so for that I need to know if it's possible to get access to the Angular service instance.

How can I get access to an Angular service instance from plain JS code?

That is, if my Angular app is deployed, and I open the app in the browser, then open Chrome DevTools, can I get access to the service instance of the my Angular service that was provided to all components?

I know it's possible to get access to your component by through ng.probe($0) etc. but not sure about services.

From what I have searched so far, it seems like we have to do use the Injector class and then use it's .get() method to get access to one of the Angular service instances but I'm not sure how would I get access to the Injector class/instance itself?

Here's what I tried: ng.probe($0) ($0 being the <app-root> of my app) and then I see that the return value has an .injector property, I tried to call ng.probe($0).injector.get('MyServiceName') and got an error for: Uncaught Error: No provider for MyServiceName!.

(Even though I'm trying ng.probe above, I would love to know how to get access to the injector without ng.probe because during execution of the automated testing i.e. prod mode, I don't think I'll be able to do ng.probe($0))

So I'm not sure if I'm trying to access it the right way? Any ideas?

I'm using Angular 4.

doing ng.probe($0) for <app-root> and looking into its providerToken I see that it only has one element and the service I want to get access to isn't one of them. — Shikasta_Kashti
– Shikasta_Kashti, Commented Mar 28, 2018 at 18:27
also is there any other way without ng.probe() because ng.probe() will not work in production. — Shikasta_Kashti
– Shikasta_Kashti, Commented Mar 28, 2018 at 18:34
Yes, there's no ng.probe in production. This means you can't do that in production environment. And e2e cannot be considered production environment, so you can switch to dev there. You can expose root injector to window but it will be useless without provider tokens (and root injector isn't the only one in Angular app, so it's a half-measure). What's available in providerToken depends on your app. Consider providing stackoverflow.com/help/mcve that shows the problem - a plunk or stackblitz. — Estus Flask
– Estus Flask, Commented Mar 28, 2018 at 19:02

Luděk · Accepted Answer · 2018-11-01 09:02:29Z

8

This works for me in Angular 7 using ng.probe():

window.ng.probe(window.getAllAngularRootElements()[0]) .injector.view.root.ngModule._providers .find(p => p && p.constructor && p.constructor.name === 'MyServiceName');

And I guess it is not possible to do it another way without ng.probe()

answered Nov 1, 2018 at 9:02

Luděk

1011 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Get access to Angular service instance from JavaScript code

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related