Angular注入HttpClient后依赖UserService的组件无法显示问题

核心错误是HttpClientModule的配置位置错误：
HttpClientModule是Angular官方提供的功能模块，不是可注入的服务，不能放在@NgModule的providers数组中。

Angular的@NgModule配置有明确的职责划分：

• imports数组：用来引入当前模块运行依赖的其他外部模块，所有带Module后缀的功能模块（包括HttpClientModule、路由模块、第三方组件模块等）都要放在这里
• providers数组：仅用来注册全局可用的可注入服务

你把HttpClientModule错放到providers数组后，依赖注入系统无法正确解析该模块内部导出的HttpClient服务。当UserService构造函数声明注入HttpClient时，整条依赖实例化链会静默卡住——部分Angular版本搭配特定zone.js配置时不会在控制台抛出明确异常，直接表现为所有依赖UserService的组件无法完成实例化，页面无任何内容渲染。这也和你观察到的现象完全吻合：移除HttpClient注入后，依赖链没有了无法解析的节点，组件就能正常展示。

1. 修改app.module.ts，把HttpClientModule从providers数组移动到imports数组中，修正后的参考配置如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
// 其他组件、服务、模块的导入路径省略

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
    // 其余业务组件、指令、管道声明
  ],
  imports: [
    BrowserModule,
    HttpClientModule, // 所有功能模块统一放在imports数组
    // 其余路由模块、第三方模块引入
  ],
  providers: [
    CookieService,
    UserService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 冗余配置清理（非必须，不影响运行）：
   • 你的UserService已经添加了@Injectable({ providedIn: 'root' })装饰器，默认会在根注入器全局注册，不需要重复在providers数组中声明
   • 如果你使用的是v10以上版本的ngx-cookie-service，CookieService同样支持providedIn: 'root'注册方式，也不需要手动在providers中声明

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