How to display Swagger JSON file in my MEAN stack project using swagger-ui module?

Question

I'm new to NodeJS and AngularJS so I might be approaching this completely wrong but worth asking...

I'm trying to use the swagger-ui Node module to display my API's documentation in a Swagger-ish style with interactivity.

I want to do this within my NodeJS app by passing in my own Swagger JSON file (hosted in public/assets/my-swagger.json).

I'm assuming I can do something like this:

angular.module('SwaggerCtrl', []).controller('SwaggerController', function($scope) {

    $scope.swagger = new function() {
        var swaggerUi = new SwaggerUi({
            url: '../../assets/my-swagger.json',
            dom_id: "swagger-ui-container"
        });

        swaggerUi.load();
    };

});

Which is taken from https://www.npmjs.com/package/swagger-ui#swaggerui.

And then in my swagger.html I would do something like this:

<div class="jumbotron text-center">
    <h1>Swagger</h1>

    <p>{{ swagger }}</p>

    <div id="swagger-ui-container"></div>
</div>

However, when I go to http://localhost:8080/swagger, I get ReferenceError: SwaggerUi is not defined error message on my console.

I'm trying to figure out how to call the swaggerUi.load() so that it loads the my-swagger.json file when the user goes to http://localhost:8080/swagger.

I also looked at https://www.npmjs.com/package/swagger-ui-middleware but it's loading the default Petstore API found in the node_modules/swagger-ui/dist directory.

Answer 1

I'm new to this too and have used those two modules: swagger-jsdoc (it generates the swagger.json from comments in your node.js file and swagger-ui-express to display the information.

Look at the doc for the later, you might find the answer to your question.