Configuração e Redirecionamento de Rotas no Angular 17

Olá pessoal,

Estou imerso na saga de aprendizado do Angular na versão 17 e desejo compartilhar com vocês o que estou estudando sobre o uso de rotas. Inicialmente, é importante ressaltar que o Angular é uma aplicação de página única (SPA - Single Page Application), o que significa que todos os dados são carregados de uma só vez e o framework os atualiza dinamicamente. Feita as considerações, vamos ao exemplo:

Depois de criar o projeto, criamos agora três componentes para representar nossas páginas, que no caso vamos nomea-los com o prefixo "pg" seguido de um número e uma "pg404" como exemplo de rota inexistente. Para a criação desses componentes, utilizamos o comando "ng g c nome-do-componente" no terminal.
Em seguida, no arquivo app.component.ts, importamos o CommonModule, RouterOutlet, RouterLink, dentro do campo imports: do Component para obter acesso às funcionalidades de roteamento.
Já no arquivo app.component.html, criamos links utilizando a tag <a> e o atributo routerLink, sendo este um facilitador de navegação entre rotas da SPA. Ao final, adicionamos a tag <router-outlet></router-outlet> para exibir dinamicamente o conteúdo das páginas. Vejamos um exemplo:

<a routerLink="/pg1">Página 1</a>
<a routerLink="/pg2">Página 2</a>
<a routerLink="/pg3">Página 3</a>

<router-outlet></router-outlet>

No arquivo app.routes.ts, definimos os paths e seus redirecionamentos dentro do array Routes[]:

export const routes: Routes = [
  { path: 'pg1', component: Pg1Component },
  { path: 'pg2', component: Pg2Component },
  { path: 'pg3', component: Pg3Component },
  { path: '', redirectTo: '/pg1', pathMatch: 'full' },
  { path: '**', component: Pg404Component }
];

Ao configurar os paths, é importante garantir que o nome utilizado no routerLink do HTML corresponda ao path do TypeScript e que o componente seja especificado corretamente. No caso do path vazio, utilizamos redirectTo: para redirecionar para uma página específica e pathMatch: 'full' para exigir uma correspondência exata na URL para que o redirecionamento ocorra. O último path: '**', lida com casos em que o caminho não coincide com nenhum dos paths especificados anteriormente.
E assim está pronto nosso redirecionamento. O resultado final fica assim:

Sem rota:

---

Com rota "/pg3":

---

Com rota "/123":