Lidando com Rotas Inexistentes no Angular
Às vezes, 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, configuradas as rotas para exibi-lo em todos os caminhos desconhecidos e adicionados estilos aprimorados.
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
Layout simples, com um destaque 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 claro.
Adicionando a Lógica de Navegação
Agora, vamos implementar o método para navegar 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 tenha sido correspondida anteriormente. Por exemplo, ao navegar para /wrong-url, será exibida a página 404.
Por que a rota curinga deve sempre ser a ú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 de captura geral. 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 irá capturar tudo e o restante das rotas nunca será alcançado — mesmo que sejam válidas.
Agora o aplicativo lida com erros de navegação de forma elegante: em vez de travar ou exibir uma tela em branco, o usuário visualiza uma mensagem 404 amigável com um caminho claro de volta para a página inicial.
O aplicativo está agora totalmente funcional e fácil de usar! 🎉 Para 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
How do I add the HTML for the NotFoundComponent?
Can you explain how to implement the goToHome() method?
Where exactly should I place the wildcard route in my routing configuration?
Awesome!
Completion rate improved to 3.13Lidando com Rotas Inexistentes no Angular
Deslize para mostrar o menu
Às vezes, 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, configuradas as rotas para exibi-lo em todos os caminhos desconhecidos e adicionados estilos aprimorados.
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
Layout simples, com um destaque 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 claro.
Adicionando a Lógica de Navegação
Agora, vamos implementar o método para navegar 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 tenha sido correspondida anteriormente. Por exemplo, ao navegar para /wrong-url, será exibida a página 404.
Por que a rota curinga deve sempre ser a ú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 de captura geral. 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 irá capturar tudo e o restante das rotas nunca será alcançado — mesmo que sejam válidas.
Agora o aplicativo lida com erros de navegação de forma elegante: em vez de travar ou exibir uma tela em branco, o usuário visualiza uma mensagem 404 amigável com um caminho claro de volta para a página inicial.
O aplicativo está agora totalmente funcional e fácil de usar! 🎉 Para baixar a versão completa deste projeto, basta clicar no botão abaixo.
Obrigado pelo seu feedback!
