Estoy tratando de usar SwaggerUI en un proyecto angular2 con TypeScript. SwaggerUI no parece tener definiciones de TypeScript. Así que estoy tratando de usar el archivo JavaScript.
Este proyecto se crea utilizando la plantilla ASP.Net Core SPA Services. He agregado todos los archivos SwaggerUI de la carpeta "dist" a la carpeta "wwwroot" en mi proyecto.
Hice referencia al archivo JavaScript de SwaggerUI de la carpeta "wwwroot" de mi proyecto en _Layout.cshtml (página de vista) al igual que el archivo javascript normal y tratando de usar el objeto ShaggerUIBundle.
_Diseño.cshtml
<script src="/swagger-ui/swagger-ui-bundle.js"> </script> <script src="/swagger-ui/swagger-ui-standalone-preset.js"> </script>Swagger.Component.ts
//my import statements export class SwaggerComponent implements OnInit { SwaggerUIBundle:any; }Ahora SwaggerUIBundle se rellena con el objeto que espero. Pero no puedo usar esto en ninguna parte del componente.
ngOnInit(): void { (<any>window).ui = this.SwaggerUIBundle({ url: "<url>", dom_id: '#swagger-ui', presets: [ this.SwaggerUIBundle.presets.apis ], plugins: [ this.SwaggerUIBundle.plugins.DownloadUrl ], layout: "StandaloneLayout" }) }this.SwaggerUIBundle siempre es nulo.
Creo que esto se debe al hecho de que en realidad no se asigna ningún valor a SwaggerUIBundle, aunque se ha rellenado con un objeto.
SwaggerUIBundle es una función. Probé varias formas de asignar esta función como se sugiere aquí y aquí .
Intenté importar en lugar de hacer referencia al archivo.
import SwaggerUIBundle from 'path from root of the app'Como la carpeta "wwwroot" es una carpeta virtual, que representa la carpeta raíz de la aplicación, cuando intento importar usando el compilador TypeScript "importar", arroja un error de que no puede encontrar el archivo.
Luego moví todos los archivos relacionados con SwaggerUI a la carpeta del componente angular respectivo e intenté importar desde allí. Entonces me sale este error.
'allowJs no está establecido.
He agregado 'allowJs' a tsconfig. Aún así, el error no desaparecerá.
"compilerOptions": { "moduleResolution": "node", "target": "es5", "sourceMap": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, "skipDefaultLibCheck": true, "lib": [ "es6", "dom" ], "types": [ "node" ], "allowJs": true }Cualquier ayuda es apreciada.
this se refiere a una instancia de la clase envolvente, no al entorno léxico del módulo que define la clase.
En lugar de utilizar this importación y hacer referencia a SwaggerUIBundle directamente como en
import SwaggerUIBundle from 'path/to/swagger-ui/dist/bundle.js'; Además, en lugar de inicializarlo en ngOnInit , un evento de ciclo de vida por componente, es probable que desee hacerlo una vez
import SwaggerUIBundle from 'path/to/swagger-ui/dist/bundle.js'; SwaggerUIBundle({ url: "<url>", dom_id: '#swagger-ui', presets: [ SwaggerUIBundle.presets.apis ], plugins: [ SwaggerUIBundle.plugins.DownloadUrl ], layout: "StandaloneLayout" });Este tipo de lógica debe extraerse en una función dedicada o un servicio para mantener sus vistas limpias.
Pruebe el siguiente método para incluir el archivo javascript,
componente.ts
@Component({ selector: 'test', template: ` <div class="row"> Loading... </div> `, styles: [] }) export class TestComponent { public ngOnInit() { // Pass js file path this.loadScript('src/assets/js/myCropper.js'); } public loadScript(url) { console.log('preparing to load...') let js = document.createElement('script'); js.src = url; js.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(node); } }