Executando verificação de segurança...
1

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();
    }
  }
}
Carregando publicação patrocinada...