Tratamento de Rotas Inexistentes no Angular
Às vezes, os usuários podem digitar uma URL incorreta manualmente ou clicar em um link desatualizado. Nesses casos, é importante exibir uma mensagem clara de "Página Não Encontrada" em vez de uma tela em branco ou um erro técnico. Neste módulo, será criado um componente de página 404, as rotas serão configuradas para exibi-lo em todos os caminhos desconhecidos e será aplicado um estilo visual aprimorado.
Criação do NotFoundComponent
Será criado um novo componente Angular chamado NotFoundComponent para servir como página 404. Ele exibirá um título, uma breve mensagem de erro e um botão para redirecionar o usuário de volta à página inicial.
Execute o seguinte comando para gerar o componente:
Isso criará automaticamente uma pasta not-found com quatro arquivos. Estes arquivos já são conhecidos, e o arquivo de teste pode ser excluído caso não seja utilizado.
Construção do Componente
Adicionar o HTML para exibir o título "404", uma mensagem simples e um botão "Ir para a Página Inicial":
not-found-conponent.html
not-found-conponent.css
Trata-se de um layout simples, com um detalhe especial — o método goToHome(). Ao clicar no botão, o usuário é redirecionado para a página inicial.
Também adicionamos alguns CSS para tornar a página 404 visualmente atraente — texto centralizado, um título destacado e um botão limpo e brilhante.
Adição da lógica de navegação
Agora, implementação do método para redirecionar o usuário de volta para a página inicial.
not-found-conponent.ts
Aqui, o Router do Angular é injetado para navegação manual entre rotas. No método goToHome(), utiliza-se navigate(['/']) para direcionar o usuário à rota raiz.
Tratamento de Todas as Rotas Desconhecidas
Agora, a configuração de rotas do aplicativo será atualizada para exibir o NotFoundComponent em qualquer caminho indefinido.
No arquivo app.routes.ts, adicione a seguinte rota ao final:
routes.ts
O caminho ** é um curinga que corresponde a qualquer rota que não corresponda às anteriores. Por exemplo, ao navegar para /wrong-url, será exibida a página 404.
Por que a Rota Curinga Deve Sempre Estar por Última?
No Angular, a configuração das rotas é avaliada em ordem — de cima para baixo. Isso significa que o roteador verifica cada rota sequencialmente e, ao encontrar uma correspondência, para de procurar.
A rota curinga ({ path: '**' }) é uma rota que captura todas as demais. Ela corresponde a qualquer caminho que não tenha sido correspondido pelas rotas anteriores. Se você colocá-la antes de rotas mais específicas, ela capturará tudo e o restante das rotas nunca será alcançado — mesmo que sejam válidas.
Agora seu aplicativo lida de forma elegante com erros de navegação: em vez de travar ou exibir uma tela em branco, os usuários veem uma mensagem 404 amigável com um caminho claro de volta para a página inicial.
Seu aplicativo agora está totalmente funcional e fácil de usar! 🎉 Se desejar baixar a versão completa deste projeto, basta clicar no botão abaixo.
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Awesome!
Completion rate improved to 3.13Tratamento de Rotas Inexistentes no Angular
Deslize para mostrar o menu
Às vezes, os usuários podem digitar uma URL incorreta manualmente ou clicar em um link desatualizado. Nesses casos, é importante exibir uma mensagem clara de "Página Não Encontrada" em vez de uma tela em branco ou um erro técnico. Neste módulo, será criado um componente de página 404, as rotas serão configuradas para exibi-lo em todos os caminhos desconhecidos e será aplicado um estilo visual aprimorado.
Criação do NotFoundComponent
Será criado um novo componente Angular chamado NotFoundComponent para servir como página 404. Ele exibirá um título, uma breve mensagem de erro e um botão para redirecionar o usuário de volta à página inicial.
Execute o seguinte comando para gerar o componente:
Isso criará automaticamente uma pasta not-found com quatro arquivos. Estes arquivos já são conhecidos, e o arquivo de teste pode ser excluído caso não seja utilizado.
Construção do Componente
Adicionar o HTML para exibir o título "404", uma mensagem simples e um botão "Ir para a Página Inicial":
not-found-conponent.html
not-found-conponent.css
Trata-se de um layout simples, com um detalhe especial — o método goToHome(). Ao clicar no botão, o usuário é redirecionado para a página inicial.
Também adicionamos alguns CSS para tornar a página 404 visualmente atraente — texto centralizado, um título destacado e um botão limpo e brilhante.
Adição da lógica de navegação
Agora, implementação do método para redirecionar o usuário de volta para a página inicial.
not-found-conponent.ts
Aqui, o Router do Angular é injetado para navegação manual entre rotas. No método goToHome(), utiliza-se navigate(['/']) para direcionar o usuário à rota raiz.
Tratamento de Todas as Rotas Desconhecidas
Agora, a configuração de rotas do aplicativo será atualizada para exibir o NotFoundComponent em qualquer caminho indefinido.
No arquivo app.routes.ts, adicione a seguinte rota ao final:
routes.ts
O caminho ** é um curinga que corresponde a qualquer rota que não corresponda às anteriores. Por exemplo, ao navegar para /wrong-url, será exibida a página 404.
Por que a Rota Curinga Deve Sempre Estar por Última?
No Angular, a configuração das rotas é avaliada em ordem — de cima para baixo. Isso significa que o roteador verifica cada rota sequencialmente e, ao encontrar uma correspondência, para de procurar.
A rota curinga ({ path: '**' }) é uma rota que captura todas as demais. Ela corresponde a qualquer caminho que não tenha sido correspondido pelas rotas anteriores. Se você colocá-la antes de rotas mais específicas, ela capturará tudo e o restante das rotas nunca será alcançado — mesmo que sejam válidas.
Agora seu aplicativo lida de forma elegante com erros de navegação: em vez de travar ou exibir uma tela em branco, os usuários veem uma mensagem 404 amigável com um caminho claro de volta para a página inicial.
Seu aplicativo agora está totalmente funcional e fácil de usar! 🎉 Se desejar baixar a versão completa deste projeto, basta clicar no botão abaixo.
Obrigado pelo seu feedback!
