在使用 Angular6 进行开发时，我们可能会遇到下面这个错误：
Property 'logger' does not exist on type 'typeof HttpClient'
这个错误是由于 Angular6 中的 HttpClient 模块不再支持 logger 属性导致的。本文将介绍如何解决这个问题。
问题原因
在 Angular5 中，我们可以通过 HttpClient 模块的 logger 属性来记录请求和响应的日志。但是在 Angular6 中，这个属性被移除了，因此我们需要使用其他方法来记录日志。
解决方法
使用拦截器
在 Angular6 中，我们可以使用拦截器来记录请求和响应的日志。拦截器是一个中间件，用于在请求和响应之间进行处理。我们可以创建一个拦截器来记录日志，并将其添加到 HttpClient 模块中。
以下是一个示例拦截器，用于记录请求和响应的日志：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- ---------------- ------------ ------------ ------------ - ---- -----------------------
------ - ---------- - ---- ------------------
------ - --- - ---- -----------------
-------------
------ ----- ------------------ ---------- --------------- -
-------------- ----------------- ----- ------------- -------------------------- -
----- ------- - -----------
--- --- -------
------ ----------------
------
----
-- -------- ---- ----- -- - --------- ------ ----- ------
----- -- -- - ----- ---------- ------------ - ----------- - ---
-- --------- ------- ----- -- -- -----------------
----- -- -- - --------
--
-- --- ---- -------- ---------- ------ --------- -- ------
-- -- -
----- ------- - ---------- - --------
----- --- - -------------- ----------------------
----- -- ---------- -----
-----------------
-
--
-
-在上面的示例中，我们创建了一个 LoggingInterceptor 类，它实现了 HttpInterceptor 接口。在 intercept 方法中，我们记录了请求的开始时间，并在请求完成后计算了请求的时间。在 tap 操作符中，我们记录了请求的状态，并在请求完成后打印日志。
为了将拦截器添加到 HttpClient 模块中，我们需要在 app.module.ts 文件中进行配置。在 providers 数组中添加 LoggingInterceptor 类即可：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- ----------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - ------------------ - ---- ------------------------
-----------
-------- --------------- ------------------
------------- ---------------
---------- -
-
-------- ------------------
--------- -------------------
------ ----
-
--
---------- --------------
--
------ ----- --------- - -在上面的示例中，我们使用 provide 属性将 HTTP_INTERCEPTORS 常量指定为提供程序的令牌，并使用 useClass 属性将 LoggingInterceptor 类指定为提供程序的实现。我们还将 multi 属性设置为 true，以指示我们提供了多个拦截器。
使用第三方库
除了自己编写拦截器外，我们还可以使用第三方库来记录请求和响应的日志。其中一个流行的库是 ngx-logger，它提供了一个 LoggerService 类，用于记录日志。
以下是一个示例，演示如何使用 ngx-logger 记录日志：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ - ---- -------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
--------- -
------- ----------------------- -------------
-
--
------ ----- ------------ -
------------------- ------- ------- ------- ----- ----------- --
--------- -
------------------------- ----------
-------------------------------------------------------------------------------- -- -
---------------------- ----------- ----------
---
-
-在上面的示例中，我们使用 Logger 服务来记录日志。在 getData 方法中，我们使用 info 方法来记录 “Getting data…” 的日志，然后使用 HttpClient 模块来获取数据。在响应完成后，我们使用 info 方法来记录 “Data received:” 的日志。
结论
在本文中，我们介绍了如何解决 Angular6 中的“Property 'logger' does not exist on type 'typeof HttpClient'”错误。我们可以使用拦截器或第三方库来记录请求和响应的日志。这些方法都能够帮助我们更好地调试和优化我们的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677a0fc45c5a933a34105faa
