Problema com rotas no Angular 16
Estou montando uma tela de criar conta, mas quando entro nela o path simplesmente some, e quando dou reload ela acaba voltando pro login, segue vídeo demonstrativo:
https://drive.google.com/file/d/1_LTzXGjLtSVqGJ9uOzPYxDco4mYDmPWs/view?usp=sharing
Os erros no console são devidos a um form na tela, acredito que não tenham relação com o problema nas rotas.
Please, I need help! 🥺
Agradeços a todos que possam contribuir! 🙏
Arquivo app.routes.ts que é importado no main.ts
import { Routes } from '@angular/router';
import { AuthGuard } from './guards/auth.guard';
export const routes: Routes = [
{
path: 'login',
loadComponent: () => import('./login/login.page').then((m) => m.LoginPage),
},
{
path: 'create-account',
loadComponent: () =>
import('./create-account/create-account.page').then(
(m) => m.CreateAccountPage,
),
},
{
path: 'use-terms',
loadComponent: () =>
import('./use-terms/use-terms.page').then((m) => m.UseTermsPage),
},
{
path: 'privacy-policy',
loadComponent: () =>
import('./privacy-policy/privacy-policy.page').then(
(m) => m.PrivacyPolicyPage,
),
},
{
path: '',
loadComponent: () =>
import('./logged-pages/logged-pages.page').then((m) => m.LoggedPagesPage),
canActivate: [AuthGuard],
children: [
{
path: 'home',
loadComponent: () => import('./home/home.page').then((m) => m.HomePage),
},
{
path: 'folder/:id',
loadComponent: () =>
import('./folder/folder.page').then((m) => m.FolderPage),
},
],
},
{
path: 'not-found',
loadComponent: () =>
import('./not-found/not-found.page').then((m) => m.NotFoundPage),
},
{
path: '**',
redirectTo: '/not-found',
},
];
Arquivo do standalone component da página de criar conta:
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { Component } from '@angular/core';
import {
FormControl,
FormGroup,
ReactiveFormsModule,
Validators,
} from '@angular/forms';
import { Router } from '@angular/router';
import { IonicModule, LoadingController } from '@ionic/angular';
import { ToastService } from '../services/toast/toast.service';
import { UserService } from '../services/user/user.service';
import { UtilsService } from '../services/utils/utils.service';
import { AppVetHeaderComponent } from '../shared/app-vet-header/app-vet-header.component';
import { AppVetPasswordInput } from '../shared/app-vet-password-input/app-vet-password-input.component';
@Component({
selector: 'app-create-account',
templateUrl: './create-account.page.html',
styleUrls: ['./create-account.page.scss'],
standalone: true,
imports: [
IonicModule,
AppVetHeaderComponent,
ReactiveFormsModule,
HttpClientModule,
CommonModule,
AppVetPasswordInput,
],
})
export class CreateAccountPage {
constructor(
private router: Router,
private loadingController: LoadingController,
private userService: UserService,
private toastService: ToastService,
private utilsService: UtilsService,
) {}
public createAccountForm = new FormGroup(
{
name: new FormControl('', [
Validators.minLength(5),
Validators.maxLength(50),
Validators.required,
]),
email: new FormControl('', [Validators.email, Validators.required]),
password: new FormControl('', [
Validators.minLength(8),
Validators.maxLength(50),
this.utilsService.passwordStrengthValidator(),
Validators.required,
]),
confirmPassword: new FormControl('', [
Validators.minLength(8),
Validators.maxLength(50),
Validators.required,
]),
phone: new FormControl('', [
Validators.minLength(10),
Validators.maxLength(11),
Validators.pattern(/^\d+$/i),
]),
profileImageUrl: new FormControl(''),
acceptTerms: new FormControl(false, [Validators.requiredTrue]),
},
{
validators: [UtilsService.passwordMatchValidator],
},
);
async createAccount() {
this.createAccountForm.markAllAsTouched();
if (this.createAccountForm.invalid || !this.createAccountForm.touched) {
this.toastService.showToastError({
message: 'Preencha todos os campos corretamente',
});
return;
}
const loading = await this.loadingController.create({
message: 'Criando conta',
});
try {
await loading.present();
await this.userService.createAccount({
email: this.createAccountForm.controls.email.value ?? '',
password: this.createAccountForm.controls.password.value ?? '',
name: this.createAccountForm.controls.name.value ?? '',
phone: this.createAccountForm.controls.phone.value ?? null,
profileImageUrl:
this.createAccountForm.controls.profileImageUrl.value ?? null,
});
this.router.navigate(['home']);
} catch (error: any) {
console.error(error);
this.toastService.showToastError({
message: error?.error?.message || 'Erro ao criar conta',
});
} finally {
await loading.dismiss();
}
}
}