Swagger-ui: Angular5: ERROR TypeError: Cannot read property 'presets' of undefined

[yulogs]

I want plugin to my angular5 project, but cound not success,
I add dependencies to package.json like this: "swagger-ui": "^3.12.0",

1. I get a project: https://github.com/shockey/swagger-ui-angular4
2. Change angualr4 to angualr5

But it has this error:
AppComponent.html:10 ERROR TypeError: Cannot read property 'presets' of undefined

Why this error? Thank you

[mckennajones]

Also running into the same error...

[yulogs]

I use this version is ok now, it use "swagger-ui-dist"
https://github.com/leantony/swagger-ui-angular-4

but I don't know why ...

[mckennajones]

Using swagger-ui-dist works fine in angular 5 for me as well.

[shockey]

Hey everyone - not sure what's going on with Angular 5, it looks like something in the Angular build chain is breaking imports.

I'm going to continue looking at this, but do note that swagger-ui-dist is going to result in a significantly larger bundle for your application, so try to avoid using it in production.

[mckennajones]

Hey @shockey,

Thanks for looking into this, I really appreciate it. I am using swagger-ui-dist for now, but would like to move away from it for the reason you mentioned.

[shockey]

@mckennajones no worries!

I've isolated the problem: I believe the Angular compiler is handling ES6 modules differently in version 5:

// Unminified code

import SwaggerUI from "swagger-ui"

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

export class AppComponent implements AfterViewInit {
  ngAfterViewInit() {
    const ui = SwaggerUI({
      url: 'http://petstore.swagger.io/v2/swagger.json',
      domNode: this.el.nativeElement.querySelector('#ui'),
      deepLinking: true,
      presets: [
        SwaggerUI.presets.apis
      ],
    });
  }

}

// Minified code
var swagger_ui_1 = __webpack_require__("./node_modules/swagger-ui/dist/swagger-ui.js");
var AppComponent = /** @class */ (function () {
    function AppComponent(el) {
        this.el = el;
    }
    AppComponent.prototype.ngAfterViewInit = function () {
        var ui = swagger_ui_1.default({
            url: 'http://petstore.swagger.io/v2/swagger.json',
            domNode: this.el.nativeElement.querySelector('#ui'),
            deepLinking: true,
            presets: [
                swagger_ui_1.default.presets.apis
            ],
        });
    };
    AppComponent = __decorate([
        core_1.Component({
            selector: 'app-root',
            template: __webpack_require__("./src/app/app.component.html"),
            styles: [__webpack_require__("./src/app/app.component.css")]
        })
        ,
        __metadata("design:paramtypes", [core_1.ElementRef])
    ], AppComponent);
    return AppComponent;
}());
exports.AppComponent = AppComponent;

Note the swagger_ui_1.default: Angular 5's compiler (I assume it's the compiler...) is inferring that the ES6 module import needs to reach into the default property. Our module doesn't do that though: our top-level file exports a function directly using CommonJS syntax:

https://github.com/swagger-api/swagger-ui/blob/master/src/core/index.js#L17

[shockey]

I'm inclined to say that this is Angular's fault, since no one has reported any problems with other standard build pipelines... but I'll need to look over all of our Webpack stuff that affects our UMD build.

In the meantime.... doing a const SwaggerUI = require("swagger-ui") instead of using import syntax will likely mitigate the problem for you, @mckennajones & @yulogs. Please let me know if it does!

[mckennajones]

Thanks for the fast and detailed response. That's a very interesting find. It's puzzling to me that the compiler would do that, but what do I know...

Anyways, your suggestion of requiring instead of importing swagger-ui is indeed working for me. Cheers.

[shockey]

Closing due to inactivity.

This is simply to keep our issue tracker clean - feel free to comment if there are any further thoughts or concerns, and we'll be happy to reopen this issue.

[lock[bot]]

Locking due to inactivity.

This is done to avoid resurrecting old issues and bumping long threads with new, possibly unrelated content.

If you think you're experiencing something similar to what you've found here: please open a new issue, follow the template, and reference this issue in your report.

Thanks!