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

Answer 2

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

@Injectable({ providedIn: 'root' })

我更改了此配置，现在它们被装饰为

@Injectable()

此外，我在模块的“提供者”部分中添加了API类。现在，使用延迟加载的模块的HttpClient参考调用其构造函数，并调用正确的拦截器。

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