How to Embed Swagger UI into Angular
<p>Swagger UI is a popular tool that allows you to visualize and interact with APIs defined using the OpenAPI Specification (OAS). Integrating Swagger UI into an Angular application can greatly enhance the developer experience by providing a user-friendly interface to explore and test APIs. In this blog post, we’ll walk through the steps to embed Swagger UI into an Angular project.</p>
<p>Prerequisites:</p>
<ol>
<li>Basic understanding of Angular.</li>
<li>An existing Angular project.</li>
</ol>
<p><strong>Install Swagger UI Package</strong></p>
<pre>
npm i swagger-ui-dist</pre>
<p>This module, <code>swagger-ui-dist</code>, exposes Swagger-UI's entire dist folder as a dependency-free npm module. Use <code>swagger-ui</code> instead, if you'd like to have npm install dependencies for you.</p>
<p><code>SwaggerUIBundle</code> and <code>SwaggerUIStandalonePreset</code> can be imported:</p>
<pre>
import { SwaggerUIBundle, SwaggerUIStandalonePreset } from "swagger-ui-dist"</pre>
<p>Add the code in ngOninit section</p>
<pre>
SwaggerUIBundle({
urls: [
{
name: 'V1',
url: 'https://fakerestapi.azurewebsites.net/swagger/v1/swagger.json'
},
{
name: 'V2',
url: 'https://petstore.swagger.io/v2/swagger.json'
}
],
domNode: document.getElementById('swagger-ui'),
deepLinking: true,
presets: [SwaggerUIBundle['presets'].apis, SwaggerUIStandalonePreset],
layout: 'StandaloneLayout'
});</pre>
<p>Put this code to html file<br />
<code><div id="swagger-ui"></div></code></p>
<p>Link css in angular.json file styles section<br />
<code>"node_modules/swagger-ui-dist/swagger-ui.css"</code></p>
<p><strong>OUTPUT</strong></p>
<p><img alt="" src="https://miro.medium.com/v2/resize:fit:770/1*K5ELYV7t-aIMtmiSmPP34Q.png" style="height:343px; width:700px" /></p>
<p><strong>Conclusion</strong></p>
<p>Integrating Swagger UI into your Angular application provides a user-friendly way to visualize and interact with your APIs. By following these steps, you can seamlessly embed Swagger UI and enhance the developer experience when working with your APIs. Whether you’re building internal tools or exposing APIs to third-party developers, Swagger UI within Angular can streamline the process and improve documentation and testing.</p>
<p><a href="https://blog.stackademic.com/how-to-embed-swagger-ui-into-angular-50e89f911447">Click Here</a></p>