Angular: resolvendo erro 404 de refresh no IIS


Angular: resolvendo erro 404 de refresh no IIS

Quando trabalhamos com projetos SPA (Simple Page Application) é normal receber o erro 404 no refresh em uma das rotas de URL do projeto em produção. Para resolver esse problema você pode utilizar: HashLocationStrategy, utilizada em projetos que não precisem indexar as suas URL em serviços de busca, ou no caso de projeto publicados no IIS, uma configuração simples no arquivo web.config. Abaixo irei demonstrar esses depois exemplos.

Configurando o web.config

Vamos iniciar com a configuração do arquivo web.config. Para esse exemplo você irá precisar ter um projeto Angular publicado no IIS. Para isso, siga os passos abaixo:

1º Gerando o dist

Execute o comando abaixo no seu terminal.

ng build --prod aot

O comando acima irá gerar o dist do seu projeto.

2º Configuração do IIS

Agora abra o seu o IIS e vá em Sites, em seguida clique com o botão direito para adicionar um novo site e preencha os campos conforme a imagem abaixo:

Configuração do IIS

No meu exemplo eu dei o nome de angular_refresh e deixei o projeto na porta 8013.

3º Teste com erro

Agora abra o seu projeto no seu navegador, em seguida clique em about e de um refresh na página. Conforme você pode ver na imagem abaixo, o IIS irá devolver o erro 404.

Error 404

4º Arquivo web.config

Para resolver esse problema, crie um novo arquivo chamado web.config na raiz do seu projeto no IIS e atualize ele com o código abaixo:

Agora de um refresh novamente no seu navegador e note que o IIS está resolvendo as rotas. Abaixo você pode ver uma imagem demonstrando esse passo:

web.config (rules)

HashLocationStrategy

Eu recomendo utilizar HashLocationStrategy em admins ou em projetos que não precisem indexar a URL, caso contrário o mais recomendado é a configuração anterior no arquivo web.config.

Para adicionar um hash na suas rotas, abra o arquivo AppModule e adicione o o trecho de código abaixo no seus providers:

providers: [{
provide: LocationStrategy,
useClass: HashLocationStrategy
}]

Agora de um refresh no seu navegador e note que foi adicionado um hash nas suas rotas. Abaixo você tem uma imagem demonstrando esse passo.

HashLocationStrategy

Bom, o intuito desse artigo foi compartilhar como podemos resolver esse problema de error 404 no momento de um refresh. Espero que tenham gostado e até um próximo artigo.

Compartilhe:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Table of Contents

Postagens Relacionadas

SaferatHome

Safer at Home

Safer at Home 26/02/2021(US) – Filmes – 0h 0min –   Nota: 0/10   Sinopse     Elenco Mais informações Título Original Safer at Home
SouLunaOUltimoShow

Sou Luna: O Último Show

O elenco de “Sou Luna” se apresenta ao vivo pela última vez no mítico estádio Luna Park em Buenos Aires. Vamos acompanhá-los na intimidade dos bastidores e r…
Chansondouce

Chanson douce

Chanson douce () – Drama, Crime – 1h 40min –   Nota: 6/10   Sinopse     Elenco Leïla Bekhti Como – Myriam Karin Viard
OutpostInfernoNegro

Outpost 2: Inferno Negro

O ano é 1945, 2ª Guerra Mundial, e um cientista alemão de nome Klausener está trabalhando em uma tecnologia nova e assustadora que tem o poder de criar um ex…