swagger-ui: Unable to initialize SwaggerUIBundle in Angular 4 project

Hello @asakalou, I found a solution if you want to integrate swagger-ui on Angular 4. (Thanks to @shockey for your comment)

Firstly, go to polyfills.ts and add this before the import of zone.js :

import {SwaggerUIBundle, SwaggerUIStandalonePreset} from 'swagger-ui-dist';

export const swaggerUIBundle = SwaggerUIBundle;
export const swaggerUIStandalonePreset = SwaggerUIStandalonePreset;`

Then, go to your swagger.component.ts and use the const exported like this :

import { swaggerUIBundle, swaggerUIStandalonePreset } from '../../polyfills';

ngAfterViewInit() {
    const ui = swaggerUIBundle({
      url: 'http://petstore.swagger.io/v2/swagger.json',
      domNode: this.el.nativeElement.querySelector('.swagger-container'),
      deepLinking: true,
      presets: [
        swaggerUIBundle.presets.apis,
        swaggerUIStandalonePreset
      ],
      plugins: [
        swaggerUIBundle.plugins.DownloadUrl
      ],
      layout: 'StandaloneLayout'
    });
}

Finally, add the CSS of Swagger UI in .angular-cli.json :

"styles": [
    "../node_modules/swagger-ui-dist/swagger-ui.css",
    "styles.scss"
]

I would also recommend against using the swagger-ui-dist package in Angular. It causes you bundle sizes to be much larger than they need to be. I was able to use the normal swagger-ui package in an Angular 5 project by doing a simple const SwaggerUI = require("swagger-ui"); in my swagger component. For more info, check out this issue

Hey @Brentei,

My solution to the CSS issue was to use angular’s View Encapsulation feature. Most browsers don’t yet support Native encapsulation, but Emulated worked OK for me in this scenario.

So in my Swagger component’s CSS file I imported the swagger CSS: @import "~swagger-ui/dist/swagger-ui.css

And in my component that uses bootstrap: @import "~bootstrap/dist/css/bootstrap.min.css";

This obviously isn’t a great solution if you want to use bootstrap in multiple components, but it worked for me.

Got this working in my angular app, but the CSS isn’t quite working properly as you can see in this screenshot.

As you can see everything is right justified, the authorize lock is missing, and the carrot for expanding the section is also missing. Any ideas @lauthieb or @asakalou ? Did you run into this issue?

Thanks

Hi everyone, I just fixed this in a PR.

Basically, I changed our internal polyfill to only take effect when there’s no Promise implementation at all (see the diff here).

It’s a naive solution, but it should work well for this use case. The fix should go live tonight when we do our weekly release.

Thanks @asakalou & @lauthieb! Please let me know if there are any lingering issues with this.