Resolviendo el 'token inesperado' <' en la implementación de Angular y .NET 8

Cuando la implementación funciona en depuración pero falla en IIS

¿Alguna vez se ha enfrentado a la frustración de ver que su aplicación funciona perfectamente en modo de depuración pero falla estrepitosamente cuando se implementa? 😟 Esto puede ser particularmente molesto al migrar un proyecto, como experimenté recientemente al mover mi aplicación Angular y .NET de .NET Core 2.1 a .NET 8. El problema parecía críptico: un 'Error de sintaxis no detectado: token inesperado '

¿La parte extraña? La inspección de los archivos de implementación reveló que algunos scripts (como runtime, polyfills y main) se entregaban como archivos HTML en lugar de JavaScript. Este comportamiento me dejó rascándome la cabeza porque la carpeta local `dist` mostraba el formato JS correcto. Sin embargo, el despliegue del IIS presentó un panorama muy diferente.

Como desarrollador, encontrar tales inconsistencias es como resolver un misterio en el que cada pista abre otra pregunta confusa. Verifiqué dos veces las rutas, los comandos y las configuraciones, pero no pude identificar la causa de inmediato. Con los plazos acercándose, resolver este problema se convirtió en una prioridad. 🕒

En esta publicación, profundizaré en la causa raíz de este problema, compartiré las lecciones que aprendí durante la resolución de problemas y lo guiaré para resolverlo de manera efectiva. Si te has encontrado con una situación similar, mantente atento: ¡te prometo que no estás solo en este viaje!

Desmitificando los errores de implementación en aplicaciones Angular y .NET

En los scripts proporcionados anteriormente, cada solución se centra en un aspecto específico de la resolución de problemas de implementación en un entorno Angular y .NET. El archivo de configuración de IIS utilizando el web.config es crucial para resolver discrepancias de tipos MIME. Al asignar explícitamente extensiones de archivos como `.js` a su tipo MIME adecuado (aplicación/javascript), IIS sabe cómo entregar correctamente estos archivos a los navegadores. Esto evita que aparezca el "token inesperado".

El Comando de construcción angular (ng construir --prod) garantiza que la aplicación esté optimizada para la producción. El parámetro `--output-hashing=all` codifica los nombres de archivos, lo que permite a los navegadores almacenar archivos en caché sin utilizar accidentalmente versiones obsoletas. Esto es particularmente importante en implementaciones del mundo real donde los usuarios vuelven a visitar la aplicación con frecuencia. Al configurar `baseHref` y `deployUrl` en `angular.json`, garantizamos que el enrutamiento y la carga de activos funcionen sin problemas incluso cuando estén alojados en subdirectorios o CDN. Estos pasos hacen que la aplicación sea resistente a los desafíos de implementación comunes, mejorando tanto la experiencia del usuario como la confiabilidad.

El script Node.js proporcionado anteriormente agrega otra capa de depuración al escanear el directorio `dist` para confirmar la integridad de los archivos. Usando comandos como `fs.readdirSync` y `mime.lookup`, el script verifica que cada archivo tenga el tipo MIME correcto antes de la implementación. Este paso proactivo ayuda a detectar posibles errores antes de que ocurran en producción, lo que ahorra tiempo y reduce la frustración. Por ejemplo, durante una de mis implementaciones, este script me ayudó a darme cuenta de que un problema de configuración había provocado que los archivos JSON se entregaran con el tipo MIME incorrecto. 🔍

Finalmente, el script de prueba Jest garantiza la validación automatizada de aspectos clave de implementación. Comprueba la existencia de archivos críticos como `runtime.js` y `main.js` en la carpeta `dist`. Esto evita errores que se pasan por alto durante la implementación, especialmente en entornos de equipo donde participan varios desarrolladores. Al incorporar dichas pruebas, puede implementar su aplicación con confianza sabiendo que ha sido validada exhaustivamente. Estas soluciones, cuando se utilizan juntas, crean un proceso sólido para resolver los desafíos de implementación y garantizar lanzamientos de producción sin problemas.

<!-- web.config solution to fix MIME type issues in IIS -->
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".*" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".js" mimeType="application/javascript" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
  </system.webServer>
</configuration>

// Angular CLI commands to rebuild the application
ng build --prod --output-hashing=all
// Ensure deployment paths in angular.json are set correctly
{
  "outputPath": "dist/my-app",
  "baseHref": "/",
  "deployUrl": "/"
}
// Copy contents of dist folder to IIS hosted directory

// Node.js script to check MIME types of files in the dist folder
const fs = require('fs');
const path = require('path');
const mime = require('mime-types');
// Directory to check
const distDir = path.join(__dirname, 'dist');
// Function to validate file types
function validateFiles(dir) {
  fs.readdirSync(dir).forEach(file => {
    const fullPath = path.join(dir, file);
    if (fs.lstatSync(fullPath).isDirectory()) {
      validateFiles(fullPath);
    } else {
      const mimeType = mime.lookup(fullPath);
      console.log(`File: ${file}, MIME Type: ${mimeType}`);
    }
  });
}
validateFiles(distDir);

// Jest test to validate Angular dist folder integrity
const fs = require('fs');
const path = require('path');
test('All JavaScript files should exist and be served correctly', () => {
  const distDir = path.join(__dirname, 'dist');
  const requiredFiles = ['runtime.js', 'polyfills.js', 'main.js'];
  requiredFiles.forEach(file => {
    const filePath = path.join(distDir, file);
    expect(fs.existsSync(filePath)).toBe(true);
  });
});

Comprender la importancia de la configuración de archivos estáticos en la implementación

Un aspecto crítico que a menudo se pasa por alto durante la implementación es la configuración adecuada del manejo de archivos estáticos. En el caso de aplicaciones Angular y .NET, los activos estáticos, como archivos JavaScript y CSS, deben entregarse correctamente para que la aplicación funcione. Una configuración de tipo MIME inadecuada en el servidor puede provocar errores como el infame "Error de sintaxis no detectado: token inesperado".contenido estático en la configuración de IIS garantiza que estos archivos se interpreten correctamente. Estas configuraciones a nivel de servidor son indispensables para evitar sorpresas en el tiempo de ejecución. 🚀

Otro ángulo a explorar es el impacto de las configuraciones incorrectas de enrutamiento. Las aplicaciones angulares utilizan enrutamiento del lado del cliente, lo que a menudo entra en conflicto con las configuraciones del servidor que esperan puntos finales predefinidos. Agregar rutas alternativas en la configuración del servidor, como redirigir todas las solicitudes a `index.html`, garantiza que la aplicación no se rompa. Por ejemplo, en IIS, esto se puede lograr con un ``regla que enruta todas las solicitudes no coincidentes al punto de entrada de Angular. Este paso simple pero poderoso puede ahorrar horas de depuración y mejorar la solidez de su aplicación. 🛠️

Por último, considere el papel de la optimización del tiempo de construcción. El comando `ng build` de Angular con indicadores de producción como `--aot` y `--optimization` compila y minimiza la aplicación para un mejor rendimiento. Sin embargo, es clave garantizar que estas optimizaciones se alineen con el entorno de implementación. Por ejemplo, habilitar mapas de origen durante la implementación inicial puede ayudar a depurar problemas en producción sin comprometer la seguridad al deshabilitarlos más adelante. Estas mejores prácticas hacen que las implementaciones sean más predecibles y eficientes.