Angular请求本地json-server数据无报错但控制台无输出如何解决

• 导入HttpClientModule
  Angular 使用 HttpClient 发起请求前，必须在根模块（AppModule）或当前组件所属的功能模块中导入HttpClientModule，未导入时请求无法正常触发，且默认不会抛出明确报错：

// app.module.ts 示例
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { ProductComponent } from './product.component';

@NgModule({
  declarations: [AppComponent, ProductComponent],
  imports: [BrowserModule, HttpClientModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 修正API请求协议
  你当前服务中配置的接口地址为https://localhost:3000/products，而json-server默认启动的是HTTP服务，未配置SSL证书时HTTPS无法正常访问，将服务中的apiURL修改为http://localhost:3000/products即可。

• 增加请求错误回调
  你当前的subscribe方法没有传入错误处理函数，即便请求出现跨域、数据格式不匹配等问题，也不会在控制台输出报错，修改为以下写法即可捕获异常信息：

// product.component.ts 中ngOnInit修改
ngOnInit() {
  // 先加一行测试ngOnInit是否执行
  console.log('ngOnInit 已触发');
  this.productSvc.getProducts()
  .pipe(
    tap(res => console.log('tap 拿到返回数据：', res))
  )
  .subscribe({
    next: (res) => console.log('订阅成功，数据为：', res),
    error: (err) => console.error('请求异常：', err)
  });
}

• 确认组件已正常挂载
  如果测试用的console.log也没有输出，说明ngOnInit生命周期根本没有执行，大概率是你没有在父组件（通常是app.component.html）中添加组件调用标签<app-product></app-product>，添加后组件才会被渲染，生命周期函数才会执行。

• 检查路径拼写
  你导入服务的路径中写的是./../../abraham/servies/products.service，注意servies为拼写错误，正确拼写为services，如果你的文件夹名称确实为servies可忽略，否则需要修正路径，避免服务导入失败。

内容的提问来源于stack exchange，提问作者Abraham Martinez