Rotas Angular no AWS CloudFront

55 seg. leitura

Como configurar o serviço AWS CloudFront para permitir o roteamento correto em uma aplicação Angular

Sabemos que o Angular nos permite duas formas de utilizar as rotas (ou URLs), a primeira delas é utilizando o caractere hash (#) deixando as rotas parecidas com as mostradas abaixo:

https://meu.dominio.com/#/sobre
https://meu.dominio.com/#/cadastros/produtos

A segunda forma, e ao meu ver, a mais “bem vista”, é sem o uso do hash, ficando semelhante ao exemplo abaixo:

https://meu.dominio.com/sobre
https://meu.dominio.com/cadastros/produtos

Para fazer isso no Angular com o AWS CloudFront devemos fazer algumas configurações simples em ambos, começando pelo Angular, devemos editar o arquivo src/app/app-routing.module.ts, que é o arquivo raiz de toda a estrutura de roteamento do Angular, nele devemos alterar o imports no decorator @NgModule do AppRoutingModule adicionando a opção useHash: false, conforme o código abaixo:

@NgModule ({ 
  imports: [RouterModule.forRoot (rotas, { 
    useHash: false // desativa o uso do hash 
  })], 
  exportações: [RouterModule] 
}) 
classe de exportação AppRoutingModule {}

Feito isso, basta subir o conteúdo compilado para sua origem do CloudFront (Bucket S3, EC2, Etc) e configurar a aba “Error Pages” para redirecionar os erros 403 e 404 para a URL “/index.hml”, com isso, o servidor do CloudFront não retornará esses erros para o browser, ele vai direcionar para o arquivo index.html gerado pelo Angular que, por sua vez, irá tratar o conteúdo do path da URL (a rota) que foi passado. Abaixo tem uma imagem de como deverá ficar essa configuração:

Deixe uma resposta