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

Router link não funciona

Fiz as modificações e mesmo assim ao clicar no link de 'Cadastre-se' e 'Login' o router-link não funciona. Simplesmente nada acontece. Eis o código abaixo:

<header class="app-header">
  <mat-toolbar>
    <img src="assets/imagens/logo.png" alt="Logo da aplicação Jornada">
    <span class="spacer"></span>
    <div class="links-toobar">
      <button mat-button>Vender milhas</button>
      <button mat-button>Sobre</button>
      <ng-container *ngIf="user$ | async as pessoaUsuaria, else login">
        <a routerLink="auth/perfil">
          <img src="assets/icones/user.png" alt="Ícone da pessoa usuária">
        </a>
        <button mat-stroked-button (click)="logout()">SAIR</button>
      </ng-container>
      <ng-template #login>
        <button routerLink="auth/cadastro" mat-raised-button color="primary">CADASTRE-SE</button>
        <button routerLink="auth/login" mat-stroked-button>LOGIN</button>
      </ng-template>
    </div>
  </mat-toolbar>
</header>
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BuscaComponent } from './pages/busca/busca.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'auth',
    loadChildren: () => import('./autenticacao/autenticacao.module').then(m => m.AutenticacaoModule)
  },
  {
    path: 'busca',
    component: BuscaComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";

import { LoginComponent } from "./login/login.component";
import { authGuard } from "./auth.guards";
import { CadastroComponent } from "./cadastro/cadastro.component";
import { PerfilComponent } from "./perfil/perfil.component";

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'cadastro',
    component: CadastroComponent
  },
  {
    path: 'perfil',
    component: PerfilComponent,
    canActivate: [authGuard]
  },
]

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

export class AutenticacaoRoutingModule {}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AutenticacaoInterceptor } from './autenticacao/autenticacao.interceptor';
import { BuscaComponent } from './pages/busca/busca.component';
import { SharedModule } from './shared/shared.module';
import { MaterialModule } from './core/material/material.module';
import { HomeModule } from './home/home.module';
import { BuscaModule } from './busca/busca.module';

@NgModule({
  declarations: [
    AppComponent,
    BuscaComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SharedModule,
    BrowserAnimationsModule,
    HttpClientModule,
    ReactiveFormsModule,
    MaterialModule,
    HomeModule,
    BuscaModule
  ],
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: AutenticacaoInterceptor,
    multi: true
  }],
  bootstrap: [AppComponent]
})
export class AppModule { }
4 respostas

Ei, dei uma olhada no seu código e tá quase lá! Parece que você tá seguindo o que a gente viu na aula, tipo o Lazy Loading e os links do router.

Mas acho que tem um detalhe: a ordem das rotas no arquivo app-routing.module.ts. O Angular lê as rotas na sequência do array. Então, se uma rota combina antes da que você quer, ela vai ser usada primeiro.

No seu código, a rota vazia '' tá indo direto pra '/home' e tá no começo da lista. Isso pode atrapalhar as rotas de login ou outras.

Uma ideia é colocar essa rota de redirecionamento lá no final. Dá uma olhada nesse ajuste:

const routes: Routes = [
  {
    path: 'auth',
    loadChildren: () => import('./autenticacao/autenticacao.module').then(m => m.AutenticacaoModule)
  },
  {
    path: 'busca',
    component: BuscaComponent
  },
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  }
];

Assim, as rotas de login e outras vão funcionar direitinho antes desse redirecionamento.

Alterei a ordem e nada aconteceu. Na aula, a Nay colocou a ordem conforme coloquei anteriormente e funcionou. Se eu colocar manualmente a url funciona. O que é estranho é que se, por exemplo, eu entrar em http://localhost:4200/auth/login e clicar em Clique aqui para se cadastrar o redirecionamento funciona.

Estou com o mesmo problema

solução!

Antônio, consegui aqui. Tem que adicionar RouterModule nos imports de SharedModule.

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