向Angular项目添加Swagger编辑器

Question

我想把Swagger UI和Swagger Editor插入我的Angular项目中，使其看起来像这样：http://editor.swagger.io/?docExpansion=none 感谢以下说明，我已经能够将Swagger UI添加到我的Angular项目中：https://github.com/agoncal/swagger-ui-angular6 目前还缺少Swagger编辑器，用户可以在其中编辑OpenAPI规范（请参见第一个链接的左侧）。

我的应用程序的目标状态应该是加载OpenAPI规范，用户可以通过Swagger编辑器进行编辑，同时也能够通过视觉概述了解API的功能（缺失部分），基本上与第一个链接的功能相同。

所以我的问题是，如何将Swagger编辑器实现到我的Angular项目中？我在互联网上没有找到任何相关信息。

- InformatikBabo

---

看看这个能否帮到你：https://github.com/swagger-api/swagger-editor/issues/1689 - Helen

@Helen 感谢您的答案。不幸的是，我遇到了以下错误： ERROR in ./node_modules/yaml-js/lib/yaml.js 无法找到模块: 错误: 无法在'C:\XYZ\node_modules\yaml-js\lib'中解析 'fs' - InformatikBabo

Answer 1

你可以使用swagger-editor-dist包来实现这一点。

npm i swagger-editor-dist --save

安装依赖后，您需要包含所需的脚本和CSS文件。您可以在 angular.json 文件中执行此操作。

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

下一步是准备您想要放置编辑器的HTML。选择您的任何组件并添加

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

最后一步是将编辑器实例化到该div中。在同一个组件中，添加以下内容。

declare const SwaggerEditorBundle: any;
declare const SwaggerEditorStandalonePreset: any;
....
....
ngOnInit(): void {
  const editor = SwaggerEditorBundle({
    dom_id: '#swagger-editor',
    layout: 'StandaloneLayout',
    presets: [
      SwaggerEditorStandalonePreset
    ],
    url: 'http://rackerlabs.github.io/wadl2swagger/openstack/swagger/dbaas.json'
  });
}

我还为此创建了一个示例应用程序。

请随意查看我的Github Repo - Swagger Editor Angular 8。

- Dino

---

我也做了同样的事情，但出现了错误“SwaggerEditorBundle未定义”。你能帮我吗？ - Ilya Berdzenishvili

@Dino，即使在你的GitHub示例中也不能正常工作。你能帮忙吗？ - HariHaran

我也遇到了“SwaggerEditorBundle未定义”的控制台错误。 - Rajantha Fernando

重启ng serve后，问题得到解决。 - Rajantha Fernando

Answer 2

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

declare const SwaggerEditorBundle: any;
declare const SwaggerEditorStandalonePreset: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  title = 'angular-swagger-editor';

  ngOnInit(): void {

    const editor = SwaggerEditorBundle({
      dom_id: '#swagger-editor',
      layout: 'StandaloneLayout',
      presets: [
        SwaggerEditorStandalonePreset
      ],
      url: 'http://rackerlabs.github.io/wadl2swagger/openstack/swagger/dbaas.json'
    });
  }

}

- user2982230