Angular调用POST请求报factory.factory is not a function错误如何解决

修复方案 #

1. 修正RecipesService服务的装饰器配置 #

该报错的核心原因是你在服务类上方错误添加了@NgModule装饰器，且@Injectable配置异常，导致Angular依赖注入系统无法正确识别服务实例。直接替换服务文件的装饰器部分为以下内容：

// 删除服务文件中所有多余的@NgModule装饰器代码，修正@Injectable配置
@Injectable({
  providedIn: 'root'
}) 
export class RecipesService {
  // 原有类内部的属性、方法逻辑保持不变
}

说明：@NgModule是Angular模块的专属装饰器，禁止添加在服务类上方

2. 修正根模块的导入配置 #

在根模块（通常为app.module.ts）中补全必要的模块导入：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpErrorHandler } from './http-error-handler.service';
// 其他组件、服务导入

@NgModule({
  declarations: [/* 你的项目组件列表 */],
  imports: [
    BrowserModule,
    HttpClientModule,
    ReactiveFormsModule
  ],
  providers: [HttpErrorHandler],
  bootstrap: [/* 你的根组件 */]
})
export class AppModule { }

3. 修正组件中的变量初始化问题 #

FormComponent中的addedrecipes变量未初始化，调用push方法会触发运行时错误，修改为：

addedrecipes: Addedrecipes[] = [];

4. 清理冗余配置 #

• 移除FormComponent的@Component装饰器中的providers: [RecipesService]配置，服务已经注册到根注入器，无需重复声明
• 清理RecipesService构造函数末尾多余的空括号，修正为合法语法：

constructor(
  private http: HttpClient,
  httpErrorHandler: HttpErrorHandler) {   
  this.handleError = httpErrorHandler.createHandleError('RecipesService');
}

内容的提问来源于stack exchange，提问作者Cole Hiller