Angular HttpClient query parameters not showing in prod build












0















I have this odd problem where my query parameters of get requests do not work in a prod build, but they do work in a development build.



First I was using the HttpModule, I upgraded to HttpClientModule with hopes the problem might be solved. But unfortunately without success.



When switching to HttpClient I first came across this problem where nested objects were not passed properly. I fixed this by stringifying all nested objects.



Still, the problem remains where no query paramaters are passed when using a prod build.



This is the method that I am using to stringify the data before it is passed to HttpParams:



stringifyObjects() {
for (var prop in this) {
let isObject = typeof this[prop] === 'object' && this[prop] !== null

if(isObject) {
this[prop] = JSON.stringify(this[prop]) as any;
}
}
}


This is the code I am using to pass the params to the request



let params = new HttpParams({
fromObject: data
})

this.http.get(url, {params: params, headers: headers})


Also, I have tried to append every parameter separately:



let httpParams = new HttpParams();

Object.keys(data).forEach(function (key) {
httpParams = httpParams.append(key, data[key]);
});

return this.http.get(url, {params: httpParams, headers: headers})


All with the same result.



Anyone else who came across this issue, or anyone who knows what might be causing this?



Thanks in advance.



EDIT



I added this line to check where the problem starts.



console.log('params.toString()', params.toString());


Found out the this params.toString() returns an empty string (while with a development build, this returns the string correctly). My approach with this was to manually add the string to the url instead of passing is as params.



Still, I have not found a way to fix this or work around this.










share|improve this question

























  • Params and Query params are different for angular. I am unsure what the issue is and if setting is the issue. Alternatively can you check with for...in loop and see if scope resolution is the issue. It's unlikely though. I have face similar issue with append though. Can you check this this might help - stackoverflow.com/questions/45470575/…

    – Gary
    Nov 18 '18 at 6:01













  • the best tool for building HttpClient.get() query params is string template: .get(`${url}?param1=${param1}&...`), using backward quotes

    – WildDev
    Nov 18 '18 at 10:43


















0















I have this odd problem where my query parameters of get requests do not work in a prod build, but they do work in a development build.



First I was using the HttpModule, I upgraded to HttpClientModule with hopes the problem might be solved. But unfortunately without success.



When switching to HttpClient I first came across this problem where nested objects were not passed properly. I fixed this by stringifying all nested objects.



Still, the problem remains where no query paramaters are passed when using a prod build.



This is the method that I am using to stringify the data before it is passed to HttpParams:



stringifyObjects() {
for (var prop in this) {
let isObject = typeof this[prop] === 'object' && this[prop] !== null

if(isObject) {
this[prop] = JSON.stringify(this[prop]) as any;
}
}
}


This is the code I am using to pass the params to the request



let params = new HttpParams({
fromObject: data
})

this.http.get(url, {params: params, headers: headers})


Also, I have tried to append every parameter separately:



let httpParams = new HttpParams();

Object.keys(data).forEach(function (key) {
httpParams = httpParams.append(key, data[key]);
});

return this.http.get(url, {params: httpParams, headers: headers})


All with the same result.



Anyone else who came across this issue, or anyone who knows what might be causing this?



Thanks in advance.



EDIT



I added this line to check where the problem starts.



console.log('params.toString()', params.toString());


Found out the this params.toString() returns an empty string (while with a development build, this returns the string correctly). My approach with this was to manually add the string to the url instead of passing is as params.



Still, I have not found a way to fix this or work around this.










share|improve this question

























  • Params and Query params are different for angular. I am unsure what the issue is and if setting is the issue. Alternatively can you check with for...in loop and see if scope resolution is the issue. It's unlikely though. I have face similar issue with append though. Can you check this this might help - stackoverflow.com/questions/45470575/…

    – Gary
    Nov 18 '18 at 6:01













  • the best tool for building HttpClient.get() query params is string template: .get(`${url}?param1=${param1}&...`), using backward quotes

    – WildDev
    Nov 18 '18 at 10:43
















0












0








0








I have this odd problem where my query parameters of get requests do not work in a prod build, but they do work in a development build.



First I was using the HttpModule, I upgraded to HttpClientModule with hopes the problem might be solved. But unfortunately without success.



When switching to HttpClient I first came across this problem where nested objects were not passed properly. I fixed this by stringifying all nested objects.



Still, the problem remains where no query paramaters are passed when using a prod build.



This is the method that I am using to stringify the data before it is passed to HttpParams:



stringifyObjects() {
for (var prop in this) {
let isObject = typeof this[prop] === 'object' && this[prop] !== null

if(isObject) {
this[prop] = JSON.stringify(this[prop]) as any;
}
}
}


This is the code I am using to pass the params to the request



let params = new HttpParams({
fromObject: data
})

