NG0200: Circular dependency in DI detected while instantiating a provider / NG0203:

Question

I'm currently working on a login component in my Angular front-end. I get this error upon clicking towards the button that navigates to the LoginComponent:

ERROR Error: Uncaught (in promise): Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more at https://angular.io/errors/NG0203
Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more at https://angular.io/errors/NG0203
    at injectInjectorOnly (core.mjs:731:15)
    at Module.ɵɵinject (core.mjs:744:60)
    at Object._class_Factory [as factory] (ngx-cookie-service.mjs:197:84)
    at core.mjs:9412:43
    at runInInjectorProfilerContext (core.mjs:694:9)
    at R3Injector.hydrate (core.mjs:9411:17)
    at R3Injector.get (core.mjs:9281:33)
    at ChainedInjector.get (core.mjs:13981:36)
    at lookupTokenUsingModuleInjector (core.mjs:4484:39)
    at getOrCreateInjectable (core.mjs:4532:12)
    at resolvePromise (zone.js:1193:31)
    at resolvePromise (zone.js:1147:17)
    at zone.js:1260:17
    at _ZoneDelegate.invokeTask (zone.js:402:31)
    at core.mjs:10715:55
    at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:10715:36)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at Object.onInvokeTask (core.mjs:11028:33)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at Zone.runTask (zone.js:173:47)

When i click the button once more i get this error:

core.mjs:10572 ERROR Error: Uncaught (in promise): Error: NG0200: Circular dependency in DI detected for CookieService. Find more at https://angular.io/errors/NG0200
Error: NG0200: Circular dependency in DI detected for CookieService. Find more at https://angular.io/errors/NG0200
    at throwCyclicDependencyError (core.mjs:228:11)
    at R3Injector.hydrate (core.mjs:9406:13)
    at R3Injector.get (core.mjs:9281:33)
    at ChainedInjector.get (core.mjs:13981:36)
    at lookupTokenUsingModuleInjector (core.mjs:4484:39)
    at getOrCreateInjectable (core.mjs:4532:12)
    at Module.ɵɵdirectiveInject (core.mjs:11764:19)
    at NodeInjectorFactory.LoginComponent_Factory [as factory] (login.component.ts:12:28)
    at getNodeInjectable (core.mjs:4738:44)
    at createRootComponent (core.mjs:14236:35)
    at resolvePromise (zone.js:1193:31)
    at resolvePromise (zone.js:1147:17)
    at zone.js:1260:17
    at _ZoneDelegate.invokeTask (zone.js:402:31)
    at core.mjs:10715:55
    at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:10715:36)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at Object.onInvokeTask (core.mjs:11028:33)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at Zone.runTask (zone.js:173:47)

This is my login.component.ts

import { Component } from '@angular/core';
import { LoginRequest } from 'src/models/login-request.model';
import { AuthService } from 'src/services/auth.service';
import { CookieService } from 'ngx-cookie-service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent {
  model: LoginRequest;

  constructor(
    private authService: AuthService,
    private cookieService: CookieService,
    private router: Router) {
    this.model = {
      email: '',
      password: ''
    };
  }

  onFormSubmit(): void {
    this.authService.login(this.model)
    .subscribe({
      next: (response) => {
        //Set auth cookie
        this.cookieService.set('Authorization', `Bearer ${response.token}`,
        undefined, '/', undefined, true, 'Strict');

        this.router.navigateByUrl('/');
      }
    });
  }
}

I already know that the problem is coming from the "private CookieService: Cookieservice" which i inject in the constructor. And apparently it detects a ciruclar DI while this is the only place i am currently using it. I've had this problem before when injecting the authservice, but adding it HttpClientModule to my app.module.ts fixed that for me. When i try the same thing with this problem it doesn't fix it for me and shows a red squigly line. Here is my app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header/header.component';
import { LoginComponent } from './components/login/login.component';
import { FormsModule } from '@angular/forms';




@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here is my auth.service.ts just to make this complete:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { LoginRequest } from 'src/models/login-request.model';
import { LoginResponse } from 'src/models/login-response.model';
import { HttpClient } from '@angular/common/http';
import { environment } from 'src/environments/environment';


@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private http: HttpClient) { }
 
  login(request: LoginRequest): Observable<LoginResponse> {
    return this.http.post<LoginResponse>(`${environment.apiBaseUrl}/api/auth/login`, {
      email: request.email,
      password: request.password
    });
  }
}

At last I'm using this as CookieService: https://www.npmjs.com/package/ngx-cookie-service

I tried adding cookieservice to app.module. I expected it to fix the circular DI