从 JavaScript 代码访问 Angular 服务实例答案

【问题标题】：Get access to Angular service instance from JavaScript code从 JavaScript 代码访问 Angular 服务实例
【发布时间】：2018-03-28 17:23:23
【问题描述】：

我想要做的是基于 Angular 服务中的数据进行一些测试断言，即我们正在尝试创建 E2E 测试，并且我们使用的工具允许我们为断言执行任意 JavaScript 代码，所以为此我需要知道是否可以访问 Angular 服务实例。

如何从纯 JS 代码访问 Angular 服务实例？

也就是说，如果我的 Angular 应用已部署，并且我在浏览器中打开该应用，然后打开 Chrome DevTools，我是否可以访问提供给所有组件的 Angular 服务的服务实例？

我知道可以通过ng.probe($0) 等方式访问您的组件，但不确定服务。

从我到目前为止的搜索来看，似乎我们必须使用 Injector 类，然后使用它的 .get() 方法来访问 Angular 服务实例之一，但我不确定如何我可以访问Injector 类/实例本身吗？

这是我尝试过的：ng.probe($0)（$0 是我的应用程序的<app-root>）然后我看到返回值有一个.injector 属性，我尝试调用ng.probe($0).injector.get('MyServiceName') 并得到一个错误为：Uncaught Error: No provider for MyServiceName!。

（即使我在上面尝试ng.probe，我也很想知道如何在没有 ng.probe 的情况下访问注入器，因为在执行自动化测试（即 prod 模式）期间，我认为我不会能做到ng.probe($0))

所以我不确定我是否尝试以正确的方式访问它？有什么想法吗？

我正在使用 Angular 4。

【问题讨论】：

stackoverflow.com/a/48687412/3731501的可能重复
为<app-root> 做ng.probe($0) 并查看它的providerToken 我发现它只有一个元素，而我想要访问的服务不是其中之一。
还有没有ng.probe()的其他方法，因为ng.probe()在生产环境中不起作用。
是的，生产中没有 ng.probe。这意味着您不能在生产环境中这样做。而且e2e不能被认为是生产环境，所以你可以在那里切换到dev。您可以将根注入器暴露给window，但如果没有提供者令牌，它将毫无用处（并且根注入器不是 Angular 应用程序中的唯一一个，所以它是一个折衷方案）。 providerToken 中可用的内容取决于您的应用程序。考虑提供 stackoverflow.com/help/mcve 来显示问题 - 一个 plunk 或 stackblitz。

标签： javascript angular testing

【解决方案1】：

这适用于我在 Angular 7 中使用 ng.probe():

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

而且我想如果没有ng.probe()，就不可能以另一种方式做到这一点

【讨论】：