Angular 角度库：单独的HttpInterceptor 我想要达到的目标

一个封装的应用程序（表单编辑器），我可以在另一个angular应用程序中使用，也可以在任何web应用程序中使用

---

主意 主要模块/组件可以实现为angular library（主要组件为shadow dom），因此我可以添加“angular elements”包装来构建webcomponent，但也可以将库本身作为npm包导入现有angular应用程序中。因此，我的angular应用程序不会加载完整的javascript包，而只加载模块，这些模块不是由其他应用程序提供的，以获得更好的性能和集成

---

问题 对于来自库的每个请求，我需要一个http拦截器来登录/将jwt令牌添加到请求头中。当我使用angular elements包装器构建应用程序时（除了导入库和构建webcomponent之外什么都不做），一切都正常。当我将其添加到angular应用程序中时，拦截器没有按预期工作，因为另一个应用程序也有拦截器。我只想将库拦截器封装到库中。因此，我认为我只需再次将HttpClientModule导入我的库中，并获取我自己的实例，以便同一文件中定义的HTTP_拦截器提供程序知道何时触发。不幸的是，这个想法不起作用，两者都在干扰

AppModule

• 进口：
  • HttpClientModule（1）
  • 自定义库模块
• 供应商：
  • HTTP_拦截器（1）

客户库模块

• 进口：
  • HttpClientModule（2）
• 供应商：
  • HTTP_拦截器（2）

在最好的情况下，我希望将CustomLibraryModule导入应用程序的延迟加载子模块中

---

问题:

---

我是否为这种情况选择了正确的工具？你知道我在获取封装的http拦截器时做错了什么吗？

现在你说这个独立的表单编辑器知道你的后端需要一个JWT，这让人担心。web组件应该不知道您的后端实现

如果您有一个特定的后端，该组件的所有实例都应该与之通信，那么您可以导出一个拦截器供任何角度的应用程序使用，或者您可以将JWT直接封装在代码中，而不使用拦截器

---

此外，如果您在Angular以外的应用程序中使用此功能，您仍然需要Angular才能出现在页面上（请参阅

经过一些研究，我找到了原因，为什么CustomLibraryModule没有使用自己的拦截器，而是使用主应用程序的拦截器。该库使用由nswag（.NET backend）生成的API类.不幸的是，生成的可注入类被配置为singleton，因此每个类都用

@Injectable({ providedIn: 'root' })

我改变了这个配置，现在他们只是装饰

@Injectable()

此外，我在模块的“providers”部分添加了API类。现在，它的构造函数被惰性加载模块的HttpClient引用调用，并且正确的拦截器被调用

---

由于缺乏理解，我慢慢地转到了代码的这一部分。因此，最终这是我自己的错，但我感谢您的帮助和澄清。

如果不延迟加载，就无法封装拦截器。这是一个奇怪的想法，因为我不知道在什么样的用例下，跨应用程序使用一个库可以在我的req中添加JWTuests，但如果您想这样做，则需要包装http服务it@bryan60我认为你可以封装它。但我同意你的第二点：为什么你要对表单库发出HTTP请求？如果我在你的源代码中看到这一点，我将不愿意使用它…@Maryannah检查拦截器的用法说明：你可以拥有“封装"拦截器位于延迟加载的模块中…这不是一个预期/支持的用例，更多的是延迟加载的意外副作用，可能会在将来的版本中中断。否则，新的HttpClientModule导入将覆盖以前的导入。@bryan60哦，我从来没有见过。感谢您提供的信息！用例：此表单编辑器是conn带有后端的ected。您可以在表单中添加项目，但也可以编辑现有项目。每个字段都保存在blur上。由于多客户用途，还加载了一些主题数据。此表单编辑器应作为仪表板的一部分集成，但也应作为webcomponent独立，以便在每个系统上独立运行。这是一个wesome，很高兴看到你是如何做到这一点的。比如你的拦截器的源代码，以及它是从哪里引入的。