Angular6 HttpClient: Unable to Inject Headers in Get Request for Chrome and IE11

Under my Angular 6 application, I am attempting to make a GET request while injecting some custom Headers:

Here is how my service is structured:

@Injectable()
export class MyService {
constructor(public httpClient: HttpClient) {
}
getUserInfos(login): Observable<any> {
    const headers = new HttpHeaders({'login': login});
    return this.httpClient.get(environment.urls.UserHabilitation, {headers});
}

And in my Component, I handle the subscription as follows:

this.myService.getUserInfos(login).subscribe(infos => {
      console.log(infos);
      error => {
        console.log(error);
});

The above code works correctly in Firefox, but encounters issues in Chrome and IE11. The error message received is:

TypeError: Cannot read property 'length' of null at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.applyUpdate (http.js:199) at http.js:170 at Array.forEach () at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.init (http.js:170) at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.forEach (http.js:235) at Observable._subscribe (http.js:1445) at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:42) at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:28) at subscribeTo.js:21 at subscribeToResult (subscribeToResult.js:6)

Any suggestions on resolving this issue?

Answer №1

It seems like your closing '}' is not correctly placed. The subscribe method can take 2 arguments, one for the execution and another for the error response:

this.myService.getUserInfos(login).subscribe(
      infos => {
        console.log(infos);
      },
      error => {
        console.log(error);
      }
);

Alternatively, you can use a shorter version:

this.myService.getUserInfos(login).subscribe(
      infos => console.log(infos ),
      error => console.log(error)
);

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

What are some ways to implement the 'charCodeAt' method within a for loop effectively?

Currently, I am working on developing a hangman game in JavaScript to enhance my coding skills. One task that I am facing is extracting the keyCode of a character at a particular position within an array. To achieve this, I have been using the 'charCo ...

The process of masking a video with alpha data from another video on canvas seems to be experiencing a

I have a unique setup on my page where I'm masking one video with another. Essentially, when the Play button is pressed, a second video slowly appears over the looping video in the background. This effect is achieved by using a black/white mask transf ...

Updating the state of an object within a mapping function

I've been struggling with this issue for two days now. Despite my efforts to find a solution online, I am still stuck and starting to believe that I might be missing something. The main functionality of the app is to click a button and watch an apple ...

A guide to integrating Material-UI with your Meteor/React application

I encountered an issue while trying to implement the LeftNav Menu from the Material-UI example. The error message I received is as follows: While building for web.browser: imports/ui/App.jsx:14:2: /imports/ui/App.jsx: Missing class properties transf ...

Show the elements of an array (that have been read and processed from a text file) on separate lines using JavaScript

Hello, I have the code below where a user can upload a text file. I attempted to display the output in a div after splitting it using the @ character. The array elements stored in variables are correctly displayed with new lines in an alert, but they are p ...

Tallying discarded objects post removal from drop zone

Is there a way to accurately count dropped items within a dropped area? I have created an example that seems to be working fine but with one minor issue. When I begin removing items, the count does not include the first item and only starts decreasing afte ...

Customize Popover Color in SelectField Component

Looking to customize the SelectField's popover background color in material-ui. Is this possible? After exploring the generated theme, it seems that there is no option for configuring the selectField or popover. Attempted adjusting the menu's ba ...

Experiencing a bug in the production build of my application involving Webpack, React, postCSS, and potentially other JavaScript code not injecting correctly

I've encountered an issue with my webpack.prod.config when building my assets, which may also be related to the JS Babel configuration. While I can successfully get it to work in the development build by inline CSS, the problem arises when attempting ...

How to instantiate an object in Angular 4 without any parameters

Currently, I am still getting the hang of Angular 4 Framework. I encountered a problem in creating an object within a component and initializing it as a new instance of a class. Despite importing the class into the component.ts file, I keep receiving an er ...

Indexing text fields for MongoDB collection that have been populated

Currently, I am in the process of learning how to use indexing with Mongoose/MongoDB and I am facing an issue that I can't seem to resolve. This is the schema I am working with: const timeSchema = new mongoose.Schema({ actionId:{ type:St ...

Different ways to determine if a given string exists within an Object

I have an object called menu which is of the type IMenu. let menu: IMenu[] = [ {restaurant : "KFC", dish:[{name: "burger", price: "1$"}, {name: "french fries", price: "2$"}, {name: "hot dog", d ...

Creating a tree structure in Node.js using JSON data while preventing duplicates: A step-by-step guide

My MongoDB has some JSON data that looks like this: [ { "_id": { "$oid": "1" }, "name": "A Inc", "children": [ {"$oid": "2"},{"$oid": & ...

Guide to Embedding Dynamic Images in HTML Using VUE

I am venturing into the world of VUE for the first time, and I find myself in need of a header component that can display an image based on a string variable. Despite my best efforts to search for tutorials, I have not been able to find a solution. Header ...

Creating a personalized aggregation function in a MySQL query

Presenting the data in tabular format: id | module_id | rating 1 | 421 | 3 2 | 421 | 5 3. | 5321 | 4 4 | 5321 | 5 5 | 5321 | 4 6 | 641 | 2 7 | ...

Angular Universal causing issues with updating the DOM component

@Component({ selector: 'mh-feature-popup', template: ` <div class="full"> <div> <div class="container-fluid" [@featurepop]="state"> <div class="row"> <div class="col-xs-12 col-md-4 col-md-offse ...

JavaScript and DOM element removal: Even after the element is removed visually, it still remains in the traversal

Our goal is to enable users to drag and drop items from a source list on the left to a destination list on the right, where they can add or remove items. The changes made to the list on the right are saved automatically. However, we are encountering an iss ...

Exploring the keyof operator in Typescript for object types

Is there a way to extract keys of type A and transfer them to type B? Even though I anticipate type B to be "x", it seems to also include "undefined". Why does the keyof operator incorporate undefined in the resulting type? It's perplexing. I kn ...

Establishing reducers within Ngrx

I'm currently in the process of setting up a basic Ngrx state management system. # app.module StoreModule.forRoot(reducers), This particular code snippet has been automatically generated using the Ngrx schematics generators. export const reducers: Ac ...

Cluster multiple data types separately using the Google Maps JavaScript API v3

I am looking to implement MarkerClusterer with multiple markers of various types and cluster them separately based on their type. Specifically, I want to cluster markers of type X only with other markers of type X, and markers of type Y with other markers ...

Introduce AngularJS version 2 for better web development

I'm facing an issue with using provide in Bootstrap, and here's my code snippet: import { NgModule, provide } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from &apo ...