How to nest httpclient calls wrapped in APP_INITIALIZER
I've implemented a httpCall that is triggered by APP_INITIALIZER and it returns a URL which I then want to use for another nested httpCall:
getAppSettings(): Observable<IAppSettings> {
return (this.httpClient
.get<IAppSettings>(this.localbaseUrl)
.pipe(
catchError(this.errorHandlerSerevice.handleError)
)) as any;
}
getConfigValues(): Promise<void> {
return this.getAppSettings()
.toPromise()
.then(data => {
this.exampleUrl = data;
this.getOtherStuff().subscribe(data => this.stuff = data);
});
}
getOtherStuff(): Observable<any> {
return (this.httpClient
.get<any>(this.exampleUrl)
.pipe(
catchError(this.errorHandlerSerevice.handleError)
)) as any;
}
This implementation is wrong and on page refresh it throws the following error:
Uncaught (in promise): TypeError: Cannot read property 'length' of undefined
which comes from this.stuff not being populated in time (second, nested httpClient observable call).
How do I properly implement/nest those httpClient calls.
Please notice I use Angular 6 and httpClient, please do not suggest the old http get solutions.
angular typescript httpclient
asked Nov 15 '18 at 13:04
tom33prtom33pr
159113
add a comment |
I've implemented a httpCall that is triggered by APP_INITIALIZER and it returns a URL which I then want to use for another nested httpCall:
getAppSettings(): Observable<IAppSettings> {
return (this.httpClient
.get<IAppSettings>(this.localbaseUrl)
.pipe(
catchError(this.errorHandlerSerevice.handleError)
)) as any;
}
getConfigValues(): Promise<void> {
return this.getAppSettings()
.toPromise()
.then(data => {
this.exampleUrl = data;
this.getOtherStuff().subscribe(data => this.stuff = data);
});
}
getOtherStuff(): Observable<any> {
return (this.httpClient
.get<any>(this.exampleUrl)
.pipe(
catchError(this.errorHandlerSerevice.handleError)
)) as any;
}
This implementation is wrong and on page refresh it throws the following error:
Uncaught (in promise): TypeError: Cannot read property 'length' of undefined
which comes from this.stuff not being populated in time (second, nested httpClient observable call).
How do I properly implement/nest those httpClient calls.
Please notice I use Angular 6 and httpClient, please do not suggest the old http get solutions.
angular typescript httpclient
asked Nov 15 '18 at 13:04
tom33prtom33pr
159113
The error doesn't seem to align with the code that you've shared. How would someone get an idea as to what exactly is it checking for thelengthproperty on?
– SiddAjmera
Nov 15 '18 at 13:10
Right, apologies. this.stuff is any and the error is thrown on the page refresh. The code works fine the first time I load the application. So it looks like on the refresh the this.stuff is not populated. Do you think the calls are wired in in a proper way?
– tom33pr
Nov 15 '18 at 13:57
Leave here another way ng-run.com/edit/J9khrvXLmu3jvfQ4h9lV
– yurzui
Nov 15 '18 at 15:23
add a comment |
I've implemented a httpCall that is triggered by APP_INITIALIZER and it returns a URL which I then want to use for another nested httpCall:
getAppSettings(): Observable<IAppSettings> {
return (this.httpClient
.get<IAppSettings>(this.localbaseUrl)
.pipe(
catchError(this.errorHandlerSerevice.handleError)
)) as any;
}
getConfigValues(): Promise<void> {
return this.getAppSettings()
.toPromise()
.then(data => {
this.exampleUrl = data;
this.getOtherStuff().subscribe(data => this.stuff = data);
});
}
getOtherStuff(): Observable<any> {
return (this.httpClient
.get<any>(this.exampleUrl)
.pipe(
catchError(this.errorHandlerSerevice.handleError)
)) as any;
}
This implementation is wrong and on page refresh it throws the following error:
Uncaught (in promise): TypeError: Cannot read property 'length' of undefined
which comes from this.stuff not being populated in time (second, nested httpClient observable call).
How do I properly implement/nest those httpClient calls.
Please notice I use Angular 6 and httpClient, please do not suggest the old http get solutions.
angular typescript httpclient
asked Nov 15 '18 at 13:04
tom33prtom33pr
159113
I've implemented a httpCall that is triggered by APP_INITIALIZER and it returns a URL which I then want to use for another nested httpCall:
getAppSettings(): Observable<IAppSettings> {
return (this.httpClient
.get<IAppSettings>(this.localbaseUrl)
.pipe(
catchError(this.errorHandlerSerevice.handleError)
)) as any;
}
getConfigValues(): Promise<void> {
return this.getAppSettings()
.toPromise()
.then(data => {
this.exampleUrl = data;
this.getOtherStuff().subscribe(data => this.stuff = data);
});
}
getOtherStuff(): Observable<any> {
return (this.httpClient
.get<any>(this.exampleUrl)
.pipe(
catchError(this.errorHandlerSerevice.handleError)
)) as any;
}
This implementation is wrong and on page refresh it throws the following error:
Uncaught (in promise): TypeError: Cannot read property 'length' of undefined
which comes from this.stuff not being populated in time (second, nested httpClient observable call).
How do I properly implement/nest those httpClient calls.
Please notice I use Angular 6 and httpClient, please do not suggest the old http get solutions.
angular typescript httpclient
angular typescript httpclient
asked Nov 15 '18 at 13:04
tom33prtom33pr
159113
asked Nov 15 '18 at 13:04
tom33prtom33pr
159113
edited Nov 15 '18 at 14:40
tom33pr
asked Nov 15 '18 at 13:04
tom33prtom33pr
159113
asked Nov 15 '18 at 13:04
tom33prtom33pr
159113
asked Nov 15 '18 at 13:04
tom33prtom33pr
159113
159113
The error doesn't seem to align with the code that you've shared. How would someone get an idea as to what exactly is it checking for thelengthproperty on?
– SiddAjmera
Nov 15 '18 at 13:10
Right, apologies. this.stuff is any and the error is thrown on the page refresh. The code works fine the first time I load the application. So it looks like on the refresh the this.stuff is not populated. Do you think the calls are wired in in a proper way?
– tom33pr
Nov 15 '18 at 13:57
Leave here another way ng-run.com/edit/J9khrvXLmu3jvfQ4h9lV
– yurzui
Nov 15 '18 at 15:23
add a comment |
The error doesn't seem to align with the code that you've shared. How would someone get an idea as to what exactly is it checking for thelengthproperty on?
– SiddAjmera
Nov 15 '18 at 13:10
Right, apologies. this.stuff is any and the error is thrown on the page refresh. The code works fine the first time I load the application. So it looks like on the refresh the this.stuff is not populated. Do you think the calls are wired in in a proper way?
– tom33pr
Nov 15 '18 at 13:57
Leave here another way ng-run.com/edit/J9khrvXLmu3jvfQ4h9lV
– yurzui
Nov 15 '18 at 15:23
The error doesn't seem to align with the code that you've shared. How would someone get an idea as to what exactly is it checking for the
length property on?– SiddAjmera
Nov 15 '18 at 13:10
The error doesn't seem to align with the code that you've shared. How would someone get an idea as to what exactly is it checking for the
length property on?– SiddAjmera
Nov 15 '18 at 13:10
Right, apologies. this.stuff is any and the error is thrown on the page refresh. The code works fine the first time I load the application. So it looks like on the refresh the this.stuff is not populated. Do you think the calls are wired in in a proper way?
– tom33pr
Nov 15 '18 at 13:57
Right, apologies. this.stuff is any and the error is thrown on the page refresh. The code works fine the first time I load the application. So it looks like on the refresh the this.stuff is not populated. Do you think the calls are wired in in a proper way?
– tom33pr
Nov 15 '18 at 13:57
Leave here another way ng-run.com/edit/J9khrvXLmu3jvfQ4h9lV
– yurzui
Nov 15 '18 at 15:23
Leave here another way ng-run.com/edit/J9khrvXLmu3jvfQ4h9lV
– yurzui
Nov 15 '18 at 15:23
add a comment |
1 Answer
1
active
oldest
votes
Turns out you can't nest an Observable in a Promise initialised by APP_INITIALIZER. the nested call also needs to be a Promise. See the modified method that now correctly assigns the this.stuff:
getConfigValues(): Promise<void> {
return this.getAppSettings()
.toPromise()
.then(data => {
this.exampleUrl = data;
}).then(() => {
return this.getOtherStuff()
.toPromise()
.then(data => {
this.stuff = data;
});
}
);
}
answered Nov 15 '18 at 15:18
tom33prtom33pr
159113
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53320136%2fhow-to-nest-httpclient-calls-wrapped-in-app-initializer%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Turns out you can't nest an Observable in a Promise initialised by APP_INITIALIZER. the nested call also needs to be a Promise. See the modified method that now correctly assigns the this.stuff:
getConfigValues(): Promise<void> {
return this.getAppSettings()
.toPromise()
.then(data => {
this.exampleUrl = data;
}).then(() => {
return this.getOtherStuff()
.toPromise()
.then(data => {
this.stuff = data;
});
}
);
}
answered Nov 15 '18 at 15:18
tom33prtom33pr
159113
add a comment |
Turns out you can't nest an Observable in a Promise initialised by APP_INITIALIZER. the nested call also needs to be a Promise. See the modified method that now correctly assigns the this.stuff:
getConfigValues(): Promise<void> {
return this.getAppSettings()
.toPromise()
.then(data => {
this.exampleUrl = data;
}).then(() => {
return this.getOtherStuff()
.toPromise()
.then(data => {
this.stuff = data;
});
}
);
}
answered Nov 15 '18 at 15:18
tom33prtom33pr
159113
add a comment |
Turns out you can't nest an Observable in a Promise initialised by APP_INITIALIZER. the nested call also needs to be a Promise. See the modified method that now correctly assigns the this.stuff:
getConfigValues(): Promise<void> {
return this.getAppSettings()
.toPromise()
.then(data => {
this.exampleUrl = data;
}).then(() => {
return this.getOtherStuff()
.toPromise()
.then(data => {
this.stuff = data;
});
}
);
}
answered Nov 15 '18 at 15:18
tom33prtom33pr
159113
Turns out you can't nest an Observable in a Promise initialised by APP_INITIALIZER. the nested call also needs to be a Promise. See the modified method that now correctly assigns the this.stuff:
getConfigValues(): Promise<void> {
return this.getAppSettings()
.toPromise()
.then(data => {
this.exampleUrl = data;
}).then(() => {
return this.getOtherStuff()
.toPromise()
.then(data => {
this.stuff = data;
});
}
);
}
answered Nov 15 '18 at 15:18
tom33prtom33pr
159113
answered Nov 15 '18 at 15:18
tom33prtom33pr
159113
answered Nov 15 '18 at 15:18
tom33prtom33pr
159113
answered Nov 15 '18 at 15:18
tom33prtom33pr
159113
159113
add a comment |
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53320136%2fhow-to-nest-httpclient-calls-wrapped-in-app-initializer%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
The error doesn't seem to align with the code that you've shared. How would someone get an idea as to what exactly is it checking for the
lengthproperty on?– SiddAjmera
Nov 15 '18 at 13:10
Right, apologies. this.stuff is any and the error is thrown on the page refresh. The code works fine the first time I load the application. So it looks like on the refresh the this.stuff is not populated. Do you think the calls are wired in in a proper way?
– tom33pr
Nov 15 '18 at 13:57
Leave here another way ng-run.com/edit/J9khrvXLmu3jvfQ4h9lV
– yurzui
Nov 15 '18 at 15:23