Angular元素微应用中NullInjectorError的'n'含义及排查求助

有人知道该错误中的'n'代表什么吗？我的整个代码库中并没有名为'n'的服务。以下是错误片段：

main.js:1 ERROR NullInjectorError: R3InjectorError[n -> n -> n -> n -> n]: 
NullInjectorError: No provider for n!
at S0.get (main.js:1:828027)
at Dg.get (main.js:1:830707)
at Dg.get (main.js:1:830707)
at Dg.get (main.js:1:830707)
at Rb (main.js:1:815915)
at Be (main.js:1:816016)
at n.ɵfac [as factory] (main.js:1:1353968)
at Dg.hydrate (main.js:1:832095)
at Dg.get (main.js:1:830659)
at Dg.get (main.js:1:830707)

环境信息 #

• Angular版本：14.2.11
• Node版本：14.21.1

问题出现场景 #

我使用Angular elements开发微应用，通过以下代码注册自定义HTML标签'my-widget'并加载myComponent组件：

ngDoBootstrap() { 
  const myMicroElement = createCustomElement(myComponent, { injector: this.injector }); 
  customElements.define('my-widget', myMicroElement); 
}

myComponent包含多个依赖及子组件，访问时触发上述错误。

已尝试的无效修复方案 #

• 在app.module.ts的providers中添加缺失的服务
• 尝试通过路由访问myComponent

解答 #

这个'n'并不是真实的服务名称，而是代码被混淆压缩后的结果。Angular生产环境构建时会自动对代码进行混淆、压缩和树摇，把原本有意义的类名、服务名替换成这种短变量名，以此减小包体积。

要找到真实的服务名称并解决错误，可按以下步骤操作：

1. 构建开发环境版本：运行ng serve（或ng serve --configuration development），开发环境不会混淆压缩代码，此时触发错误就能看到真实的服务类名。
2. 确认服务提供方式：找到真实服务后，检查它是否在对应模块的providers数组中声明；如果服务用providedIn: 'root'修饰，确认是否正确导入，避免因未引用被树摇掉。
3. 适配Angular Elements场景：由于是微应用，要确保创建自定义元素时传入的injector能正确获取服务实例。如果服务属于懒加载模块，可将服务提升到根模块提供，或创建包含该服务的自定义注入器传入。

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