Angular Routing Not Working: Login Form Does Not Navigate to /login Route

I have a login form:

import { Component, ViewChild } from "@angular/core";
import { NgForm } from "@angular/forms";
import { AuthService } from "@app/auth/services/auth.service";

@Component({
selector: "app-login-form",
templateUrl: "./login-form.component.html",
styleUrls: ["./login-form.component.scss"],
})
export class LoginFormComponent {
constructor(private authService: AuthService) {} // Inject AuthService

@ViewChild("loginForm") public loginForm!: NgForm;
onSubmit() {
if (this.loginForm.valid) {
const user = {
email: this.loginForm.value.email,
password: this.loginForm.value.password,
};

this.authService.login(user).subscribe({
next: (response) => {
console.log("Login successful!", response);
// this.router.navigate(['/dashboard'])
},
error: (error) => {
console.error("Login failed", error);
},
});
} else {
console.log("Form is invalid");
}
}
}


app-routing.module

import { RouterModule, Routes, RouterOutlet } from "@angular/router";
import {
CourseCardComponent,
CourseFormComponent,
LoginFormComponent,
RegistrationFormComponent,
} from "./shared/components";
import { CoursesComponent } from "./features/courses/courses.component";
import { CourseInfoComponent } from "./features/course-info/course-info.component";

// Import guards
import { AuthorizedGuard } from "./auth/guards/authorized.guard";
import { NotAuthorizedGuard } from "./auth/guards/not-authorized.guard";
import { AdminGuard } from "./user/guards/admin.guard";
import { AppComponent } from "./app.component";
import { NgModule } from "@angular/core";

export const routes: Routes = [
// Protect the login and registration routes with the NotAuthorizedGuard
{
path: "",
component: AppComponent,
// canActivate: [NotAuthorizedGuard],
},
{
path: "login",
component: LoginFormComponent,
// canActivate: [NotAuthorizedGuard],
},
{
path: "registration",
component: RegistrationFormComponent,
// canActivate: [NotAuthorizedGuard],
},

// Protect courses-related routes with the AuthorizedGuard
{ path: "courses", component: CoursesComponent, canLoad: [AuthorizedGuard] },
{
path: "courses/add",
component: CourseFormComponent,
// canActivate: [AdminGuard],
},
{
path: "courses/:id",
component: CourseInfoComponent,
// canActivate: [AuthorizedGuard],
},
{
path: "courses/edit/:id",
component: CourseCardComponent,
// canActivate: [AdminGuard],
},

// Default and wildcard routes
{ path: "", redirectTo: "/courses", pathMatch: "full" }, // Default/fallback route
{ path: "**", redirectTo: "/courses", pathMatch: "full" }, // Wildcard route to handle unknown URLs
];

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

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
import { SharedModule } from "@shared/shared.module";
import { AppComponent } from "@app/app.component";
import { CourseInfoComponent } from "@features/course-info/course-info.component";
import { NotAuthorizedGuard } from "@app/auth/guards/not-authorized.guard";
import { AuthorizedGuard } from "@app/auth/guards/authorized.guard";
import { CoursesStoreService } from "@app/services/courses-store.service";
import { CoursesService } from "@app/services/courses.service";
import { CoursesComponent } from "./features/courses/courses.component";
import { CoursesListComponent } from "./features/courses/courses-list/courses-list.component";
import { AppRoutingModule } from "./app-routing.module";

@NgModule({
declarations: [
AppComponent,
CourseInfoComponent,
CoursesComponent,
CoursesListComponent,
],
imports: [BrowserModule, SharedModule, FontAwesomeModule, AppRoutingModule],
providers: [
AuthorizedGuard,
NotAuthorizedGuard,
CoursesService,
CoursesStoreService,
],
bootstrap: [AppComponent],
})
export class AppModule {}


and shared-module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { ModalComponent } from './components/modal/modal.component';
import {
HeaderComponent,
ButtonComponent,
InfoComponent,
SearchComponent,
CourseCardComponent,
LoginFormComponent,
RegistrationFormComponent,
CourseFormComponent
} from "./components";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import { DurationPipe } from './pipes/duration.pipe';
import { CustomDatePipe } from './pipes/custom-date.pipe';
import { EmailValidatorDirective } from '@shared/directives/email.directive';

const components = [
HeaderComponent,
ButtonComponent,
InfoComponent,
SearchComponent,
ModalComponent,
CourseCardComponent,
LoginFormComponent,
RegistrationFormComponent,
CourseFormComponent,
DurationPipe,
CustomDatePipe,
EmailValidatorDirective
];

@NgModule({
declarations: [components],
imports: [
CommonModule,
FontAwesomeModule,
FormsModule,
ReactiveFormsModule,
],
exports: [components]
})
export class SharedModule { }


and the app.component.html is simply:

<app-header>
<app-button button_text="Login" routerLink="/login"></app-button>
</app-header>


The problem is that routing doesnt work If i want to access 'login' form nothing happens, also, the routerLink doesnt work. If i click it, simply nothings happend and it throws no error?

I tried adding but it somehow it is there already. What is wrong with these modules?

Continue reading...