Routing not working as expected in Angular 19

I have a login component as given below:

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatButtonModule } from '@angular/material/button';

@Component({
selector: 'app-login',
standalone: true,
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'],
imports: [
FormsModule,
MatFormFieldModule,
MatInputModule,
MatCheckboxModule,
MatButtonModule,
],
})
export class LoginComponent {

constructor(private router: Router) { }

email: string = '';
password: string = '';
showPassword: boolean = false;

togglePasswordVisibility() {
this.showPassword = !this.showPassword;
}

onSignIn() {
console.log('Sign In:', { email: this.email, password: this.password });
this.router.navigate(['/home']);
}

onSsoLogin() {
console.log('SSO Login clicked');
}
}


This is my home component:

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

@Component({
selector: 'app-home',
standalone: true,
imports: [],
templateUrl: './home.component.html',
styleUrl: './home.component.scss'
})
export class HomeComponent {

}


This is my app.routes.ts:

import { Routes } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';

export const routes: Routes = [
{ path: '', component: LoginComponent }, // Default route for login
{ path: '**', redirectTo: '' }, // Redirect any unmatched route to login
{ path: 'home', component: HomeComponent },
];


And this is login html code:

<button mat-flat-button class="button login-button" type="button" (click)="onSignIn()">
Sign In
</button>


But it is not routing to home component. What am I missing?

Continue reading...