基于Micronaut与Angular14，利用Swagger生成TS文件及消费方案咨询

一、生成Angular所需TypeScript文件 #

用openapi-generator-cli是最成熟的实现方案，步骤如下：

• 安装开发依赖：npm install @openapitools/openapi-generator-cli -D
• 在项目的package.json中添加生成命令，替换路径为你的实际文件位置：

  "scripts": {
    "generate-api": "openapi-generator-cli generate -i ../micronaut-project/build/swagger.yaml -g typescript-angular -o ./src/app/api"
  }
  

  参数说明：
  • -i：指定Swagger YAML文件的路径（本地文件或远程URL都支持）
  • -g：指定生成器类型，typescript-angular专门适配Angular项目
  • -o：指定生成文件的输出目录
• 执行生成命令：npm run generate-api
  生成的文件包含API服务类、数据模型类，完全适配Angular的依赖注入体系。

二、前端消费生成的TS文件 #

1. 配置API模块 #

在Angular的根模块（如AppModule）中导入并配置生成的ApiModule：

import { NgModule } from '@angular/core';
import { ApiModule, Configuration, ConfigurationParameters } from './api';

// 配置API基础路径
export function apiConfigFactory(): Configuration {
  const params: ConfigurationParameters = {
    basePath: 'http://localhost:8080' // 替换为你的Micronaut服务地址
  };
  return new Configuration(params);
}

@NgModule({
  imports: [
    ApiModule.forRoot(apiConfigFactory)
  ]
})
export class AppModule { }

2. 在组件中使用API服务 #

直接注入生成的服务类即可调用接口：

import { Component, OnInit } from '@angular/core';
import { UserService } from './api/services';
import { User } from './api/models';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html'
})
export class UserListComponent implements OnInit {
  users: User[] = [];

  constructor(private userService: UserService) { }

  ngOnInit(): void {
    this.userService.listUsers().subscribe({
      next: (data) => this.users = data,
      error: (err) => console.error('加载用户失败:', err)
    });
  }
}

三、通过Micronaut暴露Swagger YAML给前端 #

完全可以实现，有两种常用方式：

1. 静态资源方式 #

把Micronaut生成的swagger.yaml复制到src/main/resources/public目录下，Micronaut默认会暴露该目录下的静态资源，前端可以通过http://micronaut-url/swagger.yaml直接访问。

2. 控制器接口方式 #

如果不想手动复制文件，写一个简单的控制器返回YAML内容：

import io.micronaut.http.MediaType;
import io.micronaut.http.annotation.Controller;
import io.micronaut.http.annotation.Get;
import java.nio.file.Files;
import java.nio.file.Paths;

@Controller("/api/swagger")
public class SwaggerDocController {

    @Get(produces = MediaType.APPLICATION_YAML)
    public String getSwaggerSpec() throws Exception {
        // 替换为你的swagger.yaml实际生成路径
        return Files.readString(Paths.get("build/swagger.yaml"));
    }
}

启动Micronaut服务后，前端就能通过http://micronaut-url/api/swagger获取最新的API规范，甚至可以把生成命令的-i参数改成这个URL，实现开发时自动拉取最新规范生成TS文件。

内容的提问来源于stack exchange，提问作者San Jaisy