issue with IE-11

[ap-81]

Hi there,

I was playing with the library and it seems to work fine on chrome and Edge, however it breaks on IE 11.

The screenshots are attached. There seems to be an issue with transpiling the es2015 syntax to es5. IE doesn't recognize
"Class" in Javascript. 

Have you tested it in IE 11 and is there a way you can fix it?

Thanks

[rubinhos]

CORRECTION: Angular 11 still supports IE 11, with just little tweaks.

Hi there.

Sorry, I haven't tested on IE 11. But the library was built using Angular 11, that doesn't support IE anymore. But tomorrow I can try to use Angular 10 and test on IE. I think it will work.

[ap-81]

Sure, let me know if it works on IE. If it does you can have 2 versions of it one targeting all browsers ( IE included ) and the other targeting all browsers except IE.

If not, you can mention in the description that IE is not supported.

Thanks

[rubinhos]

Sure, let me know if it works on IE. If it does you can have 2 versions of it one targeting all browsers ( IE included ) and the other targeting all browsers except IE.

If not, you can mention in the description that IE is not supported.

Thanks

Hi there!

So, I just created an application using @angular/cli version 11.2.4, and installed the ngx-sse-client through npm. Then I made these changes to work on IE 11:

• on .browserslistrc - removed the not on IE 11
• on tsconfig.json - changed the target to es5

Apparently with only these changes, is working on IE 11, as you can see:

If you want I can share this sample app. But I think, as the ngx-sse-client is a library, you need to make some changes on your app to support IE 11.

[rubinhos]

I am closing this issue as I couldn't reproduce the error, but if you need any help, don't hesitate to contact me. :)

[ap-81]

Still, the same error on IE. I am using angular 9. My browserslist supports IE 9-11 and the target is set to es5 on tsconfig.json. I even included all the polyfills for IE.

[rubinhos]

Still, the same error on IE. I am using angular 9. My browserslist supports IE 9-11 and the target is set to es5 on tsconfig.json. I even included all the polyfills for IE.

Can you show me your package.json?

[ap-81]

Still, the same error on IE. I am using angular 9. My browserslist supports IE 9-11 and the target is set to es5 on tsconfig.json. I even included all the polyfills for IE.

Can you show me your package.json?

here it is :

{ "name": "some-app", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve --open --port 5000", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e"
}, "private": true, "dependencies": { "@angular/animations": "~9.0.7", "@angular/common": "~9.0.7", "@angular/compiler": "~9.0.7", "@angular/core": "~9.0.7", "@angular/forms": "~9.0.7", "@angular/http": "^6.1.0", "@angular/localize": "^9.0.7", "@angular/material": "^7.1.1", "@angular/platform-browser": "~9.0.7", "@angular/platform-browser-dynamic": "~9.0.7", "@angular/platform-server": "~9.0.7", "@angular/router": "~9.0.7", "@progress/kendo-angular-buttons": "^5.0.0", "@progress/kendo-angular-common": "^1.0.0", "@progress/kendo-angular-dateinputs": "^4.0.0", "@progress/kendo-angular-dropdowns": "^4.0.0", "@progress/kendo-angular-excel-export": "^3.0.0", "@progress/kendo-angular-grid": "^4.8.4", "@progress/kendo-angular-inputs": "^6.0.0", "@progress/kendo-angular-intl": "^2.0.0", "@progress/kendo-angular-l10n": "^2.0.0", "@progress/kendo-angular-pdf-export": "^2.0.0", "@progress/kendo-angular-popup": "^3.0.0", "@progress/kendo-data-query": "^1.0.0", "@progress/kendo-drawing": "^1.0.0", "@progress/kendo-theme-default": "^4.29.0", "@types/jquery": "^3.5.5", "bootstrap": "^4.4.0", "core-js": "^2.5.4", "jquery": "^3.5.1", "ngx-bootstrap": "^6.2.0", "rxjs": "~6.6.3", "sse.js": "^0.5.0", "zone.js": "~0.10.3" }, "devDependencies": { "@angular-devkit/build-angular": "~0.900.7", "@angular/cli": "~9.0.7", "@angular/compiler-cli": "~9.0.7", "@angular/language-service": "~9.0.7", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "codelyzer": "~4.3.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~8.3.0", "tslint": "~5.18.0", "typescript": "~3.7.5" } }

