AuthenticationService causes automatic navigation

I have a login screen in angular. But every time I try to open it (localhost:4200/login) it opens this but than jumps to localhost:4200.

import { Component, signal } from '@angular/core';
import { Router } from '@angular/router';
import { GenericPanelComponent } from '../../common/generic-panel/generic-panel.component';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { TokenService } from '../../token/token.service';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { AuthenticationRequest, AuthenticationService } from '../../../services';

@Component({
selector: 'app-login',
standalone: true,
imports: [GenericPanelComponent, MatCardModule, MatInputModule, MatFormFieldModule, MatButtonModule],
templateUrl: './login.component.html',
styleUrl: './login.component.scss'
})
export class LoginComponent {
authRequest: AuthenticationRequest = { email: '', password: ''};
errorMsg: Array<string> = [];

primary: string = 'purple';
accent: string = 'green';

email = signal('');
password = signal('');

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

login(): void {
this.errorMsg = [];
}

registerConsumer(): void {
this.router.navigate( ['register-consumer']);
}

registerVendor(): void {
this.router.navigate( ['register-vendor']);
}
}


The funny thing is, that if I comment out the line "private authService: AuthenticationService," the login page stays in the browser. The AuthenticationService has been generated via open api. I'd like to share my authentication.service.ts but need a hint, how I can provide this to you.

The defined routes are:

export const routes: Routes = [
{
path: 'login',
component: LoginComponent
},
{
path: 'register-consumer',
component: RegisterConsumerComponent
},
{
path: 'register-vendor',
component: RegisterVendorComponent
},
{
path: 'activate-account',
component: ActivateAccountComponent
}
];

Continue reading...