this.http.get(url, {params: params, headers: headers})


Also, I have tried to append every parameter separately:



let httpParams = new HttpParams();

Object.keys(data).forEach(function (key) {
httpParams = httpParams.append(key, data[key]);
});

return this.http.get(url, {params: httpParams, headers: headers})


All with the same result.



Anyone else who came across this issue, or anyone who knows what might be causing this?



Thanks in advance.



EDIT



I added this line to check where the problem starts.



console.log('params.toString()', params.toString());


Found out the this params.toString() returns an empty string (while with a development build, this returns the string correctly). My approach with this was to manually add the string to the url instead of passing is as params.



Still, I have not found a way to fix this or work around this.










share|improve this question
















I have this odd problem where my query parameters of get requests do not work in a prod build, but they do work in a development build.



First I was using the HttpModule, I upgraded to HttpClientModule with hopes the problem might be solved. But unfortunately without success.



When switching to HttpClient I first came across this problem where nested objects were not passed properly. I fixed this by stringifying all nested objects.



Still, the problem remains where no query paramaters are passed when using a prod build.



This is the method that I am using to stringify the data before it is passed to HttpParams:



stringifyObjects() {
for (var prop in this) {
let isObject = typeof this[prop] === 'object' && this[prop] !== null

if(isObject) {
this[prop] = JSON.stringify(this[prop]) as any;
}
}
}


This is the code I am using to pass the params to the request



let params = new HttpParams({
fromObject: data
})

this.http.get(url, {params: params, headers: headers})


Also, I have tried to append every parameter separately:



let httpParams = new HttpParams();

Object.keys(data).forEach(function (key) {
httpParams = httpParams.append(key, data[key]);
});

return this.http.get(url, {params: httpParams, headers: headers})


All with the same result.



Anyone else who came across this issue, or anyone who knows what might be causing this?



Thanks in advance.



EDIT



I added this line to check where the problem starts.



console.log('params.toString()', params.toString());


Found out the this params.toString() returns an empty string (while with a development build, this returns the string correctly). My approach with this was to manually add the string to the url instead of passing is as params.



Still, I have not found a way to fix this or work around this.







angular http angular-http angular-httpclient






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 18 '18 at 14:41







TheBurgerShot

















asked Nov 18 '18 at 5:22









TheBurgerShotTheBurgerShot

6641715




6641715













  • Params and Query params are different for angular. I am unsure what the issue is and if setting is the issue. Alternatively can you check with for...in loop and see if scope resolution is the issue. It's unlikely though. I have face similar issue with append though. Can you check this this might help - stackoverflow.com/questions/45470575/…

    – Gary
    Nov 18 '18 at 6:01













  • the best tool for building HttpClient.get() query params is string template: .get(`${url}?param1=${param1}&...`), using backward quotes

    – WildDev
    Nov 18 '18 at 10:43





















  • Params and Query params are different for angular. I am unsure what the issue is and if setting is the issue. Alternatively can you check with for...in loop and see if scope resolution is the issue. It's unlikely though. I have face similar issue with append though. Can you check this this might help - stackoverflow.com/questions/45470575/…

    – Gary
    Nov 18 '18 at 6:01













  • the best tool for building HttpClient.get() query params is string template: .get(`${url}?param1=${param1}&...`), using backward quotes

    – WildDev
    Nov 18 '18 at 10:43



















Params and Query params are different for angular. I am unsure what the issue is and if setting is the issue. Alternatively can you check with for...in loop and see if scope resolution is the issue. It's unlikely though. I have face similar issue with append though. Can you check this this might help - stackoverflow.com/questions/45470575/…

– Gary
Nov 18 '18 at 6:01







Params and Query params are different for angular. I am unsure what the issue is and if setting is the issue. Alternatively can you check with for...in loop and see if scope resolution is the issue. It's unlikely though. I have face similar issue with append though. Can you check this this might help - stackoverflow.com/questions/45470575/…

– Gary
Nov 18 '18 at 6:01















the best tool for building HttpClient.get() query params is string template: .get(`${url}?param1=${param1}&...`), using backward quotes

– WildDev
Nov 18 '18 at 10:43







the best tool for building HttpClient.get() query params is string template: .get(`${url}?param1=${param1}&...`), using backward quotes

– WildDev
Nov 18 '18 at 10:43














0






active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53358144%2fangular-httpclient-query-parameters-not-showing-in-prod-build%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























0






active

oldest

votes








0






active

oldest

votes









active

oldest

votes






active

oldest

votes
















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53358144%2fangular-httpclient-query-parameters-not-showing-in-prod-build%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







這個網誌中的熱門文章

Xamarin.form Move up view when keyboard appear

Post-Redirect-Get with Spring WebFlux and Thymeleaf

Anylogic : not able to use stopDelay()