Adding swagger-UI with angular 10

Question

How to add Swagger UI in your angular application?

I have searched numerous times for this question and found only one solution is there and It was done using swagger-ui-dist package but in the latest release of the https://www.npmjs.com/package/swagger-ui tells that use swagger-ui instead of swagger-ui-dist for single-page applications.

There is a solution of adding this package to react and it is well explained.

Swagger-UI with React - https://swagger.io/blog/api-documentation/building-documentation-portal-swagger-tutorial/

Ankit Kumawat · Accepted Answer · 2020-12-23 04:36:44Z

13

I implemented this functionality in my angular application and thought that it can be helpful for other developers as well. I have searched it at multiple places and read multiple blogs.

Steps -

install swagger-ui

npm i swagger-ui
Configure the angular.json file and swagger-ui CSS module to it.

  "styles": [ "./node_modules/swagger-ui/dist/swagger-ui.css"]

Add the import statement of swagger-UI to your component.ts file.

import SwaggerUI from 'swagger-ui';
Add the below code in your component's ngOnInit.

// example-swagger-exp.component.ts
ngOnInit() {
     SwaggerUI({
         domNode: document.getElementById('swagger-ui-item'),
         url: 'https://petstore.swagger.io/v2/swagger.json'
       });
 }

last part of this functionality, Add the below code to the HTML file of your component

// swagger-exp.component.html
```
<div id="swagger-ui-item"></div>
```

Note - One last important thing,

How can you add your swagger.json/swagger.yaml object in step 4?

Simply replace the 'url' parameter with 'spec' and add your JSON object.

      SwaggerUI({
          domNode: document.getElementById('api-data'),
          spec : your json object
        });

answered Dec 23, 2020 at 4:36

Ankit Kumawat

4516 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

blazkovicz Over a year ago

I would like to add that styles could be included into component styles (not project root) with simple @import "swagger-ui/dist/swagger-ui.css" this allows also to setup the documentation module as lazy loaded

Camille Over a year ago

Nice comment @blazkovicz. It works well importing css direclty in Angular component who calls SwaggerUI({...}). Only one more change to make it work on my side : add encapsulation: ViewEncapsulation.None on Angular component definition.

Collectives™ on Stack Overflow

Adding swagger-UI with angular 10

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related