[rubinhos]

Still, the same error on IE. I am using angular 9. My browserslist supports IE 9-11 and the target is set to es5 on tsconfig.json. I even included all the polyfills for IE.

Can you show me your package.json?

here it is :

{ "name": "some-app", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve --open --port 5000", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~9.0.7", "@angular/common": "~9.0.7", "@angular/compiler": "~9.0.7", "@angular/core": "~9.0.7", "@angular/forms": "~9.0.7", "@angular/http": "^6.1.0", "@angular/localize": "^9.0.7", "@angular/material": "^7.1.1", "@angular/platform-browser": "~9.0.7", "@angular/platform-browser-dynamic": "~9.0.7", "@angular/platform-server": "~9.0.7", "@angular/router": "~9.0.7", "@progress/kendo-angular-buttons": "^5.0.0", "@progress/kendo-angular-common": "^1.0.0", "@progress/kendo-angular-dateinputs": "^4.0.0", "@progress/kendo-angular-dropdowns": "^4.0.0", "@progress/kendo-angular-excel-export": "^3.0.0", "@progress/kendo-angular-grid": "^4.8.4", "@progress/kendo-angular-inputs": "^6.0.0", "@progress/kendo-angular-intl": "^2.0.0", "@progress/kendo-angular-l10n": "^2.0.0", "@progress/kendo-angular-pdf-export": "^2.0.0", "@progress/kendo-angular-popup": "^3.0.0", "@progress/kendo-data-query": "^1.0.0", "@progress/kendo-drawing": "^1.0.0", "@progress/kendo-theme-default": "^4.29.0", "@types/jquery": "^3.5.5", "bootstrap": "^4.4.0", "core-js": "^2.5.4", "jquery": "^3.5.1", "ngx-bootstrap": "^6.2.0", "rxjs": "~6.6.3", "sse.js": "^0.5.0", "zone.js": "~0.10.3" }, "devDependencies": { "@angular-devkit/build-angular": "~0.900.7", "@angular/cli": "~9.0.7", "@angular/compiler-cli": "~9.0.7", "@angular/language-service": "~9.0.7", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "codelyzer": "~4.3.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~8.3.0", "tslint": "~5.18.0", "typescript": "~3.7.5" } }

Thank you for your response. I just downgraded to use Angular 9 dependencies and configurations and just published the version 1.0.3.

Can you use this version and give me a feedback?

[ap-81]

Still, the same error on IE. I am using angular 9. My browserslist supports IE 9-11 and the target is set to es5 on tsconfig.json. I even included all the polyfills for IE.

Can you show me your package.json?

here it is : { "name": "some-app", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve --open --port 5000", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~9.0.7", "@angular/common": "~9.0.7", "@angular/compiler": "~9.0.7", "@angular/core": "~9.0.7", "@angular/forms": "~9.0.7", "@angular/http": "^6.1.0", "@angular/localize": "^9.0.7", "@angular/material": "^7.1.1", "@angular/platform-browser": "~9.0.7", "@angular/platform-browser-dynamic": "~9.0.7", "@angular/platform-server": "~9.0.7", "@angular/router": "~9.0.7", "@progress/kendo-angular-buttons": "^5.0.0", "@progress/kendo-angular-common": "^1.0.0", "@progress/kendo-angular-dateinputs": "^4.0.0", "@progress/kendo-angular-dropdowns": "^4.0.0", "@progress/kendo-angular-excel-export": "^3.0.0", "@progress/kendo-angular-grid": "^4.8.4", "@progress/kendo-angular-inputs": "^6.0.0", "@progress/kendo-angular-intl": "^2.0.0", "@progress/kendo-angular-l10n": "^2.0.0", "@progress/kendo-angular-pdf-export": "^2.0.0", "@progress/kendo-angular-popup": "^3.0.0", "@progress/kendo-data-query": "^1.0.0", "@progress/kendo-drawing": "^1.0.0", "@progress/kendo-theme-default": "^4.29.0", "@types/jquery": "^3.5.5", "bootstrap": "^4.4.0", "core-js": "^2.5.4", "jquery": "^3.5.1", "ngx-bootstrap": "^6.2.0", "rxjs": "~6.6.3", "sse.js": "^0.5.0", "zone.js": "~0.10.3" }, "devDependencies": { "@angular-devkit/build-angular": "~0.900.7", "@angular/cli": "~9.0.7", "@angular/compiler-cli": "~9.0.7", "@angular/language-service": "~9.0.7", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "codelyzer": "~4.3.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~8.3.0", "tslint": "~5.18.0", "typescript": "~3.7.5" } }

