Добавление swagger-UI с угловым 10
Как добавить пользовательский интерфейс Swagger в ваше угловое приложение?
Я много раз искал этот вопрос и нашел только одно решение, и оно было сделано с использованием пакета swagger-ui-dist, но в последнем выпуске https://www.npmjs.com/package/swagger-ui говорится, что для одностраничных приложений используйте swagger-ui вместо swagger-ui-dist.
Существует решение добавления этого пакета для реагирования, и оно хорошо объяснено.
Swagger-UI с React — https://swagger.io/blog/api-documentation/building-documentation-portal-swagger-tutorial/
Ответы 1
Я реализовал эту функциональность в своем приложении angular и подумал, что она может быть полезна и другим разработчикам. Я искал его в нескольких местах и читал несколько блогов.
Шаги -
установить swagger пользовательского интерфейса
npm i swagger-uiНастройте для него файл angular.json и CSS-модуль swagger-ui.
"styles": [ "./node_modules/swagger-ui/dist/swagger-ui.css"]
Добавьте оператор импорта swagger-UI в файл component.ts.
import SwaggerUI from 'swagger-ui';Добавьте приведенный ниже код в файл ngOnInit вашего компонента.
// example-swagger-exp.component.ts
ngOnInit() {
SwaggerUI({
domNode: document.getElementById('swagger-ui-item'),
url: 'https://petstore.swagger.io/v2/swagger.json'
});
}
последняя часть этой функциональности, Добавьте приведенный ниже код в HTML-файл вашего компонента.
// swagger-exp.component.html
<div id = "swagger-ui-item"></div>
Примечание. И последнее важное обстоятельство.
Как вы можете добавить свой объект swagger.json/swagger.yaml на шаге 4?
Просто замените параметр «url» на «spec» и добавьте свой объект JSON.
SwaggerUI({
domNode: document.getElementById('api-data'),
spec : your json object
});
Я хотел бы добавить, что стили могут быть включены в стили компонентов (а не в корень проекта) с помощью простого @import "swagger-ui/dist/swagger-ui.css", что также позволяет настроить модуль документации как лениво загруженный