OpenAPI – Generate and use Angular Client Code

by

Introduction

In one of earlier post, we discussed that An OpenAPI specification is a standard which describes the capabilities of our API, and how to interact with it. We also demonstrated a .NET Core Web API application integrated with OpenAPI/Swagger.

If you haven’t already, I’ll suggest to check the previous post for background information, as we’ll be building on top of those learnings.

OpenAPI Integration Steps

In a typical client/server web application, to integrate OpenAPI, we can use following 3 steps to simplify the process

  1. Integrate OpenAPI within your API
  2. Generate YAML definition file
  3. Generate Angular Client

I am using .NET core for backend (web api) and Angular for frontend part and tooling will be based on these choices. However there is list of OpenAPI generator and packages, if your tech stack is different.

We’ve already covered the 1st step in previous post and we’ve a .NET core web api equipped with swagger available. Today we’ll cover the remaining two steps.

Tooling Setup

The following picture is from previous post for our reference.

We have a web API equipped with swagger, we can use it to generate a YAML file.

Published WebAPI application can be accessed form this URL.

Source code is available from this git repository.

For Step-2, to generate YAML file, we need some tooling to setup. Lets do that next.

Install SwashBuckle CLI tool

Because the server application is written in .NET we can use the following commands in web api project directory, to install the SwashBuckle cli tool:

dotnet new tool-manifest
dotnet tool install SwashBuckle.AspNetCore.Cli --version 6.4.0
dotnet tool list

Below screenshot shows that cli tool is installed:

Next we can use this tool to generate the YAML file whenever we build the web api project

Build Project to Generate YAML File

With the tool installed, we can edit the .csproj file of demoApp.Web project and this way the YAML file will be regenerated whenever we build the project.

  <Target Name="Build Swagger" AfterTargets="Build">
    <Message Text="* * * * * * Building OpenAPI YAML * * * * * *" Importance="high" />
    <Exec Command="dotnet tool restore" />
    <Exec Command="dotnet swagger tofile --output .\interface.yaml --yaml $(OutputPath)\$(AssemblyName).dll v1" EnvironmentVariables="DOTNET_ROLL_FORWARD=LatestMajor" />
  </Target>

Here is the VS screenshot

We can save the changes and build the project and following build output and generated YAML file is a sign that everything is working fine for step-2.

Build output

YAML file

That’s all for the 2nd step and next, lets use this YAML file to generate angular client side code.

Angular Client Code

To keep things simple I copied the interface.yaml file (generated in previous step) in the root directory of angular application.

Also added a script openapi:generate in package.json file to generate angular client code in a specified directory

Here is the screenshot of this setup:

script

npx openapi-generator-cli generate -i interface.yaml -g typescript-angular -o ./src/app/openapi --skip-validate-spec --additional-properties=ngVersion=13.3.9

now we can simply run this script as follows

npm run openapi:generate

when the execution finishes, we can see that a new folder is created as follows

This is the angular client side code, we can use to interact with the backend API.

As you can see that it generates all the angular services, model dtos etc. based on the backend api specifications. We no longer have to write this code by hand. And as backend api is updated with new endpoints, we can build the api project, which re-generate the YAML file and we can re-run the script to re-generate all the client side code.

As this code will be regenerated, so we shall not make any custom changes to any of those auto-generated services, models etc (the whole openapi folder) as those changes will be over written with next time update.

Lets wire-up and use these services next.

Integrating OpenAPI client Code in Angular App

To wire-up generated code we can make following two changes to app.module.ts file:

configFactory: This is the place where we can configure the Base API address as needed.

also in same file, the second change, in imports array, we can import ApiModule as follows:

with these changes our angular application is ready to use the services.

Using a Service to communicate with Backend

Lets use a generated api service to communicate with backend api.

I’ve added following markup to create a button and wire-up it with click action as follows:

notice the use of tokenService call on line 36, inside the method, once the call finish, we are simply assigning the result to a local variable for display on UI purpose. A simple test.

Following is the result of the service call to backend api:

So the service is making call to backend API and displaying the result on user interface, seems its working as expected. Now we can continue with other services and wire those up in other places in our application as needed.

We’ll end our post now.

You can find below links to published application and code repos:

Summary

In this post we cover the steps of generating, integrating and using Open API client side code in angular application.

We went through the whole process and cover different steps needed for the task.

Let me know if you can some questions or comments.

Till next time, Happy coding.