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/produtosA 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:
