angular 集成 swaggerui

效果预览图(这个是嵌入菜单里面的)：

官方api: https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md

官方示例：https://github.com/swagger-api/swagger-ui/blob/master/dist/index.html

json文件： http://editor.swagger.io/#   

代码：                                                                                                                                                                                                       先引入：npm i swagger-ui  和  npm i swagger-ui-dist ---》支持swagger   |  npm i path --->打包需要，是absolutePath.js的依赖

       然后需要在文件里面配置相关css引用路径

TS:

const SwaggerUIBundle = require('swagger-ui-dist').SwaggerUIBundle;
const token = session.getItem('token');
const ui = SwaggerUIBundle({
    // url: 'swagger.json', 
    urls: [
        {url: 'swagger.json', name: 'test1'}
    ],
    dom_id: '#swaggerUI',
    supportedSubmitMethods: [], // 不可以 try it out
    deepLinking: false,   // 去掉深层链接，怎么try it out 都是一级路径
    validatorUrl: null,  // 去掉认证链接，也就是最下面会有一个绿色的图片的东东
    filter: true,   // 显示查询框框
    showRequestHeaders: true, 
    showMutatedRequest: true,  // 启用拦截器的返回
    // 请求拦截器
    requestInterceptor: (request) => {
        // 因为我的接口的host不对，所以需要在这里拦截请求，重新拼接请求路径
        const url = request.url; 
        if (!url.includes('swagger')) {
            const hostBefore = url.split('/');
            console.log(hostBefore ,  '拿到host并改变' );
            url_ = '新请求路径' ;
            request.url = url_;
        }
        request.headers.Authorization = token; // 请求头添加token
        return request;
    },
    responseInterceptor: (response) => {
        return response;
    },
    presets: [
        SwaggerUIBundle.presets.apis,
        SwaggerUIStandalonePreset,
    ],
    plugins: [
        SwaggerUIBundle.plugins.DownloadUrl
    ],
    layout: 'StandaloneLayout',
});

HTML:

<div id="swaggerUI"></div>