Razreševanje 'Nepričakovanega žetona '<' v uvedbi Angular in .NET 8

Ko uvajanje deluje v Debug, vendar ne uspe v IIS

Ste se že kdaj soočili s frustracijo, ko ste videli, da vaša aplikacija deluje brezhibno v načinu za odpravljanje napak, pri uvedbi pa popolnoma odpove? 😟 To je lahko še posebej moteče pri selitvi projekta, kot sem nedavno doživel, ko sem svojo aplikacijo Angular in .NET premikal iz .NET Core 2.1 v .NET 8. Težava se je zdela skrivnostna: 'Uncaught SyntaxError: Unexpected token'

Čuden del? Pregled datotek za uvajanje je pokazal, da so bili nekateri skripti, kot so runtime, polyfills in main, postreženi kot datoteke HTML namesto JavaScript. Zaradi tega vedenja sem se praskal po glavi, ker je lokalna mapa `dist` pokazala pravilen format JS. Uvedba IIS pa je prikazala zelo drugačno sliko.

Kot razvijalec se zdi, da se srečuješ s takšnimi nedoslednostmi, kot da bi reševal uganko, kjer vsaka namiga odpira novo nejasno vprašanje. Dvakrat sem preveril poti, ukaze in konfiguracije, vendar nisem mogel takoj ugotoviti vzroka. Zaradi bližajočih se rokov je reševanje tega vprašanja postalo prioriteta. 🕒

V tej objavi se bom poglobil v temeljni vzrok te težave, delil lekcije, ki sem se jih naučil med odpravljanjem težav, in vas vodil skozi njeno učinkovito reševanje. Če ste naleteli na podoben scenarij, ostanite z nami – obljubim, da na tej poti niste sami!

Razkrivanje napak pri uvajanju v aplikacijah Angular in .NET

V zgornjih skriptih se vsaka rešitev osredotoča na določen vidik odpravljanja težav pri uvajanju v okolju Angular in .NET. Konfiguracijska datoteka IIS z uporabo web.config je ključnega pomena za odpravljanje neujemanja vrste MIME. Z eksplicitnim preslikavanjem končnic datotek, kot je `.js`, v njihovo ustrezno vrsto MIME (aplikacija/javascript), IIS ve, kako te datoteke pravilno servirati brskalnikom. To prepreči "nepričakovan žeton"

The Kotni ukaz za gradnjo (ng build --prod) zagotavlja, da je aplikacija optimizirana za proizvodnjo. Parameter `--output-hashing=all` zgosti imena datotek, kar omogoča brskalnikom, da predpomnijo datoteke, ne da bi slučajno uporabili zastarele različice. To je še posebej pomembno pri uvedbah v resničnem svetu, kjer uporabniki pogosto znova obiskujejo aplikacijo. S konfiguracijo `baseHref` in `deployUrl` v `angular.json` zagotovimo, da usmerjanje in nalaganje sredstev delujeta nemoteno, tudi če gostujeta v podimenikih ali CDN-jih. S temi koraki je aplikacija odporna na pogoste izzive uvajanja, s čimer se izboljša uporabniška izkušnja in zanesljivost.

Zgornji skript Node.js doda še eno plast odpravljanja napak s skeniranjem imenika »dist«, da potrdi celovitost datotek. Z uporabo ukazov, kot sta `fs.readdirSync` in `mime.lookup`, skript pred uvedbo preveri, ali ima vsaka datoteka pravilno vrsto MIME. Ta proaktivni korak pomaga ujeti morebitne napake, preden se pojavijo v proizvodnji, prihrani čas in zmanjša frustracije. Na primer, med eno od mojih uvedb mi je ta skript pomagal ugotoviti, da je težava s konfiguracijo povzročila, da so bile datoteke JSON postrežene z napačno vrsto MIME! 🔍

Nazadnje, testni skript Jest zagotavlja samodejno preverjanje ključnih vidikov uvajanja. Preveri obstoj kritičnih datotek, kot sta `runtime.js` in `main.js` v mapi `dist`. To preprečuje spregledane napake med uvajanjem, zlasti v timskih okoljih, kjer sodeluje več razvijalcev. Z vključitvijo takšnih testov lahko samozavestno uvedete svojo aplikacijo, saj veste, da je bila temeljito preverjena. Te rešitve, če se uporabljajo skupaj, ustvarijo robusten postopek za reševanje izzivov uvajanja in zagotavljanje nemotenih produkcijskih izdaj.

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

Razumevanje pomena konfiguracije statične datoteke pri uvajanju

Eden kritičnih vidikov, ki se med uvajanjem pogosto spregleda, je pravilna konfiguracija obravnavanja statične datoteke. V primeru aplikacij Angular in .NET morajo biti statična sredstva, kot so datoteke JavaScript in CSS, pravilno postrežena, da aplikacija deluje. Nepravilne nastavitve tipa MIME na strežniku lahko povzročijo napake, kot je zloglasna "Uncaught SyntaxError: Unexpected token"staticContent v konfiguraciji IIS zagotavlja, da se te datoteke pravilno interpretirajo. Takšne konfiguracije na ravni strežnika so nepogrešljive za izogibanje presenečenjem med izvajanjem. 🚀

Drug vidik, ki ga je treba raziskati, je vpliv napačnih konfiguracij usmerjanja. Aplikacije Angular uporabljajo usmerjanje na strani odjemalca, kar je pogosto v nasprotju z nastavitvami strežnika, ki pričakujejo vnaprej določene končne točke. Dodajanje nadomestnih poti v konfiguracijo strežnika, kot je preusmeritev vseh zahtev na `index.html`, zagotavlja, da se aplikacija ne pokvari. Na primer, v IIS je to mogoče doseči z `` pravilo, ki vse neujemajoče se zahteve usmeri na vstopno točko Angular. Ta preprost, a močan korak lahko prihrani ure odpravljanja napak in izboljša robustnost vaše aplikacije. 🛠️

Nazadnje razmislite o vlogi optimizacije časa gradnje. Angularjev ukaz `ng build` s proizvodnimi zastavicami, kot sta `--aot` in `--optimization`, prevede in pomanjša aplikacijo za boljšo zmogljivost. Vendar pa je ključno zagotoviti, da so te optimizacije usklajene z okoljem uvajanja. Na primer, omogočanje izvornih zemljevidov med začetnim uvajanjem lahko pomaga pri odpravljanju napak v proizvodnji, ne da bi pozneje ogrozili varnost, če jih onemogočite. Zaradi takšnih najboljših praks so uvajanja bolj predvidljiva in učinkovita.