Getting ASP.NET Core Signalr to work in IE11

Over the last couple of days I wanted to get the new ASP.NET Core version of Signalr working in a web app I am building for work. So as a starter i went to the github repository for the project found at https://github.com/aspnet/SignalR and downloaded it so I could have a look at the sample projects.

To get the project up and running you need to make sure you have .Net Core 1.2.0 beta installed and once you have that extract the project from the Zip file and run the build.cmd in the root folder. Once this is done open the solution, build the project and run any one of the sample apps (I ran the default SocketsSample).

Upon the page loading in IE11 everything looked fine until i clicked one of the links where i was then presented with some js syntax errors and nothing worked as expected. Now upon experience I know that IE11 is not the best browser around to use, but as I am developing for an Enterprise environment and we have not migrated away from Windows 7 yet this is our default browser of choice.

Being the good little developer I am ;) I have other browsers to test pages in, so i fired up the page in Chrome, Firefox and Edge and they all worked fine. I could send messages between the different browsers without any problem.

So what is the issue with IE11? Upon investigation and a bit of googling I found out that IE11 does not support es6 and this is what the Signalr project uses to compile it's typescript into js files.

Easy fix I thought, opened up the tsconfig.json file within the Microsoft.AspNetCore.SignalR.Client.TS folder and made an amendment to the target line so it read es5 instead of es6

"compilerOptions": {
"target": "es5",

Once this was done i ran the build command again and then reloaded the project. Alas, I was now presented with a new error stating that "Promise is undefined". Again a bit of googling will reveal that you need to polyfill a Promise for IE11 to understand it.

There are a number of js libraries to do this but as I had used core-js in a project for Angular2 i thought I would give that a try. Remeber to add the following to your project before loading the signalr-client.js

<script src="lib/core-js/client/shim.min.js"></script>
<script src="lib/signalr-client/signalr-client.js"></script>

So once again i rebuilt the project and loaded the hubs page, however now I realised the js in the main html files was also in es6 so babaeljs to the rescue. Just copy the js snippets from the pages into the babeljs converter and then paste the result back into the page overwriting the original code. Once again run the project to see what the outcome is.

This time however I was presented with an HTML1506 error: Unexpected Token, looking into the hub.html code the js script tags were added after the ending html tag. I moved these to just before the body end tag, reloaded and tested. Success!! I could now send messages between browser instances of IE11.

Hopefully this will help someone out and save them a few headaches along the way. Now it's just time for me to try and put this into the app i'm working on.

Until next time.

Loading