How to properly pass a parameter value to an Angular service when using inject.get in the constructor

After experimenting with injecting services in Angular, I encountered an issue when trying to call LogService within GlobalErrorHandler. Despite my best efforts, the code below just wouldn't work.

I discovered that the problem stemmed from not passing a userId parameter to the constructor of LogService. Interestingly, removing the userId requirement allowed the code to function properly, but that's not the ideal solution for me as it breaks other functionalities.

As a newcomer to Angular, I'm eager to learn how I can pass the userId while calling LogService in GlobalErrorHandler. Any insight or suggestions would be greatly appreciated. Thank you!

@Injectable({
  providedIn: 'root'
})
export class LogService {
  private logger!: Logger;

  constructor(private userId: string) {}
}

The following snippet is where LogService is called from another file:

export class GlobalErrorHandler extends ErrorHandler {
  constructor(private injector: Injector) {
    super();
  }

  public handleError(error: any | HttpError | HttpErrorResponse ) {
    const logService: LogService = this.injector.get(LogService); // The error occurs at this line and halts progress :(
    const router: Router = this.injector.get(Router);

    const message = error.message ? error.message : error.toString();
    if (error.status) {
      error = new Error(message);
    }
}

Answer №1

I don't typically utilize injector: Injector, so I'm unable to assist with the syntax.

Another approach you could consider is:

  1. Develop a GlobalErrorHandlerService similar to your LogService.
  2. Within the constructor of GlobalErrorHandlerService, include private logService : LogService .
  3. In your LogService file, create a method for setting the user id like setUserId(userId:string)....
  4. Call
    this.logService.setUserId(userId)
    within the constructor of GlobalErrorHandlerService.

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

Step-by-step guide on implementing a draggable component for selecting the year using React

I am looking to develop a draggable component in React without relying on any third-party library. Below, I have provided an image depicting how the component might look. Currently, my component code appears as follows: import React from 'react'; ...

The Threejs Raycaster detects collisions with objects even when the ray is just grazing the surface

Within my Vue component, I have integrated a threejs scene and I am facing an issue with selecting objects using the mouse. I am currently using the OnPointerDown event and raycaster to locate objects under the mouse pointer. However, it seems like the ray ...

I'm having trouble with npm install, it's not working as expected

After downloading node.js, I encountered errors when trying to run the CLI command npm install -g @angular/cli: npm ERR! code ENOTFOUND npm ERR! errno ENOTFOUND npm ERR! network request to http://registry.npmjs.org/@angular%2fcli failed, reason: getaddrin ...

Is it possible to utilize TypeScript version 2.0.6 in conjunction with Visual Studio 2017?

Is it possible to utilize TypeScript 2.0.6 with Visual Studio 2017, or do I need to use a version greater than 2.1? Also, can you explain the difference between Microsoft.TypeScript.Compiler and Microsoft.TypeScript.MSBuild? If I don't have Microsof ...

What is the best way to verify both a null value and a length simultaneously within a template condition?

There is a data that can be null or an empty array, but the template should still be rendered if leaseApDto is not null or has a length greater than 0. I attempted to use the condition model.leaseApDto !== null || model.leaseApDto.length !=== 0, but they ...

Sending data to back-end server using Multer, Node.js, and Express via a POST request

I have been facing an issue while trying to send a form from my local system to the backend server via a POST request. Every time, it seems to go with --binary-data instead of going with --form. Below is a sample curl command that I am looking to replicat ...

Is it possible to adjust the height of the dropdown menu in a mat-select component in Angular 7?

How can I adjust the height of a mat-select in Angular7 to display all items properly? Here is my component file: import { Component, ViewEncapsulation } from "@angular/core"; import { FormControl } from "@angular/forms"; /** @title Select with multiple ...

Step-by-step guide on integrating jQuery-ui with Asp Core+ Angular 4 template using Visual Studio 2017

Using the Asp Core+webpack+ Angular 4 template from VS 2017, I am trying to figure out how to load jQuery-ui. I attempted to put it in webpack.config.vendor.js: const treeShakableModules = [ '@angular/animations', '@angular/common&a ...

Tips for integrating Typescript definitions into the Express req and res objects

I have been encountering numerous errors in my REST API controller functions, specifically: error TS7006: Parameter 'req' implicitly has an 'any' type. The same issue is present for res. I have tried various solutions involving typing ...

Utilizing string literals as index signatures

I've created a code snippet called MyTest that maps over an object: type MyTest<T> = { [P in keyof T]: T[P]; }; type Result = MyTest<{hello: 'world', foo: 2}>; // ^? type Result = { hello: 'world', foo: 2 } ...

When utilizing the package, an error occurs stating that Chart__default.default is not a constructor in chart.js

I have been working on a project that involves creating a package with a react chart component using chart.js. Everything runs smoothly when I debug the package in storybook. However, I encountered an error when bundling the package with rollup, referenc ...

One cannot use a type alias as the parameter type for an index signature. It is recommended to use `[key: string]:` instead

I encountered this issue in my Angular application with the following code snippet: getLocalStreams: () => { [key: Stream['key']]: Stream; }; During compilation, I received the error message: An index signature parameter typ ...

How can I detect if a control value has been changed in a FormGroup within Angular 2? Are there any specific properties to look

I am working with a FormGroup that contains 15 editable items, including textboxes and dropdowns. I am looking to identify whether the user has made any edits to these items. Is there a specific property or method I can use to check if the value of any i ...

Show a roster of individuals by inputting values that will populate the list with their names

I'm attempting to showcase a list of users by taking the value from an input and using it as a parameter in a get() method. After receiving the response from the get() method, I am pushing it into an object and then trying to display this object in th ...

The recognition of Angular ngrx union type actions is hindered by discrepancies in constructors

The actions classes and union type are displayed below. Unfortunately, these actions are not being recognized during the application's execution. export class Login implements Action { readonly type = LOGIN; constructor( public payload: { ...

Revealing a single element in an Angular 6 application that is utilized by several modules

As I am in the process of breaking down a large module into smaller ones, I have encountered an issue that needs to be addressed. Here are the specifics: The Search component is currently being used across multiple components. Initially, it was declared i ...

Tips on ensuring that only one Angular Material expansion panel expands at a time

I have designed a mat expansion panel and I would like to ensure that only one panel can be expanded at a time. In other words, I want it so that when one record is expanded and I click on another record of the mat expansion, the previously expanded reco ...

Issue with displaying entire object using Jest and console.dir

I'm having trouble displaying an error in my Jest test because it's not showing all the levels as expected. import util from 'util' describe('Module', () => { it('should display all levels WITHOUT util', () =& ...

Ensuring that the field is empty is acceptable as long as the validators are configured to enforce

I have successfully created a form using control forms. idAnnuaire: new FormControl('',[Validators.minLength(6),Validators.maxLength(6)]), However, I am facing an issue where when the field is left empty, {{form.controls.idAnnuaire.valid }} is ...

`Is there a way to manage date formats across all components using a single method in Angular?`

I need assistance with controlling the date format of dates displayed in different components using one typescript file. How can I achieve this? app.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', ...