TypeScript与Swagger Codegen：如何正确导入生成的Fleets服务？

我之前在使用CCP ESI的Swagger生成代码后，也遇到过类似的服务引用失败问题，给你梳理几个关键的排查和解决步骤：

1. 先确认生成的Fleets服务结构 #

首先检查自动生成的FleetsService文件（通常命名为fleets.service.ts），确保它带有@Injectable()装饰器，并且配置正确的提供范围：

// 示例生成的FleetsService结构
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root' // 或者是某个生成的模块，比如EsiModule
})
export class FleetsService {
  constructor(private http: HttpClient) { }

  // 自动生成的ESI API方法，比如获取舰队详情
  getFleet(fleetId: number) {
    return this.http.get(`https://esi.tech.ccp.is/latest/fleets/${fleetId}/`);
  }
}

如果providedIn不是'root'，意味着这个服务属于某个特定模块，后续需要确保该模块被正确导入。

2. 确保生成的模块被导入到对应模块中 #

如果你的FleetManagementComponent属于AppModule，那么需要在app.module.ts中导入包含FleetsService的生成模块（比如自动生成的EsiGeneratedModule）：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // ESI服务依赖HttpClient
import { EsiGeneratedModule } from './path-to-generated/esi-generated.module'; // 替换成实际生成模块的路径
import { FleetManagementComponent } from './fleet-management/fleet-management.component';

@NgModule({
  declarations: [
    FleetManagementComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule, // 必须导入，因为ESI服务依赖HttpClient
    EsiGeneratedModule // 导入生成的ESI模块，它会提供FleetsService
  ],
  bootstrap: [FleetManagementComponent]
})
export class AppModule { }

如果FleetManagementComponent属于一个特性模块（比如FleetModule），就把EsiGeneratedModule导入到这个特性模块中。

3. 在Fleet Management组件中正确注入服务 #

在你的fleet-management.ts（应该是组件文件fleet-management.component.ts吧？）中，先正确导入FleetsService，然后通过构造函数注入：

// fleet-management.component.ts
import { Component, OnInit } from '@angular/core';
import { FleetsService } from './path-to-generated/services/fleets.service'; // 替换成实际的服务路径

@Component({
  selector: 'app-fleet-management',
  templateUrl: './fleet-management.component.html'
})
export class FleetManagementComponent implements OnInit {
  // 构造函数中注入FleetsService
  constructor(private fleetsService: FleetsService) { }

  ngOnInit(): void {
    // 测试调用服务方法，比如获取某舰队信息
    this.fleetsService.getFleet(123456).subscribe({
      next: (fleetData) => console.log('Fleet data:', fleetData),
      error: (err) => console.error('Fetch fleet failed:', err)
    });
  }
}

4. 常见问题排查 #

• 路径错误：最容易犯的问题是导入路径写错，一定要核对生成的FleetsService文件的实际位置，比如可能在./generated/esi/services/目录下，别漏写层级。
• 缺少HttpClientModule：ESI的API服务依赖Angular的HttpClient，如果没在模块中导入HttpClientModule，服务会初始化失败。
• 服务未被正确提供：如果生成的服务没有providedIn: 'root'，且所属模块没有把它添加到providers数组里，需要手动在模块的providers中声明FleetsService。
• 重新生成代码：如果以上都没问题，可能是Swagger生成的代码有遗漏，尝试重新用swagger.json生成一次代码，确保所有文件都完整。

内容的提问来源于stack exchange，提问作者Alex Bailey