Auto-Generating Angular web client services with Swashbuckle in .Net Core 5

When you are working with Angular and APIs it is very common that models need to be replicated in Angular and then services need to be created in order to call those APIs.

This repetitive job has to be done every time a new model is being created and each time a model is updated in the APIs a manual update has to be done on the Angular model.

Thanks to Swagger, which is the implementation of the Open API specification that comes by default when creating new web APIs in .Net core 5, it is possible to auto-generate client services and models in Angular.

This can be done by using Swashbucket and ng-openapi-gen.

Swashbuckle is a nuget package for the Microsoft stack that produces swagger documents for your API's automatically, based on inspecting the code and additional metadata you provide to shape the output document.

Ng-openapi-gen is an NPM module that generates model interfaces and web service clients from an OpenApi 3 specification.

The end solution will contain a web API application and an Angular application. The client services and the model interfaces are going to be generated at the moment of building the .Net Core application.

Basic prerequisites to read this application.

You have to know:

1. What a Web API application is and how it is created.
2. What an Angular application is and how to create one.
3. How to run scripts using npm
4. The .Net SDK 5 has to be installed on the machine.

1 Creating the Solution

• The first step is to create a solution with a web API application called StoreY.
• Once the application is created add a new folder called ClientApp.
• Then the Angular app has to be created inside that folder (StoreXSPA). In the terminal run the command ng new StoreXSPA to create a new Angular project.
• After the Angular app is created a new folder called (Swagger) has to be created. Create the folder inside the ClientApp/StoreXSPA called Swagger. This is the folder where the swagger.json file will be created.

2. Install Swashbuckle.AspNetCore.Cli

Swashbuckle.AspNetCore.Cli helps to create the JSON file that contains our WebAPI specification.

The Swashbuckle.AspNetCore.Cli has to be installed by following the instructions on the next web page.

https://github.com/domaindrivendev/Swashbuckle.AspNetCore#swashbuckleaspnetcorecli

Note: When creating a web API template with swagger it comes with an old version of swagger. Make sure that the same version is installed in point 2.2.

3. Create a PostBuild script

The next step is to create a post-build script to make sure that the swagger.json file will be generated after the project is built.

In order to create a PostBuild, the StoreY.csproj file has to be edited by adding the Target tag with the AfterBuild attribute. Inside this tag is where the executing commands have to be added.

The first one will execute the command that generates the JSON file that contains our API specification.

At the moment of build, the next step will be executed by MSBuild.

4. Installing API generator

The next step is to install the open API generator for Angular.

This project is an NPM module that generates model interfaces and web service clients from an OpenApi 3 specification. The generated classes follow the principles of Angular. The generated code is compatible with Angular 7+.

To install run the next command

npm install -g ng-openapi-gen        

After installing the open-API generator add the command in the package.json that is inside the angular application.

By manually running the command npm run generate-clients the services will be generated.

5.- Add a command that will run the script that was created in step 4.

To run the script at the moment of build it is needed to add a new command in the CreateAngularClientServices Target.

The prefix is used to specify the relative path of the folder where the package.json exits.

npm --prefix ../StoreY/ClientApp/StoreXSPA run generate-clients        

Now each time a new change is made on the models and controllers they will be reflected in the models and services on the ClientApp after the build is done.

6.- Testing the client generated.

To test the web client services and models created by the tool it is needed to follow the next steps.

The API that is going to be tested is the Weather API that comes by default when creating the project in .Net 5.

6.1 To test that it works it is needed to import HttpClientModule in the app.module.ts

6.2 Second is to inject the service to make the HTTP call.

6.3.- List the result in the Html component

6.4 Create the base URL

6.5 Specifying the root URL / web service endpoint

The easiest way to specify a custom root URL (web service endpoint URL) is to use forRoot method of ApiModule and set the rootUrl property from there.

Now the application works.

PD. Don't forget to add the cors configuration to avoid CORS error at the moment Angular trying to access the Web API in a different domain.

The easy way to implement this project is to clone the Github project that can be founded in this link.