It appears that using dedicated objects such as HttpParams or UrlSearchParams do not seem to work when dealing with Angular 5 and HTTP GET query parameters

I'm facing a perplexing issue that I just can’t seem to figure out. Below is the code snippet making a call to a REST endpoint:

this.http.get<AllApplicationType[]>(environment.SUDS_API_SERVICE_URL + environment.SUDS_ALL_APPLICATIONS_URL, this.setQueryParams(page, size)).toPromise() ...

The setQueryParams function has the following structure:

setQueryParams(page?: number, size?: number): {} {
const startFrom = page * size + 1;
const params = new HttpParams();
params.set('startFrom', startFrom.toString());
params.set('maxRecords', size.toString());
return params;

}

Upon backend request execution, the query parameters appear to be null. It’s puzzling why they are not being transferred over. Could it be an incorrect methodology, or is there another reason for this abnormal behavior?

angulartypescriptangular5

Answer №1

After several attempts, it became clear that neither HttpParams nor URLSearchParams objects were effective in my situation. Despite trying both, they failed to deliver the desired results. The workaround involved manually constructing parameters like so:

setRequestParams(page?: number, size?: number): {} {
const startFrom = page * size + 1;
const params = {'startFrom': startFrom.toString(), 'maxRecords': size.toString()};
const options = {params: params};
return options;

}

It appears there may be a bug within Angular HttpClient causing this issue.

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

Try utilizing the array find() method in place of a traditional for loop

Is there a better way to refactor this code using the Array.find() method instead of nested for loops? onLoadTickets() { const ticketsReq = this.ticketService.getTickets(); const tariffsReq = this.tariffService.getTariffs(); forkJoin([ticketsR ...

javascriptarraysangular

Use the class type or any of its derived classes rather than an object of the class itself

I have the following classes class Foo {} class A extends Foo {} class B extends Foo {} Now, I am looking to create an interface with a property named type that should be of type class rather than an instance of a class. interface Bar { type : type ...

typescript

Can you provide information on the latest stable release of animations for Angular 4?

Encountering an error during npm install Warning - @angular/[email protected] requires a peer of @angular/[email protected] but none was installed. Error encountered during npm start Issue with node_modules/@angular/platform-browser/animations ...

angularanimationnpm-install

In Angular/Bootstrap, what does displaying "onChange started" and "onChange completed" in the console signify?

Recently, I incorporated a select element into an Angular component. Upon loading the component in the browser and selecting a value from the list, I noticed these specific messages appearing in the console: onChange started onChange completed I find it p ...

angularbootstrap-5

Support for function calls is not available in Typescript version 2.1.5

I am encountering an issue with my ngrx reducer function: export const raceReducer: ActionReducer<IRace> = ( state: IRace = new Race(), action?: Action ) => { switch ( action.type ) { case RaceActions.ADD_OLP: return ngrxStateUpdater ...

angulartypescript2.1

Creating a Worldwide Authorization Header with HttpClient Interceptors

I have implemented a global authorization header in my app using an interceptor to avoid declaring the authorization header in each get() function. However, I am facing an issue where the token is still being requested when I call the get() functions. Th ...

angularangular-http-interceptorsangular-httpclientangular-http-auth

Having trouble locating a module while implementing lazy loading in an Angular project

I've managed to set up an Angular project successfully on a Mac environment. Angular CLI: 7.0.5 Node: 8.11.3 OS: darwin x64 Angular: 7.0.3 Now, I'm attempting to run the same code on Ubuntu 18.04 with the following setup: Angular CLI: 7.3.9 No ...

angularangular-routingangular-cli-v7

Using Angular 2 to convert and display data as a particular object type in

I have recently developed a basic application using the Angular2 tutorial as my guide. Initially, I established a straightforward "Book" model: /** * Definition of book model */ export class Book { public data; /** * Constructor for Book ...

angulartypescriptrxjs

Ways of utilizing a dynamic key for invoking a resource from prisma

Currently, I am attempting to implement a more general method to retrieve data from Prisma. The function in question appears as follows: import { Prisma, PrismaClient } from '@prisma/client'; import { NextApiRequest, NextApiResponse } from ' ...

typescriptnext.jsprisma

Tips for making concurrent API requests in Angular 7

Can anyone help me with sending multiple requests from different pages in Angular 7 and Typescript? For example, I have a page called Email where I need to send 1000 emails one by one and update the status in a variable. This process should run in the bac ...

angularangular-httpclient

Tips for accessing the return value from a method outside of its containing function

Having recently started using Angular, I'm encountering an issue with retrieving a return value from a function that I have implemented within another one. private validateKeyterm(): boolean { const val = this.form.value.term; if ...

arraysangulartypescripttype-conversiondata-conversion

Is it possible for the Chrome debugger to locate TypeScript files that have not been served by the

I am creating .js.map files to assist in debugging my TypeScript code within Chrome. The js.map files specify the correct location of the TypeScript in the "sources" property. sourceRoot is set to "", and sources represent the path to the TypeScript code ...

google-chrometypescriptsource-mapsjavascript-debugger

Displaying buttons based on the existence of a token in Angular - A guide

Can you assist me with a coding issue I'm facing? I have implemented three methods: login, logout, and isAuthenticated. My goal is to securely store the token in localStorage upon login, and display only the Logout button when authenticated. However, ...

angulartypescriptrxjstoken

Arrange two input fields side by side if the quantity of input fields is unspecified

I am currently in the process of developing a project using Angular. I have implemented an *ngFor loop to dynamically add input fields based on the data retrieved from the backend. Is there a way I can ensure that two input fields are displayed on the same ...

htmlcssangular

Blueprint for constructing an optimal Angular and Spring Boot application.Creating a streamlined process for

I am currently working on constructing a spring boot/angular application. My goal is to run it locally in order to work on the front end login/logout process. To do this, I have angular set up to run on port 4200 and spring boot running on port 8080. How ...

angularspring-boot

Capacitor-enabled Ionic Audio Recording

Finally completed my chat app, but I am looking to enhance the voice messaging feature to be more in line with Messenger rather than a standard file.wav format. Any suggestions or ideas would be greatly appreciated! https://i.stack.imgur.com/soXZC.png Cu ...

androidangularionic-frameworkchatcapacitor

The data structure does not match the exact object type

Why isn't this code snippet functioning as expected? It seems that 'beta' has keys of type string and their values are compatible (id is a number type, and temp is also a number type). Additionally, the Record function should make the values ...

typescript

Is there a way to retrieve the value of bindings in the component controller using Angular 1.5 and Typescript?

In my quest to develop a versatile left-hand menu component that can dynamically display different menu structures based on input strings, I stumbled upon an interesting challenge. By binding a string to the <left-hand-menu-component> element like so ...

javascriptangularjstypescript

Sending Angular base64 image data to the server

I am encountering an issue while attempting to upload a base64 image from Angular to ExpressJS. The image is being created using html2canvas to generate the base64 representation. When I try to upload the imageData in its current format, I receive an error ...

javascriptangularbase64

RouterModule is a crucial external component that is essential for integrating

If I have a very simple component that is part of an Angular component library, it might look like this: mycomponent.module.html <div> <a routerLink="/"> </div> mycomponent.component.ts import { Component, OnInit, Input } from &a ...

angulartypescriptangular-routingangular8