Angular class multiple error with what seems like service injection

Question

Hello I'm currently working with an application where I have one component and two services : the LoginPage component, the GlobalVariableService and LoginServiceuses the two services. The LoginPage component uses the two services.

import { Component, OnInit } from '@angular/core';
import { ValidationError } from 'webpack';
import {FormBuilder,Validators} from '@angular/forms';
import { LoginService } from 'src/app/services/login.service';

@Component({
  selector: 'app-login-page',
  templateUrl: './login-page.component.html',
  styleUrls: ['./login-page.component.scss'],
})
export class LoginPageComponent implements OnInit {
  authForm = this.formBuilder.group({
    email: ['', Validators.required, Validators.minLength(4)],
    password: ['',Validators.required, Validators.minLength(4)]
  });

  authFormValidationErrors: ValidationError[] = [];
  constructor(private formBuilder: FormBuilder, private loginSrv : LoginService) {}

  ngOnInit(): void {
  }

  get authEmail() {
    return this.authForm.get('email')?.value as string;
  }

  get authPassword() {
    return this.authForm.get('password')?.value as string;
  }

  authenticateUser() {
    this.authFormValidationErrors = [];
    if (!this.authForm.valid) {
      this.authFormValidationErrors = this.authForm
        .errors as ValidationError[];
    }

    this.loginSrv.authenticateUser(this.authEmail, this.authPassword);
  }
}

The GlobalVariablesService has variables avalaibled throughout the application. It is currently used by the LoginPage component and the LoginService.

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class GlobalVariablesService {
  private _userToken : BehaviorSubject<string> = new BehaviorSubject<string>("");

  constructor() { }


 public trackUserToken() : Observable<string>{
  return this._userToken.asObservable();
 }
 public getUserToken() : string{
  return this._userToken.getValue();
 }

 public setUserToken(token :string) :void{
  this._userToken.next(token);
 }
  
}

The LoginService is called by the Loginpage component to simulate a fake authentication. the service currently just sets a fake token in the globalVariable service.

I'm currently having multiple error on compilation and it seems to be when my LoginPage component is injected with the loginService, all error disappear when I remove all reference about it in the loginPage component. picture of the error received

Here is my app.module :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AppLogoComponent } from './components/app-logo/app-logo.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {MatButtonModule} from '@angular/material/button';
import {MatTabsModule} from '@angular/material/tabs';
import {MatCardModule} from '@angular/material/card';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatIconModule} from '@angular/material/icon';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { HomePageComponent } from './pages/home-page/home-page.component';
import { LoginPageComponent } from './pages/login-page/login-page.component';
import { LoginService } from './services/login.service';
import { GlobalVariablesService } from './services/global-variables.service';

@NgModule({
  declarations: [
    AppComponent,
    AppLogoComponent,
    LoginPageComponent,
    HomePageComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,

    MatButtonModule,
    MatTabsModule,
    MatCardModule,
    MatInputModule,
    MatFormFieldModule,
    MatIconModule
  ],
  providers: [LoginService, GlobalVariablesService],
  bootstrap: [AppComponent]
})
export class AppModule {}

Do you have any idea of what could be the problem pls? It's the first time I post a question on a forum, sorry if I forgot something important in my explanation. Thanks for the time you'll spend on my question !

Answer 1

Helios solved my problem in the comment of my question -> "The service import in your component is probably wrong (unless you have tsconfig paths configured). Try a relative import instead of src/app/services/login.service"

I'm positing it here so that I can validate it and set the issue as validated