Angular应用中getContacts方法无法从Node/Express服务器获取联系人数据

页面在注入ContactService后连写死的静态内容都消失，本质是Angular依赖注入流程报错中断了组件渲染。这类错误不会直接打在页面上，按F12打开浏览器控制台（Console面板）就能看到具体的报错信息。这也刚好解释了为什么你注释掉构造函数里的服务参数，页面就能正常显示——一旦没有了服务依赖，就不会触发缺模块的注入报错，组件渲染流程就恢复正常了。

错误点与对应修复方案，按影响优先级排序 #

• 最核心的阻断性问题：未导入HTTP服务对应的NgModule
  你在ContactService里引入了@angular/http的Http类，但从未在应用根模块（一般是app.module.ts）中导入HttpModule。Angular的依赖注入器找不到Http的实例提供器，一旦你在组件构造函数里注入依赖Http的ContactService，整条注入链路就会报错，组件直接停止渲染，连模板里写死的<h2>contacts works!</h2>都不会展示。
  修复代码示例（在app.module.ts中补充导入）：

  import { HttpModule } from '@angular/http';
  @NgModule({
    declarations: [/* 你的组件列表 */],
    imports: [
      BrowserModule,
      HttpModule // 必须添加这一行，否则Http服务无法注入
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• 第二处导入错误：导错了模块路径
  你提到执行了import http from @angular/core的操作，这是完全无效的——@angular/core包里根本没有导出任何HTTP相关的服务类，所有HTTP能力都来自@angular/http（Angular 4及更早的旧版本）或@angular/common/http（Angular 4之后的新版本），错误路径导入的对象没有任何实际作用。
• 第三处模板错误：标签未闭合
  你在app.component.html里写的选择器代码是<app-contacts><app-contacts>，两个都是开标签，没有带斜杠的闭合标签，正确写法为<app-contacts></app-contacts>。这类标签不匹配的问题本来就会触发模板解析失败，之前你注释掉构造函数注入时，刚好解析流程没走到报错分支，才侥幸能正常显示内容。
• 修复完注入问题后必然遇到的卡点：跨域拦截
  本地Angular开发服务默认运行在4200端口，后端Express服务运行在3000端口，属于跨域请求。哪怕Postman能正常测通接口，浏览器也会因为同源策略拦截前端发出的跨域请求，拿不到返回数据。
  两种解决方式任选其一即可：
  1. 在Express后端安装并配置CORS中间件，允许4200端口的前端跨域访问接口
  2. 在Angular项目根目录新增proxy.conf.json，把前端的/api请求代理转发到3000端口的后端服务
• 非阻断性优化建议：服务的提供位置
  你把providers: [ContactService]写在ContactsComponent的装饰器里不算错误，但后续如果其他组件也需要调用联系人接口，会生成多个独立的服务实例，造成状态不一致。建议把ContactService的提供位置移到根模块的providers数组中，全局只维护一个服务实例。

内容的提问来源于stack exchange，提问作者Muhammad Hassan