Resolució del "Token inesperat "<" al desplegament Angular i .NET 8

Quan el desplegament funciona a la depuració però falla a IIS

Alguna vegada t'has enfrontat a la frustració de veure que la teva aplicació funciona perfectament en mode de depuració, però falla estretament quan es desplega? 😟 Això pot ser especialment molest quan es migra un projecte, tal com vaig experimentar recentment en moure la meva aplicació Angular i .NET de .NET Core 2.1 a .NET 8. El problema semblava críptic: un "Error de sintaxi no detectat: testimoni inesperat"

La part estranya? La inspecció dels fitxers de desplegament va revelar que alguns scripts, com ara temps d'execució, polyfills i main, es van servir com a fitxers HTML en lloc de JavaScript. Aquest comportament em va deixar rascar el cap perquè la carpeta local "dist" mostrava el format JS correcte. El desplegament d'IIS, però, va pintar una imatge molt diferent.

Com a desenvolupador, trobar-se amb aquestes inconsistències sembla resoldre un misteri on cada oportunitat obre una altra pregunta confusa. Vaig comprovar els camins, les ordres i les configuracions, però no vaig poder identificar la causa immediatament. Amb els terminis que s'acosten, resoldre aquest problema es va convertir en una prioritat. 🕒

En aquesta publicació, analitzaré la causa principal d'aquest problema, compartiré les lliçons que vaig aprendre durant la resolució de problemes i us guiaré per resoldre'l de manera eficaç. Si us heu trobat amb un escenari similar, estigueu atents; us prometo que no esteu sols en aquest viatge!

Desmitificació dels errors de desplegament en aplicacions angulars i .NET

Als scripts proporcionats anteriorment, cada solució se centra en un aspecte específic de la resolució de problemes de desplegament en un entorn Angular i .NET. El fitxer de configuració d'IIS utilitzant web.config és crucial per resoldre els desajustos de tipus MIME. En assignar de manera explícita extensions de fitxer com `.js` al seu tipus MIME adequat (aplicació/javascript), IIS sap com enviar correctament aquests fitxers als navegadors. Això evita que el "token inesperat"

El Comandament de construcció angular (ng build --prod) garanteix que l'aplicació estigui optimitzada per a la producció. El paràmetre `--output-hashing=all` fa hash els noms dels fitxers, permetent als navegadors guardar fitxers a la memòria cau sense utilitzar accidentalment versions obsoletes. Això és especialment important en els desplegaments del món real on els usuaris tornen a visitar l'aplicació amb freqüència. En configurar `baseHref` i `deployUrl` a `angular.json`, ens assegurem que l'encaminament i la càrrega d'actius funcionin perfectament fins i tot quan s'allotgen en subdirectoris o CDN. Aquests passos fan que l'aplicació sigui resistent als reptes de desplegament habituals, millorant tant l'experiència de l'usuari com la fiabilitat.

L'script Node.js proporcionat anteriorment afegeix una altra capa de depuració escanejant el directori "dist" per confirmar la integritat dels fitxers. Utilitzant ordres com `fs.readdirSync` i `mime.lookup`, l'script verifica que cada fitxer tingui el tipus MIME correcte abans del desplegament. Aquest pas proactiu ajuda a detectar possibles errors abans que es produeixin a la producció, estalviant temps i reduint la frustració. Per exemple, durant un dels meus desplegaments, aquest script em va ajudar a adonar-me que un problema de configuració havia provocat que els fitxers JSON es publiquessin amb el tipus MIME incorrecte! 🔍

Finalment, l'script de prova Jest garanteix la validació automatitzada dels aspectes clau del desplegament. Comprova l'existència de fitxers crítics com "runtime.js" i "main.js" a la carpeta "dist". Això evita errors passats per alt durant el desplegament, especialment en entorns d'equip on hi participen diversos desenvolupadors. En incorporar aquestes proves, podeu implementar la vostra aplicació amb confiança sabent que ha estat validada a fons. Aquestes solucions, quan s'utilitzen juntes, creen un procés sòlid per resoldre els reptes de desplegament i garantir llançaments de producció sense problemes.

<!-- 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);
  });
});

Entendre la importància de la configuració de fitxers estàtics en el desplegament

Un aspecte crític que sovint es passa per alt durant el desplegament és la configuració adequada de la gestió de fitxers estàtics. En el cas de les aplicacions Angular i .NET, els actius estàtics com ara fitxers JavaScript i CSS s'han de servir correctament perquè l'aplicació funcioni. La configuració incorrecta del tipus MIME al servidor pot provocar errors com el famós "Error de sintaxi no capturat: testimoni inesperat"staticContent a la configuració d'IIS assegura que aquests fitxers s'interpreten correctament. Aquestes configuracions a nivell de servidor són indispensables per evitar sorpreses en temps d'execució. 🚀

Un altre angle a explorar és l'impacte de les configuracions incorrectes d'encaminament. Les aplicacions angulars utilitzen l'encaminament del costat del client, que sovint entra en conflicte amb les configuracions del servidor que esperen punts finals predefinits. Afegir rutes alternatives a la configuració del servidor, com ara redirigir totes les sol·licituds a `index.html`, garanteix que l'aplicació no es trenqui. Per exemple, a IIS, això es pot aconseguir amb un `` regla que dirigeix ​​totes les sol·licituds no coincidents al punt d'entrada angular. Aquest pas senzill però potent pot estalviar hores de depuració i millorar la robustesa de la vostra aplicació. 🛠️

Finalment, tingueu en compte el paper de l'optimització del temps de construcció. L'ordre `ng build` d'Angular amb senyals de producció com `--aot` i `--optimization` compila i redueix l'aplicació per obtenir un millor rendiment. Tanmateix, és clau garantir que aquestes optimitzacions s'alineen amb l'entorn de desplegament. Per exemple, habilitar els mapes d'origen durant el desplegament inicial pot ajudar a depurar problemes en producció sense comprometre la seguretat més endavant desactivant-los. Aquestes bones pràctiques fan que els desplegaments siguin més previsibles i eficients.