Resolvendo 'Token inesperado' <' na implantação Angular e .NET 8

Quando a implantação funciona na depuração, mas falha no IIS

Você já enfrentou a frustração de ver seu aplicativo funcionar perfeitamente no modo de depuração, mas falhar miseravelmente quando implantado? 😟 Isso pode ser particularmente irritante ao migrar um projeto, como experimentei recentemente ao mover meu aplicativo Angular e .NET do .NET Core 2.1 para o .NET 8. O problema parecia enigmático: um 'Uncaught SyntaxError: Unexpected token'

A parte estranha? A inspeção dos arquivos de implantação revelou que alguns scripts, como runtime, polyfills e main, eram servidos como arquivos HTML em vez de JavaScript. Esse comportamento me deixou coçando a cabeça porque a pasta local `dist` mostrava o formato JS correto. A implantação do IIS, no entanto, pintou um quadro muito diferente.

Como desenvolvedor, encontrar essas inconsistências é como resolver um mistério onde cada pista abre outra questão confusa. Verifiquei novamente os caminhos, comandos e configurações, mas não consegui identificar a causa imediatamente. Com os prazos se aproximando, resolver esse problema tornou-se uma prioridade. 🕒

Nesta postagem, vou me aprofundar na causa raiz desse problema, compartilhar as lições que aprendi durante a solução de problemas e orientá-lo na solução eficaz. Se você se deparou com um cenário semelhante, fique atento – prometo que você não está sozinho nesta jornada!

Desmistificando erros de implantação em aplicativos Angular e .NET

Nos scripts fornecidos acima, cada solução se concentra em um aspecto específico da solução de problemas de implantação em um ambiente Angular e .NET. O arquivo de configuração do IIS usando o web.config é crucial para resolver incompatibilidades de tipo MIME. Ao mapear explicitamente extensões de arquivo como `.js` para seu tipo MIME adequado (aplicativo/javascript), o IIS sabe como fornecer corretamente esses arquivos aos navegadores. Isso evita que o "token inesperado"

O Comando de construção angular (ng build --prod) garante que o aplicativo seja otimizado para produção. O parâmetro `--output-hashing = all` faz hash de nomes de arquivos, permitindo que os navegadores armazenem arquivos em cache sem usar acidentalmente versões desatualizadas. Isso é particularmente importante em implantações reais, onde os usuários revisitam o aplicativo com frequência. Ao configurar `baseHref` e `deployUrl` em `angular.json`, garantimos que o roteamento e o carregamento de ativos funcionem perfeitamente, mesmo quando hospedados em subdiretórios ou CDNs. Essas etapas tornam o aplicativo resiliente aos desafios comuns de implantação, melhorando a experiência do usuário e a confiabilidade.

O script Node.js fornecido acima adiciona outra camada de depuração, verificando o diretório `dist` para confirmar a integridade dos arquivos. Usando comandos como `fs.readdirSync` e `mime.lookup`, o script verifica se cada arquivo tem o tipo MIME correto antes da implantação. Esta etapa proativa ajuda a detectar possíveis erros antes que eles ocorram na produção, economizando tempo e reduzindo a frustração. Por exemplo, durante uma de minhas implantações, esse script me ajudou a perceber que um problema de configuração fez com que os arquivos JSON fossem veiculados com o tipo MIME errado! 🔍

Finalmente, o script de teste Jest garante a validação automatizada dos principais aspectos de implantação. Ele verifica a existência de arquivos críticos como `runtime.js` e `main.js` na pasta `dist`. Isso evita erros negligenciados durante a implantação, especialmente em ambientes de equipe onde vários desenvolvedores estão envolvidos. Ao incorporar esses testes, você pode implantar seu aplicativo com segurança, sabendo que ele foi totalmente validado. Essas soluções, quando usadas em conjunto, criam um processo robusto para resolver desafios de implantação e garantir lançamentos de produção tranquilos.

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

Compreendendo a importância da configuração de arquivos estáticos na implantação

Um aspecto crítico frequentemente esquecido durante a implantação é a configuração adequada do tratamento de arquivos estáticos. No caso de aplicações Angular e .NET, os ativos estáticos, como arquivos JavaScript e CSS, devem ser servidos corretamente para que a aplicação funcione. Configurações inadequadas de tipo MIME no servidor podem levar a erros como o infame "Uncaught SyntaxError: Unexpected token 'conteúdo estático na configuração do IIS garante que esses arquivos sejam interpretados corretamente. Essas configurações em nível de servidor são indispensáveis ​​para evitar surpresas em tempo de execução. 🚀

Outro ângulo a explorar é o impacto das configurações incorretas de roteamento. Os aplicativos angulares usam roteamento do lado do cliente, o que geralmente entra em conflito com as configurações do servidor que esperam terminais predefinidos. Adicionar rotas substitutas na configuração do servidor, como redirecionar todas as solicitações para `index.html`, garante que o aplicativo não quebre. Por exemplo, no IIS, isso pode ser conseguido com um ``regra que roteia todas as solicitações sem correspondência para o ponto de entrada Angular. Esta etapa simples, mas poderosa, pode economizar horas de depuração e melhorar a robustez do seu aplicativo. 🛠️

Por último, considere o papel da otimização do tempo de construção. O comando `ng build` do Angular com sinalizadores de produção como `--aot` e `--optimization` compila e minimiza o aplicativo para melhor desempenho. No entanto, é fundamental garantir que essas otimizações estejam alinhadas com o ambiente de implantação. Por exemplo, habilitar mapas de origem durante a implantação inicial pode ajudar a depurar problemas na produção sem comprometer a segurança posteriormente, desativando-os. Essas práticas recomendadas tornam as implantações mais previsíveis e eficientes.