升级到 Angular 12 - NullInjectorError：没有 InjectionToken 的提供者

Question

最初的实现是基于中描述的模式

https://shashankvivek-7.medium.com/forroot-injectiontoken-in-action-angular-c2bab9959207

它一直在工作，直到我将其升级到 Angular 12。升级后，我不断收到 NullInjector 错误。无论如何都无法解决这个问题，我最终为 Angular 11 和 12 创建了两个普通的简单项目。此外，我将令牌提供程序从项目模块移至应用程序模块。

Angular 12 示例 https://drive.google.com/file/d/1lE8RL6s8L9n6zQYqVOaLqMW9ikMfMgSu/view?usp=sharing

Angular 11 示例 https://drive.google.com/file/d/1HxhCz3i5nmrK8Zj0eddTlk8zz-29lwlh/view?usp=sharing

Angular 11 版本可以工作（甚至是 prod 模式），但其他版本会遇到相同的错误。

这就是调试器内部的样子

看起来像这条线

let record = this.records.get(token);

在 R3Injector.get 中，即使记录存在于记录列表中，也始终无法通过令牌找到记录，如图所示（索引 58）。因此，索引 78 处的重复记录被添加。密钥和令牌参数似乎是相同的。

我无法找到有关它的任何明确信息或修复它的方法。

Answer 1

通过惨痛的教训了解了如下错误导入的危险（由 VS Code 等 IDE 自动插入）

import { Xyz } from 'projects/shared/src/public-api';

其中一个错误导入的对象导致在生成的 main.js 中双重定义 SharedConfigToken（因此索引为 58 和 78）。这意味着注入器永远不会找到该记录，因为它是用一个 SharedConfigToken 插入的，但后来由于双重导入而被覆盖。由于 Map 键比较是 SameValueZero，因此它永远无法查找令牌，因此会出现错误。

它浪费了我生命中很多时间。我希望这一发现对某人有所帮助。