Angular中POST请求报错：Cannot read property 'post' of undefined

我在开发Angular应用的SaveComponent时碰到了棘手的问题——所有请求都没法正常工作，执行POST请求时直接抛出了这个错误：

ERROR TypeError: Cannot read property 'post' of undefined at Object.ApiClientService.sendRequest

以下是我的SaveComponent代码：

import {Component, OnInit} from '@angular/core';
import {Liv} from '../../services/models/liv.model';
import {Livre} from '../../services/models/livre.model';
import {ActivatedRoute, Router} from "@angular/router";
declare var require: any;

@Component({
 selector: 'app-save',
 templateUrl: './save.component.html',
 styleUrls: ['./save.component.css']
})
export class SaveComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) { }

  ngOnInit(): void {
    // 初始化逻辑
  }

  // 此处应有调用ApiClientService.sendRequest的业务方法
}

问题分析与解决步骤 #

这个错误的核心逻辑很明确：ApiClientService里发起POST请求的post属性未定义，大概率是HttpClient注入失败或者ApiClientService本身的注入链路有问题，按下面的步骤逐一排查：

1. 检查ApiClientService的HttpClient注入
   打开你的ApiClientService文件，确保构造函数中正确注入Angular的HttpClient，并且服务本身配置了可注入的装饰器：

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   
   @Injectable({
     providedIn: 'root' // 全局可注入，也可在对应模块的providers数组中声明
   })
   export class ApiClientService {
     // 关键：必须在构造函数中注入HttpClient实例
     constructor(private http: HttpClient) { }
   
     sendRequest(url: string, data: any) {
       // 确保是用注入的http实例调用post，而非未定义的变量
       return this.http.post(url, data);
     }
   }
   

2. 确保根模块中导入了HttpClientModule
   Angular的HttpClient依赖HttpClientModule才能正常工作，必须在根模块（或服务所在模块）的imports数组中添加：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { HttpClientModule } from '@angular/common/http';
   import { AppComponent } from './app.component';
   import { SaveComponent } from './save/save.component';
   
   @NgModule({
     declarations: [
       AppComponent,
       SaveComponent
     ],
     imports: [
       BrowserModule,
       HttpClientModule // 必须添加这个模块
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

3. 检查SaveComponent是否正确注入ApiClientService
   在SaveComponent的构造函数中，必须注入ApiClientService才能调用它的方法，否则会出现服务实例未定义的问题：

   import {Component, OnInit} from '@angular/core';
   import {Liv} from '../../services/models/liv.model';
   import {Livre} from '../../services/models/livre.model';
   import {ActivatedRoute, Router} from "@angular/router";
   import { ApiClientService } from '../../services/api-client.service'; // 导入服务
   declare var require: any;
   
   @Component({
    selector: 'app-save',
    templateUrl: './save.component.html',
    styleUrls: ['./save.component.css']
   })
   export class SaveComponent implements OnInit {
     constructor(
       private route: ActivatedRoute,
       private router: Router,
       private apiClient: ApiClientService // 注入ApiClientService
     ) { }
   
     ngOnInit(): void {
       // 示例调用：
       // this.apiClient.sendRequest('your-api-url', yourData).subscribe(res => {
       //   // 处理响应
       // });
     }
   }
   

按照这几步排查后，应该就能解决这个"post of undefined"的错误了。

内容的提问来源于stack exchange，提问作者Ayoub Bakour