How to run Swagger on angular 5?

Question

How to run swagger on my UI ? Tried like this:

import  * as SwaggerUI from 'swagger-ui';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})

export class HomeComponent implements OnInit {
  constructor(private el: ElementRef) {

    const swaggerUi = new SwaggerUI({
      url: 'http://petstore.swagger.io/v2/swagger.json',
      domNode: this.el.nativeElement.querySelector('.swagger-container'),
      deepLinking: true,
      presets: [
        SwaggerUI.presets.apis

      ],
    });

  //  var swaggerUi = SwaggerUI({
  //  url: 'http://petstore.swagger.io/v2/swagger.json',
  //   dom_id: 'swagger-ui-container'
  //});
  
    swaggerUi.load();
  }

error : swaggerUi.load is not a function I don't know really how to show my yaml/json in angular Help please

score 0 · Answer 1 · answered Feb 11 '19 at 13:11

I tried using 'swagger-ui', 'swagger-ui-dist' and 'swagger-client' in Angular 5/6 but could not able to render the swagger UI. Though I was able to innitialize the swagger object using 'swagger-client'.

Then I tried swangular-component

Though it was throwing an error which i solved by adding below code to tsconfig.json:

    "baseUrl": "",
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ]
    },

into compilerOptions object.

How to run Swagger on angular 5?

1 Answers1