Un problema que hemos detectado en AKS publicando una aplicación Angular con NGINX a la hora de servir el contenido estático es que se bloquea el acceso a los recursos css y javascript produciéndose los siguientes errores:
Para los css
El recurso de “https://angular-spa.es/styles.c5xxx.css” fue bloqueado debido a una discordancia del tipo MIME (“text/html”) (X-Content-Type-Options: nosniff).
Para los js
Se bloqueó la carga de un módulo de “https://angular-spa.es/polyfills-es2015.ca64xxxx.js” debido a un tipo MIME no permitido (“text/html”).
El problema, parece estar relacionado con la definición de la etiqueta type, investigando por Internet y mirando la pagina oficial de Angular en GitHub se encuentran detalles de otros usuarios similares: «type=’module'» en Angular 8, en lugar de usar el «type=’text/javascript'», como podéis leer en los comentarios de GitHub.
Ref: https://github.com/angular/angular/issues/30835
Como solucionarlo para css
La solución para los css, en nuestro caso ha sido cambiar la forma del link en el archivo de index.html:
#indicar ruta raiz <base href="/"> #con esta definición se produce el error <link rel="stylesheet" href="styles.css" type="text/css"> #con esta definición se arregla el error <link href="styles.css" type="text/css">
Aunque pueden existir varias alternativas en función de diferentes casos como explican aquí: https://github.com/froala/angular-froala/issues/170
Como solucionarlo para js
La solución para los Javascript, es añadir dentro de la configuración de NGINX un location para js, que encontramos en el repo de GitHub de Alex Arriaga:
# REALLY important for JavaScript modules (type=»module») to work as expected!!!location ~ \.js {add_header Content-Type text/javascript;}
Ref: https://gist.github.com/alex-arriaga/da5cf14bd96dd070323b109f47714f98#file-angular-i18n-example-com-L27
Espero que os sea de utilidad.
Santimacnet 