Riešenie 'Neočakávaný token '<' v Angular a .NET 8 Deployment

Keď nasadenie funguje v ladení, ale zlyhá na IIS

Už ste niekedy čelili frustrácii z toho, že vaša aplikácia funguje perfektne v režime ladenia, ale pri nasadení nešťastne zlyhá? 😟 Toto môže byť obzvlášť nepríjemné pri migrácii projektu, ako som nedávno zažil pri presune mojej aplikácie Angular a .NET z .NET Core 2.1 na .NET 8. Problém sa zdal záhadný: „Nezachytená syntaxová chyba: Neočakávaný token“

Zvláštna časť? Kontrola súborov nasadenia odhalila, že niektoré skripty – napríklad runtime, polyfills a main – slúžili ako súbory HTML namiesto JavaScriptu. Toto správanie ma poškriabalo na hlave, pretože lokálny priečinok `dist` ukazoval správny formát JS. Nasadenie IIS však vykreslilo úplne iný obraz.

Ako vývojár sa stretávate s takýmito nezrovnalosťami ako vyriešenie záhady, kde každá stopa otvára ďalšiu mätúcu otázku. Dvakrát som skontroloval cesty, príkazy a konfigurácie, ale nedokázal som okamžite určiť príčinu. S blížiacimi sa termínmi sa riešenie tohto problému stalo prioritou. 🕒

V tomto príspevku sa ponorím do hlavnej príčiny tohto problému, podelím sa o ponaučenie, ktoré som sa naučil pri riešení problémov, a prevediem vás jeho efektívnym riešením. Ak ste sa dostali do podobného scenára, zostaňte naladení – sľubujem, že na tejto ceste nie ste sami!

Demystifikovanie chýb nasadenia v aplikáciách Angular a .NET

Vo vyššie uvedených skriptoch sa každé riešenie zameriava na špecifický aspekt riešenia problémov s nasadením v prostredí Angular a .NET. Konfiguračný súbor IIS pomocou web.config je rozhodujúce pre riešenie nesúladu typu MIME. Explicitným mapovaním prípon súborov, ako je `.js`, na ich správny typ MIME (aplikácia/javascript), služba IIS vie, ako správne poskytnúť tieto súbory prehliadačom. Tým sa zabráni „neočakávanému tokenu“

The Príkaz uhlovej zostavy (zostava --prod) zabezpečuje, že aplikácia je optimalizovaná na výrobu. Parameter `--output-hashing=all` hashuje názvy súborov, čo prehliadačom umožňuje ukladať súbory do vyrovnávacej pamäte bez náhodného použitia zastaraných verzií. Toto je obzvlášť dôležité pri nasadení v reálnom svete, kde používatelia často navštevujú aplikáciu. Konfiguráciou `baseHref` a `deployUrl` v `angular.json` zaisťujeme, že smerovanie a načítanie prostriedkov bude fungovať bez problémov, aj keď je hosťované v podadresároch alebo CDN. Vďaka týmto krokom je aplikácia odolná voči bežným výzvam nasadenia, čím sa zlepšuje používateľská skúsenosť a spoľahlivosť.

Skript Node.js uvedený vyššie pridáva ďalšiu vrstvu ladenia skenovaním adresára `dist`, aby sa potvrdila integrita súborov. Pomocou príkazov ako `fs.readdirSync` a `mime.lookup` skript pred nasadením overí, či má každý súbor správny typ MIME. Tento proaktívny krok pomáha zachytiť potenciálne chyby skôr, ako sa vyskytnú vo výrobe, šetrí čas a znižuje frustráciu. Napríklad počas jedného z mojich nasadení mi tento skript pomohol uvedomiť si, že problém s konfiguráciou viedol k tomu, že súbory JSON boli podávané s nesprávnym typom MIME! 🔍

Nakoniec testovací skript Jest zaisťuje automatickú validáciu kľúčových aspektov nasadenia. Kontroluje existenciu kritických súborov ako `runtime.js` a `main.js` v priečinku `dist`. To zabraňuje prehliadnutým chybám počas nasadenia, najmä v tímových prostrediach, kde je zapojených viacero vývojárov. Začlenením takýchto testov môžete s istotou nasadiť svoju aplikáciu s vedomím, že bola dôkladne overená. Tieto riešenia, keď sa používajú spoločne, vytvárajú robustný proces na vyriešenie problémov s nasadením a zabezpečenie hladkého produkčného vydania.

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

Pochopenie dôležitosti konfigurácie statického súboru pri nasadení

Jedným kritickým aspektom, ktorý sa počas nasadenia často prehliada, je správna konfigurácia manipulácie so statickými súbormi. V prípade aplikácií Angular a .NET sa musia správne poskytovať statické aktíva, ako sú súbory JavaScript a CSS, aby aplikácia fungovala. Nesprávne nastavenia typu MIME na serveri môžu viesť k chybám, ako je napríklad neslávne známa chyba „Uncaught SyntaxError: Unexpected token“statický obsah v konfigurácii IIS zaisťuje správnu interpretáciu týchto súborov. Takéto konfigurácie na úrovni servera sú nevyhnutné, aby sa predišlo prekvapeniam pri behu. 🚀

Ďalším uhlom pohľadu na preskúmanie je vplyv nesprávnej konfigurácie smerovania. Angular aplikácie používajú smerovanie na strane klienta, ktoré je často v konflikte s nastaveniami servera očakávajúcimi preddefinované koncové body. Pridanie záložných trás do konfigurácie servera, ako je napríklad presmerovanie všetkých požiadaviek na `index.html`, zaisťuje, že sa aplikácia nezlomí. Napríklad v IIS sa to dá dosiahnuť pomocou `` pravidlo, ktoré nasmeruje všetky nezodpovedané požiadavky na vstupný bod Angular. Tento jednoduchý, ale účinný krok môže ušetriť hodiny ladenia a zlepšiť robustnosť vašej aplikácie. 🛠️

Nakoniec zvážte úlohu optimalizácie v čase zostavovania. Príkaz `ng build` spoločnosti Angular s produkčnými príznakmi ako `--aot` a `--optimization` kompiluje a minimalizuje aplikáciu pre lepší výkon. Kľúčové je však zabezpečenie súladu týchto optimalizácií s prostredím nasadenia. Povolenie zdrojových máp počas počiatočného nasadenia môže napríklad pomôcť pri ladení problémov v produkcii bez ohrozenia zabezpečenia neskôr ich zakázaním. Vďaka týmto osvedčeným postupom sú nasadenia predvídateľnejšie a efektívnejšie.