angular - 将 Swagger UI 添加到 Angular 应用程序

Question

有没有什么好的方法可以添加Swagger UI到 Angular 应用程序而不需要太多杂草？

我想添加对托管在不同站点上的 API 的引用，因此我只需要 UI 元素来引用文档。

我找到了一个名为 Swangular-Components 的包裹，但它似乎弄乱了我的 index.d.ts 文件。我认为这样的解决方案对我的情况来说是最简单的。

Answer 1

我为此苦苦挣扎了无数次，但最终找到了某种解决方案，主要是因为我偶然发现了将 swagger-editor 添加到 Angular 项目 (https://stackoverflow.com/a/57431950/5641007) 的问题。不得不为 swagger ui 稍微调整一下，但最终让它工作了。

安装 swagger-ui-dist

npm install swagger-ui-dist --save

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

// 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