https://github.com/dacili/nswag-client-generation-with-swagger
Get automatically generated client API for Angular
https://github.com/dacili/nswag-client-generation-with-swagger
angular clientapi dotnet6 nswag swagger swagger-ui
Last synced: about 2 months ago
JSON representation
Get automatically generated client API for Angular
- Host: GitHub
- URL: https://github.com/dacili/nswag-client-generation-with-swagger
- Owner: Dacili
- Created: 2022-12-05T15:27:26.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2025-09-25T09:36:45.000Z (9 months ago)
- Last Synced: 2025-09-25T11:34:23.392Z (9 months ago)
- Topics: angular, clientapi, dotnet6, nswag, swagger, swagger-ui
- Language: TypeScript
- Homepage:
- Size: 532 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nswag client generation with Swagger
**Swagger** (https://swagger.io/) offers ability to create client on the frontend side (in our case Angular) to connect with the APIs, so you don't have to create separate service, and to create a separate function for every api function and so on.. And what is also awesome, is that you don't have to create models in your angular app to match the ones from backend, they are created for you as well! In simple, it makes the lives of frontend devs easier.
Note: this code use the base code from this repo https://github.com/Dacili/SignalR, with additions for nswag
How to run this solution:
- *apiSignalR* is the backend project (.Net Core 6) - run it via visual studio
- *frontendSignalRAngular* is the frontend project (Angular 13) - run it via cmd, with ng serve
Steps:
1. You will need to setup the swagger on the backend side. Add in the Program.cs: app.UseSwagger();app.UseSwaggerUI();
The generated **swagger.json** you will be able to find at path: https://localhost:7163/swagger/v1/swagger.json
2. On the frontend side, firstly install the npm pkg: npm i nswag
3. Open the frontend project in cmd, and run: **nswag new**
This will generate the nswag.json file. Leave only part for typescript generation, remove for the csharp.
4. In the nswag.json file change the next things:
"url": "https://localhost:7163/swagger/v1/swagger.json", (normally this would be some deployed place, not localhost)
"className": "BackendMediClient",
"output": "src/app/backend-clientapi-base.ts" (ouput path is very important!)
5. Check the version of runtime in nswag.json "runtime": "NetCore21"
6. Go to cmd, and type **nswag run**
*(make sure that your backend solution is runned)*, otherwise you could get err like this:
Notice it will usually throw some errors, if you have multiple versions of .net on your pc. To fix this run:
**nswag run /runtime:NetCore21**
7. It should succeed. 
8. Check the generated file. 
9. You can extract this command in package.json under scripts like this:
"updateClient": "nswag run /runtime:NetCore21", and then to call it in cmd like: npm run updateClient
10. If you have **multiple backends**, you will need multiple generated client apis.
Copy nswag.json, rename it to some_name.nswag (notice the extension), in our case: nswagNewOne.nswag
Update the nswag.json according to the new backend.
And run it with cmd: nswag run **nswagNewOne.nswag** /runtime:NetCore21
You can do the same, to extract this command in package json as: "updateClient2": "nswag run nswagNewOne.nswag /runtime:NetCore21"
Notice that generated client functions are returning **Promises** as a result. If you want to change that, to return **Observables** instead, change the nswag.json configuration (template from Fetch to Angular)
**"template": "Angular"**
## Now you have generated clients, and they are ready for use! Yaaay
## What if I don't see functions from the API only some models?
Make sure you have these properties set like this:
And then try again, it should fix the issue.
## What if I don't want all controllers to be exported in Angular app?
in ```nswag.json``` you can filter it with: ```?controllerNameFilter=HREVerifyController,LookupController``` at the end of url,
```"url": "https://app.dev.com/Something/InternalApi/swagger/Web.json?controllerNameFilter=HREVerifyController,LookupController",```