将Swagger UI添加到Angular App [英] Adding Swagger UI to Angular App

问题描述

是否存在添加 Swagger用户界面在没有太多杂草的情况下进入Angular应用程序?

Is there a good way to add the Swagger UI to an Angular app without getting too much in the weeds?

我想添加对托管在其他站点上的API的引用，所以我所需要的只是UI元素来引用文档.

I'd like to add a reference to an API which is hosted on a different site, so all I need is the UI elements to reference the docs.

我找到了一个名为 Swangular-Components 的程序包，但它似乎弄乱了我的索引. d.ts文件.我认为，对于我的情况，这样的解决方案将是最简单的.

I found a package called Swangular-Components, but it seems to mess up my index.d.ts file. A solution like that would be the simplest for my situation, I think.

推荐答案

我为此苦苦挣扎了很多次，但最终找到了解决方案，主要是因为我偶然发现了在角项目中添加swagger-editor的问题( https://stackoverflow.com/a/57431950/5641007 ).不得不对swagger ui进行一些调整，但最终使其正常工作.

I've struggled with this numerous times but finally figured out somewhat of a solution mainly because I stumbled across this issue of adding swagger-editor to an angular project (https://stackoverflow.com/a/57431950/5641007). Had to tweak it a bit for swagger ui but ultimately got it working.

安装swagger-ui-dist

Install swagger-ui-dist

npm install swagger-ui-dist --save

配置angular.json文件和swagger-ui所需的组件.

Configure the angular.json file and desired component for swagger-ui.

// angular.json

"styles": [
    "node_modules/swagger-ui-dist/swagger-ui.css",
    "src/styles.css"
],
"scripts": [
    "node_modules/swagger-ui-dist/swagger-ui-bundle.js",
    "node_modules/swagger-ui-dist/swagger-ui-standalone-preset.js"
]

// component.ts

import { Component, OnInit } from '@angular/core';

declare const SwaggerUIBundle: any;

@Component({
  selector: 'app-swagger-ui',
  templateUrl: './swagger-ui.component.html',
  styleUrls: ['./swagger-ui.component.css']
})
export class SwaggerUiComponent implements OnInit {

  ngOnInit(): void {
    const ui = SwaggerUIBundle({
      dom_id: '#swagger-ui',
      layout: 'BaseLayout',
      presets: [
        SwaggerUIBundle.presets.apis,
        SwaggerUIBundle.SwaggerUIStandalonePreset
      ],
      url: 'https://petstore.swagger.io/v2/swagger.json',
      docExpansion: 'none',
      operationsSorter: 'alpha'
    });
  }
}

// component.html

<div id="swagger-ui"></div>

Github回购示例应用程序: https://github.com/ostranme/angular-swagger-ui-example

Github repo for example app: https://github.com/ostranme/angular-swagger-ui-example

这篇关于将Swagger UI添加到Angular App的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！