Thank you for your response. I just downgraded to use Angular 9 dependencies and configurations and just published the version 1.0.3.

Can you use this version and give me a feedback?

It works now. This time I didn't even have to change the browserslist to include IE or include additional polyfills for IE on pollyfill.ts. Downgrading to angular 9 fixed it.

I've one last question. How can I make a "POST" request. I don't see the option to pass the HTTP POST verb to the stream(). The description says stream() takes HTTP method as 4th parameter but stream() takes only 3 parameters.

[rubinhos]

It takes 4, the last parameter is a string, you can just pass "POST". VS only shows 3, because its an overload method.

[ap-81]

It takes 4, the last parameter is a string, you can just pass "POST". VS only shows 3, because its an overload method.

No, doesn't compile. See the error

[rubinhos]

I need to see the definition file, how it was generated. Because it has 4 parameters in the code: https://github.com/rubinhos/ngx-sse-client/blob/df24646d3394505acb483d72373bd6d4fbaa1b5a/projects/ngx-sse-client/src/lib/sse-client.service.ts#L21

[ap-81]

I need to see the definition file, how it was generated. Because it has 4 parameters in the code:

https://github.com/rubinhos/ngx-sse-client/blob/df24646d3394505acb483d72373bd6d4fbaa1b5a/projects/ngx-sse-client/src/lib/sse-client.service.ts#L21

I think method overloading doesn't work in JS, you can just give it a different name , may be streamPost(), and let stream() default to GET

[rubinhos]

I need to see the definition file, how it was generated. Because it has 4 parameters in the code: https://github.com/rubinhos/ngx-sse-client/blob/df24646d3394505acb483d72373bd6d4fbaa1b5a/projects/ngx-sse-client/src/lib/sse-client.service.ts#L21

I think method overloading doesn't work in JS, you can just give it a different name , may be streamPost(), and let stream() default to GET

I just published the 1.0.4 version, now the stream method receive 4 parameters as it is to be. But first the first one is mandatory, so the method overloading isn't necessary.

[ap-81]

It works with POST method. I am closing the issue.

[ap-81]

Ok, so this is not really an issue, Can you show an example of passing parameters with POST/GET. Looks like I need to construct an object of SseRequestOptions, but I don't know how to do it. An example would help.

[rubinhos]

Ok, so this is not really an issue, Can you show an example of passing parameters with POST/GET. Looks like I need to construct an object of SseRequestOptions, but I don't know how to do it. An example would help.

If you don't need a SseRequestOptions you just pass null:

this.sseClient.stream('/subscribe', null, null, 'POST').subscribe((data) => console.log(data));

The SseRequestOptions is an object that has the same signature as the HttpClient options:

const options = { headers: { 'X-HEADER': 'true' } };
this.httpClient.get('/subscribe', options).subscribe((data) => console.log(data));
this.sseClient.stream('/subscribe', null, options).subscribe((data) => console.log(data)); /* The same options */

[ap-81]

Ok, I was able to pass the data as follows(ss attached). But now there's another issue. The error callback is not called in case of any server error. I deliberately failed my server-side method "Send", but the error wasn't caught.

I am not creating a new issue, rather re-opening this one.

[rubinhos]

Ok, I was able to pass the data as follows(ss attached). But now there's another issue. The error callback is not called in case of any server error. I deliberately failed my server-side method "Send", but the error wasn't caught.

I am not creating a new issue, rather re-opening this one.

I couldn't reproduce this. On my server, using Spring:

@GetMapping("/subscribe")
public SseEmitter subscribe() {
    throw new Exception("SSE ERROR!");
}

On my client:

this.sseClient.stream('/subscribe').subscribe((event) => this.events.push(event), (error) => this.events.push(`SSE ERROR!`));

One important thing about this lib in comparison with a standard EventSource is, as it uses Observable, if an error occurs, the request is closed and is not reopened. This is because request is closed when a Observalbe receives and error, I could always retry the request, but then the error couldn't ever be capture.

I am closing this issue, but feel free to analyse the code and send your pull request, if you want.

[rubinhos]

