Unable to initialize SwaggerUIBundle in Angular 4 project

Trying to use swagger-ui-dist inside angular4 application. Initialization of SwaggerUIBundle produces an error (promise is overwritten error is thrown from zone.js).

Stacktrace:

swagger-ui-bundle.js:67 Unhandled promise rejection Error: Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.
Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)
    at Function.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.assertZonePatched (zone.js:44)
    at new NgZone (core.es5.js:3775)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleFactoryWithZone (core.es5.js:4492)
    at core.es5.js:4537
    at swagger-ui-bundle.js:67
    at swagger-ui-bundle.js:67
    at MutationObserver.f (swagger-ui-bundle.js:67)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.

Please check repository created to reproduce an issue: https://github.com/asakalou/swagger-angular4-issue

Please check swagger component at https://github.com/asakalou/swagger-angular4-issue/blob/master/src/app/swagger/swagger.component.ts

Q	A
Bug or feature request?	Bug
Which Swagger/OpenAPI version?
Which Swagger-UI version?	swagger-ui-dist@3.1.5
How did you install Swagger-UI?	via npm
Which broswer & version?	Chrome Version 60.0.3112.90 (Official Build) (64-bit)
Which operating system?	macOS Sierra 10.12.6

Configuration (browser query string, constructor, config.yaml)

http://petstore.swagger.io/v2/swagger.json

Expected Behavior

No error, should render swagger ui.

Current Behavior

Error during initializing SwaggerUIBundle inside angular4 application.

Context

We are trying to render swagger ui inside our application to provide customers an interface for our API access.

[lauthieb]

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"
]

[mckennajones]

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