如何在浏览器控制台通过ng.probe获取注入器中的AuthenticationService？

你遇到的问题很典型——控制台环境里并没有直接引用到你从@lib导入的AuthenticationService类，所以直接用它作为令牌去获取肯定找不到。下面给你几个可行的解决方案：

方案一：临时把服务挂载到全局对象（简单直接） #

在你的代码里（比如AuthenticationService的构造函数，或者引用该服务的组件构造函数里），把服务实例挂到window对象上，这样控制台就能直接访问了：

// 在AuthenticationService的构造函数中添加
constructor() {
  (window as any).authService = this;
}

刷新页面后，直接在控制台输入window.authService就能拿到服务实例。测试完成后记得删掉这段代码，不要留在生产环境中。

方案二：通过Angular调试API查找服务令牌 #

如果不想修改代码，可以用Angular的调试工具递归遍历注入器，定位目标服务的提供者：

1. 先在浏览器开发者工具的Elements面板选中app-root元素，然后在控制台输入：

const injector = ng.probe($0).injector;

2. 接着用这段代码搜索匹配的服务提供者：

function findService(injector, serviceName) {
  // 递归遍历父注入器，确保找到根注入器中的服务
  const parentProviders = injector.parent ? findService(injector.parent, serviceName) : [];
  // 合并当前注入器的所有提供者
  return [...parentProviders, ...injector.view.providers, ...injector.view.viewProviders]
    .find(provider => provider.token?.name === serviceName);
}

// 查找AuthenticationService的提供者
const authProvider = findService(injector, 'AuthenticationService');
if (authProvider) {
  const authService = injector.get(authProvider.token);
  console.log('找到服务实例：', authService);
}

这段代码会逐层查找注入器的提供者，找到令牌名称匹配的服务后，再用令牌去获取实例。

方案三：利用Angular Ivy的编译特性（仅限Ivy项目） #

如果你的项目使用Ivy编译器，服务类会自带ɵprov属性，包含注入相关的信息。你可以尝试通过模块引用获取服务类：

// 先选中任意使用了AuthenticationService的组件元素，再执行
const component = ng.getComponent($0);
// 从组件的依赖中查找服务类
const AuthService = component.constructor.ɵcmp.deps.find(dep => dep.token?.name === 'AuthenticationService').token;
// 最后从注入器获取实例
const authService = ng.probe($('app-root')).injector.get(AuthService);

不过这个方法受限于项目的打包方式，稳定性不如前两种方案。

内容的提问来源于stack exchange，提问作者Victor Mukherjee