After a few researches, I discovered that a standard EventSource considers a timeout and complete requests as errors.

So, to be as close as this behavior, I will make a version 2.0.0 sending events instead of pure string data on subscribe. That way I can send error events through subscribe and leave error to server errors only. Tomorrow I will take a look at this.

[ap-81]

I am using Asp.Net Web Api 2. The server exception is not caught by the library.

[rubinhos]

I don't know how Asp.Net works. Have you tried making a standard HttpClient request? If the error is captured? Because the stream uses a HttpClient request.

[ap-81]

Yes, the errors are caught for standard HttpClient request. That's how my application works. If I run the same sample code through HttpClient, I can see the error.

[rubinhos]

I think your server is returning status 200, that's why the error isn't being captured. But the event update can help. Tomorrow I will try to publish a new version.

[rubinhos]

Hi there @ap-81,

I just published the version 2.0.0-beta.0, now it is possible to get server errors from subscribe. The behavior is now similar to the default EventSource, when a request is complete, or an error occurs (timeout included), now an Event with type error is returned. More details about how to use on the README file.

Can you give it a shot and give me a feedback, then I can publish a 2.0.0 version.

Thanks in advance.

[ap-81]

I installed the new version, but it doesn't compile

[rubinhos]

I installed the new version, but it doesn't compile

I just published the version v2.0.0-beta.3 with improvements and bug fixes.

[ap-81]

Still there are issues.

Anyway, I won't be using this library. I will be taking another approach of using an EventBus (pub/sub) in order to track the progress of my server side operation and report progress (or error) to the user.

[rubinhos]

Still there are issues.

Anyway, I won't be using this library. I will be taking another approach of using an EventBus (pub/sub) in order to track the progress of my server side operation and report progress (or error) to the user.

I am sorry to hear that you won't be using this library. The error that you encountered now is a typescript limitation due to methods overload. If you pass the options directly in the method, it will work. I just published a version "2.0.0-beta.4" with the correction on the README example and with a definition to support responseType: 'text'.

[ap-81]

ok, I was able to achieve it using pub/sub (3rd party EventBus which requires installation and therefore a dependency on it). I would still like to avoid it, if you can fix a few more issues with your library.

I have highlighted the issues on the screenshot from your sample code

[rubinhos]

ok, I was able to achieve it using pub/sub (3rd party EventBus which requires installation and therefore a dependency on it). I would still like to avoid it, if you can fix a few more issues with your library.

I have highlighted the issues on the screenshot from your sample code

Hi, I just published the version 2.0.0-beta.5 with the ErrorEvent that now contains error and message. To get the error, message or data from the events, you'll need to cast the returned event - I put the example on the README file.

[ap-81]

The error event is null.

Do you test before publishing the changes?

[rubinhos]

The error event is null.

Do you test before publishing the changes?

Yes, I test on my sample application using Spring framework as a back-end. If the ErrorEvent is null, please check if your server returned a non successful HTTP status code (other than the 200 range).

This library is an alternative to the default EventSource, if your server completed the request or if your SSE emitter throw an exception in the middle while sending data, there won't be an error message if the server complete the request with a 200 range status code.

If you are feeling annoyed by my updates or so many versions being published - and I need to clarify here, they are BETA versions - feel free to help me to improve this library as you please. The code are available here, you can debug as you want and make the changes you want.

[ap-81]

Hi, I had to handle Error as a regular Message Event. I prefix the "OK" response with MSG- and the error with ERROR
(as shown in the screenshot) and handle it accordingly on the client side . I wasted 2 days, trying to figure out why the Error event is null, looks like its a SSE EventSource issue. You can see the error event is still null.

I tested all the scenarios on chrome and it looks ok, however it doesn't work on IE. It was fixed earlier as you had downgraded the angular version to 9. I think subsequent publishes broke something, I am guessing it's the Method overloading. Can you take a look. I am attaching the IE error screenshot.

[rubinhos]

Hi @ap-81,

I didn't have the knowledge that IE doesn't support ErrorEvent and MessageEvent constructors. So I created a polyfill to use in this case. Just publish the 2.0.0-beta.6 version with these pollyfills.

[rubinhos]

Hi @ap-81, is it working now for you?

[ap-81]

Hi,

I was busy with other stuff. didn't get a chance to test it. I will test and let you know in a day or two.