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 { }