Angular库：单独的HttpInterceptor

Question

我要实现的目标

一个封装的应用程序（表单编辑器），我可以在另一个有角度的应用程序内部使用，也可以在任何Web应用程序中使用。

---

思想

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

---

对于库中的每个请求，我都希望使用HTTP拦截器登录/将jwt令牌添加到请求标头中。当我使用角度元素包装器构建应用程序时（除了导入库和构建Web组件之外，什么也不做），一切工作正常。当我将其添加到角度应用程序时，拦截器无法正常工作，因为另一个应用程序也具有拦截器。我只想将库拦截器封装到库中。所以我以为我只需要再次将HttpClientModule导入我的库中并获取自己的实例，因此同一文件中定义的HTTP_INTERCEPTORS提供程序知道何时触发。不幸的是，这个想法行不通，而且都在干扰。

的AppModule

进口：
• HttpClientModule（1）
• CustomLibraryModule

提供商：

HTTP_INTERCEPTORS（1）

CustomLibraryModule

进口：
• HttpClientModule（2）

提供商：

HTTP_INTERCEPTORS（2）

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

---

问题

我是否正在为这种情况选择合适的工具？您知道我做错了什么来获取封装的HTTP拦截器吗？

Answer 1

现在，您通过说这个独立的表单编辑器知道您的后端需要JWT来混合考虑。 Web组件应该不知道您的后端实现。

如果您有一个特定的后端，该组件的所有实例都应与之通信，则可以导出一个拦截器以供任何Angular应用程序使用，或者可以将添加JWT的代码直接封装到请求中而不使用完全是拦截器。

此外，如果您在Angular以外的应用程序中使用它，则仍需要Angular出现在页面上（请参见https://angular.io/guide/elements