ngx-cookie-service is giving me Error: NG0203, what am i doing wrong?

Question

i"m currently working on a LoginComponent in my Angular app. When i want to press the button that navigates to it i get the following error:

core.mjs:10572 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 NodeInjectorFactory._class_Factory [as factory] (ngx-cookie-service.mjs:197:84)
    at getNodeInjectable (core.mjs:4738:44)
    at searchTokensOnInjector (core.mjs:4665:16)
    at lookupTokenUsingNodeInjector (core.mjs:4614:34)
    at getOrCreateInjectable (core.mjs:4526:23)
    at Module.ɵɵdirectiveInject (core.mjs:11764:19)
    at NodeInjectorFactory.LoginComponent_Factory [as factory] (login.component.ts:13:28)
    at getNodeInjectable (core.mjs:4738:44)
    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, inject } 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'],
  providers: [CookieService]
})
export class LoginComponent {
  model: LoginRequest;

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

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

        

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

I allready know it has to do something with the cookieService. I've been reading their documentation, but i can't seem to fix this error for the past 4 days.

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';
import { CookieService } from 'ngx-cookie-service';




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

And my auth.service.ts:

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
    });
  }
}

Does anyone have an idea how to fix this?

Answer 1

Okay so i managed to find out what the problem was. I'm a bit ashamed but i hope that i might help someone.

First of all you only need to inject CookieService in app.module.ts. This in provided in root. Next, Try installing: npm install ngx-cookie-service. At last, inject CookieService in your constructor

Adding it to your Angular app doesnt mean it's Node package is installed. Lesson learned.

Answer 2

I had the same problem on my project. I had made a "npm install ngx-cookie-service" in the root folder of my project. Now in my project there are 2 package.json because I develop the server and the web application with express and angular. To solve the problem I uninstalled it from the package.json (because from the root folder it was going to the server package), then I went to the Angular client/src/app directory (for me) then I did "ng add ngx-cookie-service" and ng serve, which solved the problem.