Getting "Cannot GET /login" when accessing routed component in angular problem

I am trying to create a login/register for my Angular and spring project and I am having trouble routing my component. Whenever I go to localhost:4200/login, my login component does not get loaded up, instead I see "Cannot GET /login" and get a GET 404 Not Found in my browser dev tool.

Same thing is happening for register.

app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
selector: 'app-root',
imports: [RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
title = 'CodeQuizzer-ui';
}


app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {RegisterComponent} from './pages/register/register.component';
import {LoginComponent} from './pages/login/login.component';
import {HomeComponent} from './pages/home/home.component';

export const routes: Routes = [
{
path: 'login',
component: LoginComponent
},
{
path: 'register',
component: RegisterComponent
},
{
path: '',
component: HomeComponent
}
];

@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule]
})
export class AppRoutingModule {}


login.component.ts

import { Component } from '@angular/core';
import {AuthenticationRequest} from '../../api/models/authentication-request';
import {FormsModule} from '@angular/forms';
import {CommonModule} from '@angular/common';
import {Router} from '@angular/router';
import {AuthenticationService} from '../../api/services/authentication.service';
import {TokenService} from '../../services/token/token.service';

@Component({
selector: 'app-login',
imports: [
FormsModule,
CommonModule,
],
templateUrl: './login.component.html',
styleUrl: './login.component.scss'
})
export class LoginComponent {

authRequest: AuthenticationRequest = {email: '', password: ''};
errorMsg: Array<string> = [];

constructor(
private router: Router,
private autheService: AuthenticationService,
private tokenService: TokenService,
) {
}

login() {
this.errorMsg = [];
this.autheService.authenticate({
body: this.authRequest
}).subscribe({
next: (res) => {
this.tokenService.token = res.token as string;
this.router.navigate(['home']);
},
error: (err) => {
console.log(err);
if (err.error.validationErrors) {
this.errorMsg = err.error.validationErrors;
} else {
this.errorMsg.push(err.error.error);
}
}
})
}

register() {
this.router.navigate(['register']);
}
}


I have tried adding "{ useHash: true }" in my app-routing.module.ts. I have tried changing base href (in index.html) between <base href="/"> and <base href="./">

I should also note that the HomeComponent does work as expected when going to localhost:4200.

Here are links to my frontend and backend repo: frontend backend

index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CodeQuizzerUi</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>

Continue reading...