November 20, 2019 by Anuraj
Angular OpenAPI Swagger
This post is about how to generate Angular code from Open API specifications. Open API is a standard way to document REST APIs. It is recommended practise document Web APIs using Open API or Swagger. You can find detailed tutorials on enabling Open API in ASP.NET Core.
Creating ASP.NET Core Web API
First you need to create an Web API project, you can use
dotnet new webapi command to create an API project. Next you need to add the
Swashbuckle.AspNetCore to enable Open API. And modify your
Startup.cs file to use Swagger or Open API. And I am enabling
CORS as well.
I am attaching few links for your reference on enabling Open API in ASP.NET Core and enabling CORS in ASP.NET Core.
- Develop ASP.NET Core apps using OpenAPI tools
- ASP.NET Core web API help pages with Swagger / OpenAPI.
- Enable Cross-Origin Requests (CORS) in ASP.NET Core
Now you can run the API using
dotnet run command. Here is the Open API documentation page for the Web API.
Generating and building Angular Client
To generate the Angular code or any client code from Open API definition, first you need to install the openapi-generator, you can do it by running the following command.
npm install @openapitools/openapi-generator-cli -g
It is an NPM package - CLI wrapper on top of the JAR’s command line options. It support multiple generators, you can find more details about the generators from this website. So we are using the Angular typescript generator. Once the installation is complete, run the following command, which will generate the Angular client code.
>> -g typescript-angular
>> -i http://localhost:5000/swagger/v1/swagger.json
>> -o backend
>> --additional-properties npmName=@backend/api,snapshot=true,ngVersion=8.0.0
It will generate Angular typescript code in a folder
backend. Navigate to the directory, open the
package.json file and modify the version element to something like
1.0.0, otherwise you may not be able to install the packages and build the library.
npm run build
This commands will generate a
tgz file, which we can be used in our Angular project.
Building Angular client application
Since you have generated the API client library, we will create the consumer application, you can create the application using
ng new command. Once the application is created, reference the package using
npm install command like this -
npm install ..\backend\dist\backend-api-1.0.0.tgz, this command will show some warnings around missing dependencies - install them as well.
Here is my app.component.ts file.
In this file, I am referencing the library and using the GET method to fetch the Weather forecast information from the Web API. And here is the HTML file.
Now you can run the application using
ng serve command and verify you’re able to get the weather information from the Web API. Now we’re built a Angular client application with Open API generator code. You might get some warnings from Open API generator if you use the default API template and enabling Swagger on it. I have added few more steps which will help you to fix those issues. And you need to enable
CORS as well. For this post I enabled for all the headers, methods and any origin. It is not recommended for Production.
Happy Programming :)
Copyright © 2024 Anuraj. Blog content licensed under the Creative Commons CC BY 2.5 | Unless otherwise stated or granted, code samples licensed under the MIT license. This is a personal blog. The opinions expressed here represent my own and not those of my employer. Powered by Jekyll. Hosted with ❤ by GitHub