[Angular] ng-openapi-genでSwaggerからコードを自動生成する

Uncategorized

今の現場で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.

コメント

タイトルとURLをコピーしました