今の現場でAPI仕様書はSwaggerを使ってる。
ドキュメントだと更新忘れ、誤って更新とかあるが、Swagger yamlをコード管理してるとその心配がない。
また、yamlからコードを生成するのもホント便利。
ng-openapi-genのインストール
まずは、ng-openapi-genをインストール

ng-openapi-gen
An OpenAPI 3 codegen for Angular 12+. Latest version: 0.24.1, last published: 20 days ago. Start using ng-openapi-gen in your project by running `npm i ng-opena...
Swaggerのyaml作成
一から作るのどうしようかな〜と思って、これまた今の現場で使ってるStoplightStudioがあったのを思い出し、StoplightStudioでyamlを作成した。
Stoplight Studio | OpenAPI Design, Planning & Modeling Tool | Stoplight
Create, collaborate, and prototype APIs with Stoplight Studio
作った、yamlはこんな感じ。(ログイン用のPOSTリクエスト)
VSCodeで見てみる。良さそう。

ng-openapi-gen.jsonの作成
現場のコードを参考にして作成
project.jsonにopenapiの設定を追加
targets配下にopenapiの設定を追加します。
コード自動生成
いよいよ、コードを自動生成します!
VSCodeにgenerateコマンドが表示されてるので、そこをクリックします。

コード生成後

便利ですね!
feat(myorg-shared-api): generate api.service by ksakae1216 · Pull Request #63 · ksakae1216/angular2022
Contribute to ksakae1216/angular2022 development by creating an account on GitHub.
コメント