NSwag Tutorial: Generate an Angular TypeScript client from an existing ASP.NET Web API web assembly

October 1, 2016, (updated on July 6, 2017), 12 comments, Software Development

This tutorial shows how to generate an Angular TypeScript client with the NSwag Swagger toolchain. You can use this client in your Angular 2 SPA (single-page application) to consume the web services of an existing Web API project. The metadata for the client generator will be loaded from an existing .NET assembly which contains your Web API controller classes. The NSwag project provides many other TypeScript templates (for targeting other JS frameworks) and also a C# client generator.

Introduction video:

For ASP.NET Core projects, I recommend to use the middleware to generate the Swagger spec (there are some problems loading .NET Core assemblies via reflection). If you want to try to load your .NET Core assembly via reflection, you also need to specify a reference path.

1. Configure the input

Let’s install the tooling and create a new base project:

  1. Install NSwagStudio.
  2. Start NSwagStudio, create a new .nswag document and select Web API Assembly as input.
  3. Select an assembly (.dll) containing your Web API controllers from the web host project’s build output (all required assemblies must be available).
  4. Select the Web.config of your Web API host project.
  1. Now click on the “Load Assemblies” button which searches for controllers in the selected assembly (or assemblies).
  2. Select the controller classes for which you want to generate a TypeScript client:

2. Configure the output

The client generator can be configured in many ways – we will mostly use the defaults:

  1. On the right side of the window you can see the available output tabs: Select “TypeScript Client”.
  2. In the settings, change the Template setting to Angular2:

3. Generate client code

The next step is to finally generate code:

  1. Click on “Generate Outputs” and shortly the generated TypeScript code appears
  2. Copy the generated code into your Angular 2 project and start accessing your Web API from Angular 2

But there is always more: You can extend the generated TypeScript classes with custom code

Tags: , , , , ,

12 responses to “NSwag Tutorial: Generate an Angular TypeScript client from an existing ASP.NET Web API web assembly”

  1. […] API. This really mattered on one of my client’s project which used Swagger and NSwagStudio to create Angular 6 code to match the Web API. NSwagStudio was amazingly useful, as it automates the creation of the Angular […]

  2. Lily says:

    Hi Rico, Great tutorial, thank you for your post. I followed the steps and made it work perfectly for version 10.*, but after I upgraded NSwag to 11.2, the following line in startup wouldn’t work anymore, any idea?

    app.UseSwaggerUi(typeof(Startup).GetTypeInfo().Assembly, new SwaggerUiOwinSettings());

    Error message: The type or namespace name ‘SwaggerUiOwinSettings’ cannot found I have this using NSwag.AspNetCore; do I need to add other reference? Thanks, Lily

  3. 3615 says:

    Hi, seems very interesting! But is it possible to generate client using C# code, not the NSwagStudio?

    • Rico Suter says:

      Yes, this is possible. See: SwaggerToTypeScriptClientGenerator

      • 3615 says:

        Thank you, it works great! I’ve managed to generate a typescript proxy for angular2 that covers the gap between client and server side.

        Just some small notes: 1) in the documentation page from your link class names are not corresponding to real onces, it’s a bit confusing. 2) That example set’s a class name, but since I had 2 controllers, both were generated with the same name in typescript, that again was a bit confusing.

        • Rico Suter says:

          1) Which link and what class names do you mean (DTO or client classes)? Can you create an issue on GitHub with a sample?

          2) If you have multiple controllers choose “MultipleClientsFromOperationId” as Operation Generation Mode and use the “{controller}” placeholder in your class name so that each client has a different class name.

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

This site uses Akismet to reduce spam. Learn how your comment data is processed.