I noticed a very strange behavior in my Angular application
0
enter code hereSo I am using the data that I get from the getDashboardsSEE method in the service layer. The lines for accessing the data:
this.dashboardService.getDashboardsSSE().subscribe(data => {
if(data.length > 0) {
this.dashboards = data;
this.currentDashboard = this.dashboards[0].id;
this.communicationService.setDashboard(this.currentDashboard);
this.noDashboard = false;
}
});
The getDashboardsSSE uses EventSource for getting the data. It first pushes all the stream to an array and then return this array as an observable.
The getDashboardsSSE method:
getDashboardsSSE(): Observable<any> {
let dashboards =
return Observable.create((observer) => {
let eventSource = new EventSource(this.sseUrl);
eventSource.onmessage = (event) => {
let dashboard = JSON.parse(event.data);
dashboards.push(dashboard);
};
eventSource.onerror = (error) => {
if(eventSource.readyState === 0) {
console.log('The stream has been closed by the server');
eventSource.close();
observer.next(dashboards);
observer.complete();
} else {
observer.error('Error: ' + error);
}
};
});
}
The problem here is that the page only renders when I click on something like pressing F12 or clicking on other clickable items in the page. Has anyone notices this behavior before. This doesn't happen when I use the get the data from the standard REST endpoint using the http object. Has anyone got this problem before and how did you work around it?
angular6 eventsource
asked Nov 14 '18 at 21:45
KrisKris1KrisKris1
34
add a comment |
0
enter code hereSo I am using the data that I get from the getDashboardsSEE method in the service layer. The lines for accessing the data:
this.dashboardService.getDashboardsSSE().subscribe(data => {
if(data.length > 0) {
this.dashboards = data;
this.currentDashboard = this.dashboards[0].id;
this.communicationService.setDashboard(this.currentDashboard);
this.noDashboard = false;
}
});
The getDashboardsSSE uses EventSource for getting the data. It first pushes all the stream to an array and then return this array as an observable.
The getDashboardsSSE method:
getDashboardsSSE(): Observable<any> {
let dashboards =
return Observable.create((observer) => {
let eventSource = new EventSource(this.sseUrl);
eventSource.onmessage = (event) => {
let dashboard = JSON.parse(event.data);
dashboards.push(dashboard);
};
eventSource.onerror = (error) => {
if(eventSource.readyState === 0) {
console.log('The stream has been closed by the server');
eventSource.close();
observer.next(dashboards);
observer.complete();
} else {
observer.error('Error: ' + error);
}
};
});
}
The problem here is that the page only renders when I click on something like pressing F12 or clicking on other clickable items in the page. Has anyone notices this behavior before. This doesn't happen when I use the get the data from the standard REST endpoint using the http object. Has anyone got this problem before and how did you work around it?
angular6 eventsource
asked Nov 14 '18 at 21:45
KrisKris1KrisKris1
34
add a comment |
0
0
0
enter code hereSo I am using the data that I get from the getDashboardsSEE method in the service layer. The lines for accessing the data:
this.dashboardService.getDashboardsSSE().subscribe(data => {
if(data.length > 0) {
this.dashboards = data;
this.currentDashboard = this.dashboards[0].id;
this.communicationService.setDashboard(this.currentDashboard);
this.noDashboard = false;
}
});
The getDashboardsSSE uses EventSource for getting the data. It first pushes all the stream to an array and then return this array as an observable.
The getDashboardsSSE method:
getDashboardsSSE(): Observable<any> {
let dashboards =
return Observable.create((observer) => {
let eventSource = new EventSource(this.sseUrl);
eventSource.onmessage = (event) => {
let dashboard = JSON.parse(event.data);
dashboards.push(dashboard);
};
eventSource.onerror = (error) => {
if(eventSource.readyState === 0) {
console.log('The stream has been closed by the server');
eventSource.close();
observer.next(dashboards);
observer.complete();
} else {
observer.error('Error: ' + error);
}
};
});
}
The problem here is that the page only renders when I click on something like pressing F12 or clicking on other clickable items in the page. Has anyone notices this behavior before. This doesn't happen when I use the get the data from the standard REST endpoint using the http object. Has anyone got this problem before and how did you work around it?
angular6 eventsource
asked Nov 14 '18 at 21:45
KrisKris1KrisKris1
34
enter code hereSo I am using the data that I get from the getDashboardsSEE method in the service layer. The lines for accessing the data:
this.dashboardService.getDashboardsSSE().subscribe(data => {
if(data.length > 0) {
this.dashboards = data;
this.currentDashboard = this.dashboards[0].id;
this.communicationService.setDashboard(this.currentDashboard);
this.noDashboard = false;
}
});
The getDashboardsSSE uses EventSource for getting the data. It first pushes all the stream to an array and then return this array as an observable.
The getDashboardsSSE method:
getDashboardsSSE(): Observable<any> {
let dashboards =
return Observable.create((observer) => {
let eventSource = new EventSource(this.sseUrl);
eventSource.onmessage = (event) => {
let dashboard = JSON.parse(event.data);
dashboards.push(dashboard);
};
eventSource.onerror = (error) => {
if(eventSource.readyState === 0) {
console.log('The stream has been closed by the server');
eventSource.close();
observer.next(dashboards);
observer.complete();
} else {
observer.error('Error: ' + error);
}
};
});
}
The problem here is that the page only renders when I click on something like pressing F12 or clicking on other clickable items in the page. Has anyone notices this behavior before. This doesn't happen when I use the get the data from the standard REST endpoint using the http object. Has anyone got this problem before and how did you work around it?
angular6 eventsource
angular6 eventsource
asked Nov 14 '18 at 21:45
KrisKris1KrisKris1
34
asked Nov 14 '18 at 21:45
KrisKris1KrisKris1
34
edited Nov 14 '18 at 22:06
KrisKris1
asked Nov 14 '18 at 21:45
KrisKris1KrisKris1
34
asked Nov 14 '18 at 21:45
KrisKris1KrisKris1
34
asked Nov 14 '18 at 21:45
KrisKris1KrisKris1
34
34
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
It seems like you call getDashboardsSSE when an event happens? When do you trigger it?
Why not:
const dashboardObserver = this.dashboardService.getDashboardsSSE();
const subscription = dashboardObserver.subscribe(data => {
if(data.length > 0) {
this.dashboards = data;
this.currentDashboard = this.dashboards[0].id;
this.communicationService.setDashboard(this.currentDashboard);
this.noDashboard = false;
}
});
answered Nov 14 '18 at 22:16
user2908623user2908623
476
That it is called on the ngOnInit method.
– KrisKris1
Nov 14 '18 at 22:20
It is the same implementation anyway so it doesn't work. It isn't a data problem but it seems that it is a binding problem to the html that resolves whenever I try to resize the window or pres F12 or press other clickable buttons on the page.
– KrisKris1
Nov 14 '18 at 22:25
Can you check with a console.log if ngOnInit is called immediately?
– user2908623
Nov 14 '18 at 22:33
After thedashboards.push(dashboard);you might needobserver.next(dashboards); observer.complete();eventSource.readyState === 0 is the connecting state.
– user2908623
Nov 14 '18 at 22:59
Yes, it is called because I have checked the execution of all the lines during the subscription.
– KrisKris1
Nov 14 '18 at 23:00
|
show 1 more 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
});
}
});
draft saved
draft discarded
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%2f53309189%2fi-noticed-a-very-strange-behavior-in-my-angular-application%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
0
It seems like you call getDashboardsSSE when an event happens? When do you trigger it?
Why not:
const dashboardObserver = this.dashboardService.getDashboardsSSE();
const subscription = dashboardObserver.subscribe(data => {
if(data.length > 0) {
this.dashboards = data;
this.currentDashboard = this.dashboards[0].id;
this.communicationService.setDashboard(this.currentDashboard);
this.noDashboard = false;
}
});
answered Nov 14 '18 at 22:16
user2908623user2908623
476
That it is called on the ngOnInit method.
– KrisKris1
Nov 14 '18 at 22:20
It is the same implementation anyway so it doesn't work. It isn't a data problem but it seems that it is a binding problem to the html that resolves whenever I try to resize the window or pres F12 or press other clickable buttons on the page.
– KrisKris1
Nov 14 '18 at 22:25
Can you check with a console.log if ngOnInit is called immediately?
– user2908623
Nov 14 '18 at 22:33
After thedashboards.push(dashboard);you might needobserver.next(dashboards); observer.complete();eventSource.readyState === 0 is the connecting state.
– user2908623
Nov 14 '18 at 22:59
Yes, it is called because I have checked the execution of all the lines during the subscription.
– KrisKris1
Nov 14 '18 at 23:00
|
show 1 more comment
0
It seems like you call getDashboardsSSE when an event happens? When do you trigger it?
Why not:
const dashboardObserver = this.dashboardService.getDashboardsSSE();
const subscription = dashboardObserver.subscribe(data => {
if(data.length > 0) {
this.dashboards = data;
this.currentDashboard = this.dashboards[0].id;
this.communicationService.setDashboard(this.currentDashboard);
this.noDashboard = false;
}
});
answered Nov 14 '18 at 22:16
user2908623user2908623
476
That it is called on the ngOnInit method.
– KrisKris1
Nov 14 '18 at 22:20
It is the same implementation anyway so it doesn't work. It isn't a data problem but it seems that it is a binding problem to the html that resolves whenever I try to resize the window or pres F12 or press other clickable buttons on the page.
– KrisKris1
Nov 14 '18 at 22:25
Can you check with a console.log if ngOnInit is called immediately?
– user2908623
Nov 14 '18 at 22:33
After thedashboards.push(dashboard);you might needobserver.next(dashboards); observer.complete();eventSource.readyState === 0 is the connecting state.
– user2908623
Nov 14 '18 at 22:59
Yes, it is called because I have checked the execution of all the lines during the subscription.
– KrisKris1
Nov 14 '18 at 23:00
|
show 1 more comment
0
0
0
It seems like you call getDashboardsSSE when an event happens? When do you trigger it?
Why not:
const dashboardObserver = this.dashboardService.getDashboardsSSE();
const subscription = dashboardObserver.subscribe(data => {
if(data.length > 0) {
this.dashboards = data;
this.currentDashboard = this.dashboards[0].id;
this.communicationService.setDashboard(this.currentDashboard);
this.noDashboard = false;
}
});
answered Nov 14 '18 at 22:16
user2908623user2908623
476
It seems like you call getDashboardsSSE when an event happens? When do you trigger it?
Why not:
const dashboardObserver = this.dashboardService.getDashboardsSSE();
const subscription = dashboardObserver.subscribe(data => {
if(data.length > 0) {
this.dashboards = data;
this.currentDashboard = this.dashboards[0].id;
this.communicationService.setDashboard(this.currentDashboard);
this.noDashboard = false;
}
});
answered Nov 14 '18 at 22:16
user2908623user2908623
476
answered Nov 14 '18 at 22:16
user2908623user2908623
476
answered Nov 14 '18 at 22:16
user2908623user2908623
476
answered Nov 14 '18 at 22:16
user2908623user2908623
476
476
That it is called on the ngOnInit method.
– KrisKris1
Nov 14 '18 at 22:20
It is the same implementation anyway so it doesn't work. It isn't a data problem but it seems that it is a binding problem to the html that resolves whenever I try to resize the window or pres F12 or press other clickable buttons on the page.
– KrisKris1
Nov 14 '18 at 22:25
Can you check with a console.log if ngOnInit is called immediately?
– user2908623
Nov 14 '18 at 22:33
After thedashboards.push(dashboard);you might needobserver.next(dashboards); observer.complete();eventSource.readyState === 0 is the connecting state.
– user2908623
Nov 14 '18 at 22:59
Yes, it is called because I have checked the execution of all the lines during the subscription.
– KrisKris1
Nov 14 '18 at 23:00
|
show 1 more comment
That it is called on the ngOnInit method.
– KrisKris1
Nov 14 '18 at 22:20
It is the same implementation anyway so it doesn't work. It isn't a data problem but it seems that it is a binding problem to the html that resolves whenever I try to resize the window or pres F12 or press other clickable buttons on the page.
– KrisKris1
Nov 14 '18 at 22:25
Can you check with a console.log if ngOnInit is called immediately?
– user2908623
Nov 14 '18 at 22:33
After thedashboards.push(dashboard);you might needobserver.next(dashboards); observer.complete();eventSource.readyState === 0 is the connecting state.
– user2908623
Nov 14 '18 at 22:59
Yes, it is called because I have checked the execution of all the lines during the subscription.
– KrisKris1
Nov 14 '18 at 23:00
That it is called on the ngOnInit method.
– KrisKris1
Nov 14 '18 at 22:20
That it is called on the ngOnInit method.
– KrisKris1
Nov 14 '18 at 22:20
It is the same implementation anyway so it doesn't work. It isn't a data problem but it seems that it is a binding problem to the html that resolves whenever I try to resize the window or pres F12 or press other clickable buttons on the page.
– KrisKris1
Nov 14 '18 at 22:25
It is the same implementation anyway so it doesn't work. It isn't a data problem but it seems that it is a binding problem to the html that resolves whenever I try to resize the window or pres F12 or press other clickable buttons on the page.
– KrisKris1
Nov 14 '18 at 22:25
Can you check with a console.log if ngOnInit is called immediately?
– user2908623
Nov 14 '18 at 22:33
Can you check with a console.log if ngOnInit is called immediately?
– user2908623
Nov 14 '18 at 22:33
After the
dashboards.push(dashboard); you might need observer.next(dashboards); observer.complete();eventSource.readyState === 0 is the connecting state.– user2908623
Nov 14 '18 at 22:59
After the
dashboards.push(dashboard); you might need observer.next(dashboards); observer.complete();eventSource.readyState === 0 is the connecting state.– user2908623
Nov 14 '18 at 22:59
Yes, it is called because I have checked the execution of all the lines during the subscription.
– KrisKris1
Nov 14 '18 at 23:00
Yes, it is called because I have checked the execution of all the lines during the subscription.
– KrisKris1
Nov 14 '18 at 23:00
|
show 1 more comment
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
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%2f53309189%2fi-noticed-a-very-strange-behavior-in-my-angular-application%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
