今の現場で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...
www.npmjs.com
Swaggerのyaml作成
一から作るのどうしようかな〜と思って、これまた今の現場で使ってるStoplightStudioがあったのを思い出し、StoplightStudioでyamlを作成した。
Stoplight Studio | OpenAPI Design, Planning & Modeling Tool | Stoplight
Create, collaborate, and prototype APIs with Stoplight Studio
stoplight.io
作った、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.
github.com
コメント