Como configurar o servidor Nginx para aplicações Angular

Já faz algum tempo que publiquei no meu site uma aplicação que reúne diversos projetos em Angular que desenvolvi. A aplicação utiliza o recurso de rotas do Angular para a navegação entre as páginas. No entanto, não era possível carregar os conteúdos de forma direta sem antes passar pela página inicial.

Isso acontecia porque o navegador solicitava ao servidor um arquivo que não existe ao invés de carregar o index.html e, a partir daí, fazer a solicitação de roteamento para o conteúdo desejado.

Você pode habilitar o acesso direto aos componentes roteados utilizando o seguinte trecho de código nas configurações do servidor Nginx:

server {

 root /path/to/root;
 ...

 # Em caso de aplicação hospedada na raiz
 location / {
    try_files $uri $uri$args $uri$args/ /index.html;
 }

 # Em caso de aplicação hospedada em diretório
 location ^~ /application-folder/ {
     try_files $uri$args $uri$args/ /application-folder/index.html;
 }

 ...

}

Com isso, o servidor faz o fallback de requisições direcionando para o index.html e passando o restante da URL como argumentos para o roteamento do Angular, mostrando assim o componente correto.

Por exemplo, ao acessar application-folder/page1, o servidor fará a requisição para a página index.html dentro de application-folder, e passará page1 como argumento para a aplicação, que fará o roteamento para o componente ligado àquele caminho.

Note que você terá que fazer isso para cada aplicação em Angular contida no seu servidor.

Portanto, com poucas linhas de configuração no servidor, componentes de aplicações em Angular podem ser acessadas de modo direto via URL. Desta forma, facilita a otimização do site para sistemas de busca ao permitir também a indexação adequada da sua aplicação.

#DesafioDIO