Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida]

Bom dia!

Segui todos os passos da aula, exatamente como mostrado, e o "redirectTo" não funcionou. No entanto, seguindo uma sugestão de outro tópico aqui do fórum e funcionou...

Explico:

Assim não funcionou:

    {
        path: '',
        redirectTo: 'listarPensamento',
        pathMatch: 'full'
    },

Assim funcionou:

    { 
        path: '', 
        component: ListarPensamentoComponent 
    },

Alguém sabe me explicar o que acontece?

Abaixo o código do "app-routing.module.ts"

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CriarPensamentoComponent } from './componentes/pensamentos/criar-pensamento/criar-pensamento.component';
import { ListarPensamentoComponent } from './componentes/pensamentos/listar-pensamento/listar-pensamento.component';

const routes: Routes = [
    {
        path: '',
        redirectTo: 'listarPensamento',
        pathMatch: 'full'
    },
    {
        path: 'criarPensamento',
        component: CriarPensamentoComponent
    },
    {
        path: 'listarPensamento',
        component: ListarPensamentoComponent
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
})
export class AppRoutingModule { }
2 respostas
solução!

Olá, José!

O comportamento que você está observando pode estar relacionado ao ciclo de vida da aplicação e à forma como o roteador funciona, procurando as rotas na sequência em que foram informadas. Quando você usa o redirectTo, o Angular tenta redirecionar para a rota especificada assim que a aplicação é iniciada. No entanto, se a rota para a qual você está tentando redirecionar ainda não foi definida (ou seja, se o Angular ainda não "conhece" essa rota), o redirecionamento pode falhar.

Como a rota 'listarPensamento' está sendo definida depois da rota vazia ('') no array de rotas, isso pode estar causando o problema, pois o Angular não está conseguindo encontrar a rota 'listarPensamento'.

Uma solução seria reorganizar as rotas para que 'listarPensamento' seja definida antes da rota vazia. Assim, quando o Angular tentar fazer o redirecionamento, a rota 'listarPensamento' já estará disponível. Veja como ficaria:

const routes: Routes = [
    {
        path: 'criarPensamento',
        component: CriarPensamentoComponent
    },
    {
        path: 'listarPensamento',
        component: ListarPensamentoComponent
    },
    {
        path: '',
        redirectTo: 'listarPensamento',
        pathMatch: 'full'
    }
];

Veja se assim funciona. E se estiver aparecendo algum erro no terminal ou no console do navegador, fique à vontade para compartilhar conosco!

Espero ter ajudado e bons estudos!

Acho que era isso mesmo... Funcionou!!!

Obrigado!!!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software