Angular 8.2执行ng test单元测试时API请求返回404错误如何解决

出现该问题的核心原因大多是单元测试环境没有正确拦截HTTP请求、或静态资源路径映射错误，可按以下优先级排查遗漏配置：

1. 优先修复HTTP请求Mock配置（90%以上此类问题的根因） #

单元测试默认不访问真实后端服务，直接发起接口请求必然返回404，需要替换真实HTTP模块：

• 在LoginComponent的测试用例文件中导入HttpClientTestingModule替换原生HttpClient模块，示例配置：

import { HttpClientTestingModule } from '@angular/common/http/testing';

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [ LoginComponent ],
    imports: [ HttpClientTestingModule ]
  })
  .compileComponents();
});

• 如需验证接口调用参数、模拟返回数据，注入HttpTestingController拦截请求即可，无需修改karma配置。

2. 调整karma.conf.ts资源匹配规则 #

如果需要加载本地静态JS资源，仅添加*.js匹配规则不足以生效，需要补充路径映射：

• 在files数组中配置静态资源的实际存放路径，示例：

module.exports = function (config) {
  config.set({
    // 其余原有配置保持不变
    files: [
      // 按需添加资源路径，示例为assets目录下的所有JS文件
      { pattern: 'src/assets/*.js', watched: false, included: true, served: true }
    ],
    proxies: {
      // 若接口/资源请求路径与本地路径不一致，添加代理映射，示例如下
      '/api/': '/base/src/mock/',
      '/static/': '/base/src/assets/'
    }
  })
}

3. 检查angular.json测试配置 #

• 找到projects.<你的项目名>.architect.test.options节点，确认assets数组已包含你需要加载的静态资源目录：

"test": {
  "options": {
    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],
    // 其余配置保持不变
  }
}

4. Mock组件依赖的业务服务 #

如果LoginComponent依赖了封装接口的业务服务，优先Mock整个服务避免发起真实请求：

// 模拟登录服务
const mockLoginService = jasmine.createSpyObj('LoginService', ['login']);
mockLoginService.login.and.returnValue(of({ success: true }));

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [ LoginComponent ],
    providers: [
      { provide: LoginService, useValue: mockLoginService } // 替换真实服务
    ]
  })
  .compileComponents();
});

内容的提问来源于stack exchange，提问作者Nimitt Shah