I am encountering an Error: NG0203 with ngx-cookie-service. Can anyone suggest what mistake I might be making?

I am currently developing a LoginComponent for my Angular application. Upon trying to navigate to it by pressing the button, an error is encountered:

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)
    ... 

The login.component.ts file includes the following code snippet:

import { Component, inject } from '@angular/core';
...

It seems that the issue may be related to the CookieService. Despite spending the last few days reading their documentation, I have not been able to resolve this error.

The app.module.ts file contains:

import { NgModule } from '@angular/core';
...

Additionally, the auth.service.ts file is structured as follows:

import { Injectable } from '@angular/core';
...

If anyone has suggestions on how to address this problem, your insights would be greatly appreciated.

Answer №1

After some investigation, I discovered the root of the issue. I may feel a bit embarrassed, but I hope sharing my experience can benefit others.

Firstly, ensure you inject CookieService in app.module.ts as it is provided in root. Then, consider installing ngx-cookie-service by running npm install ngx-cookie-service. Finally, remember to inject CookieService in your constructor.

Simply adding it to your Angular app does not automatically install its Node package. A valuable lesson indeed.

Answer №2

Encountering a similar issue in one of my projects, I faced the challenge of having multiple package.json files due to working on both the server and client sides using express and angular. To tackle this dilemma, I removed ngx-cookie-service from the root folder's package.json (as it was affecting the server side), navigated to the Angular directory within the client/src/app folder, executed "ng add ngx-cookie-service", and then ran ng serve. This approach effectively resolved the problem for me.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide for updating files in a directory using webpack configuration in JHipster

Is there a way to replace files in a folder using webpack's config in JHipster? Specifically, I'm looking to have dev-config replace files in the "webapp/app/home" folder with "environments/dev/home". I'm aware that @angular-devkit/build-an ...

How to set the default option in a select dropdown using Angular and Types

It's been a while since I last worked with Angular and now I'm tasked with working on an existing system. I introduced an NgModal dialog to send text messages, designed as shown here: https://i.sstatic.net/67U1M.png Below is the code snippet I ...

The Angular HttpClient Service will exclusively provide responses that have a status code of 200

I'm facing an issue with my login component where it calls an http client service to send a request to the server for logging in. Everything works smoothly when I enter valid credentials, but if I input wrong credentials, the service doesn't seem ...

Secure Angular Applications on Azure using Content Security Policy Nonce

Seeking assistance here after not getting much response on ServerFault. I need help implementing a nonce for our CSP header policy. My goal is to eliminate "unsafe-inline" from the script-src policy by binding a nonce for angular's inline scripts. How ...

The formBuilder property has been declared in the code, but it seems to be lying unused as its value is never being accessed or

In my tsconfig.json file, I included these properties under compilerOptions: "compilerOptions": { "noUnusedLocals": true, "noUnusedParameters": true }, When I open my code in Visual Studio Code, I noticed that the unused variables are highlig ...

Converting Venn diagram code from JavaScript <script> tags to Angular 2: A step-by-step guide

I am struggling to incorporate a Venn diagram into my Angular 2+ project. I followed the code sample provided at - http://jsfiddle.net/johnpham92/h04sknus/ To begin, I executed the following command - npm install venn.js Then I proceeded with impl ...

When attempting to navigate to the index page in Angular, I encounter difficulties when using the back button

I recently encountered an issue with my Angular project. On the main index page, I have buttons that direct me to another page. However, when I try to navigate back to the index page by clicking the browser's back button, I only see a white page inste ...

How do we set and update object properties in Angular 2, specifically with regards to changing the color?

https://i.sstatic.net/N79LB.png I'm having trouble setting note.color=color.color and updating the note. How can we achieve this? Here is the HTML code where the note is not updating when the color changes: <div class="card card-1" *ngFor="let n ...

An issue was encountered during the AOT build with Angular and Kendo UI: "Error stating that the identifier 'territoryFromName' has already been declared."

Unexpectedly, our AOT build encountered a failure even though there had been no recent changes to our package. The error message displayed was as follows: ERROR in chunk vendor [initial] [name].bundle.js Identifier 'territoryFromName' has a ...

Mat Date Picker exhibits overflow issue when in use

I have encountered an issue in my Angular project where the mat date picker overflows when opened in various places. I am uncertain about the root cause of this issue, as it seems to be happening throughout the application and not just in one specific loca ...

The issue arises when attempting to apply a class binding to the mat-card element, as the mat-card class

When a single class binding is applied to mat-card, the mat-card class does not bind. <mat-card cdkDropList [className]="getClassName(item)"><!-- some content--></mat-card> In this scenario, the class name appears as something ...

Stop child elements from spilling out of the parent container without using fixed height measurements

I am in the process of creating an angular component with a header, buttons, a table, more buttons, and a footer. However, I am facing some challenges with the layout. <my-component> <div>Header Section</div> <some-stuff class=&quo ...

Leverage the geocode callback function results from Google Maps in NodeJS to render a map on the AngularJS 2 component template

Hey there, I'm currently utilizing the Google Maps Node.js client web API and want to showcase a map on my HTML views using AngularJS 2. I have a server export that sends an object to my AngularJS2 client service const googleMapsClient = require(&ap ...

What is the process for utilizing global packages when running `ng serve`?

After successfully using npm to download and install packages globally for my project, I encountered an error when running ng serve --port 34000: C:\app>ng serve --port 34000 Node packages may not be installed. Try installing with 'npm install ...

`mobilscrool events paired with TypeScript functions`

I am looking to implement the mobiscroll event for the calendar object (onMonthLoaded) in a way that allows me to have the logic outside of the settings element of mobiscroll. Here is an example of my code: export class CalendarComponent { constr ...

Distinguish between multiple occurrences of the same component in Angular 2

I've recently started learning Angular 2 and have a query regarding components. I have created a component called "dropdownComponent" that generates dropdown components. However, when using this component multiple times, I'm unsure how to differe ...

Leveraging third-party libraries within an Angular 2+ project powered by webpack

I am a beginner in Angular 2 and currently working on a new client-side application generated using angular2 cli (with webpack2). I need to utilize the splunkjs object from an external library, which can be found at https://github.com/splunk/splunk-sdk-jav ...

TypeScript does not evaluate the boolean left operand when using the && operator

While working with TypeScript, I encountered a scenario similar to the code snippet below: const getString = (string: string) => string // No errors getString("foo"); // Argument of type 'boolean' is not assignable to parameter of ...

tips for deactivating routerLink functionality on anchor elements

Working on an Angular application that requires me to create an image slider. However, due to the presence of router links in the application, the anchor tags in the image slider keep redirecting. I want to prevent this redirection and instead successful ...

Errors encountered while trying to install the ngx-admin template through npm

After cloning the ngx-admin angular template from the git repository located at https://github.com/akveo/ngx-admin, I encountered a series of errors when trying to install the node modules and run the project: npm ERR! code 1 npm ERR! path C:\Users&bs ...