Estoy trabajando en mi primer proyecto para la universidad, dentro del mismo tengo un componente para la vista de iniciar sesion, pero al apretar el boton que me deberia mandar al mismo, los componentes se cargan uno sobre otro, comparto como se ve el html antes de presionar 'iniciar sesion' y como se ve despues:
mi archivo de app-routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { IniciarSesionComponentComponent } from './iniciar-sesion-component/iniciar-sesion-component.component'; // Asegúrate de que la ruta del componente sea correcta
const routes: Routes = [
{ path: 'iniciar-sesion', component: IniciarSesionComponentComponent },
];
el codigo html de app.component.html es:
<router-outlet></router-outlet>
<body>
<div class="container-fluid vh-100 d-flex align-items-center justify-content-center m-0 p-0">
<div class="text-center">
<h1>ScoutLink</h1>
<h5>Tu talento merece ser descubierto.</h5>
<div class="mt-4">
<a class="btn btn-primary btn-outline-dark btn-lg px-5 py-3 me-sm-3 fs-6 fw-bolder" routerLink="/iniciar-sesion">Iniciar Sesion</a>
<a class="btn btn-primary btn-outline-dark btn-lg px-5 py-3 me-sm-3 fs-6 fw-bolder" href="resume.html">Registrarse</a>
</div>
</div>
</div>
</body>