Framework: Strange bug with Microsoft Edge

[patroza]

Im encountering something really strange.
My site only loads in Microsoft Edge when Developer Tools (F12) are open.
Namely, if the debugger is connected, it seems to work, if I disconnect the debugger even with the dev tools open, the site stops loading.

I've narrowed it down so far to the loading of templates. I have several globalResources (and plugins) some of which are custom elements.
When I limit the amount of loading these, then my app template and beyond seems to load.
If I load all of them, the loading stops either at one of the resources, or just the app template, or then the first routed view and so on.

I am trying to create a repro out of this, but so far im very confused..

[EisenbergEffect]

There's a bug in system.js in FF and Edge we believe which causes the browser to fail after a certain number of script loads. The System.js team is working to resolve this. To confirm, can you try bundling your app and seeing if it works fine when bundled?

[patroza]

@EisenbergEffect thanks for reply. So far even when bundled we run into the issue sadly :(
(Bundling issues were fixed for Edge/IE (i think) in a recent release, but this seems different)

[atsu85]

I guess @EisenbergEffect talked about https://github.com/systemjs/systemjs/issues/814 but i'm not 100% sure about it. @sickboy could You take a look at it and report back, what do You think about the relation of these issues?

[EisenbergEffect]

I'm closing this since it looks like it was resolved in system.js

[SamDeBlock]

@EisenbergEffect
I'm having the same problem now on http://aurelia.io/docs.html
The site only loads in Edge with dev tools open.

[dpinart]

@SamDeBlock I'm facing same issue. It's weird but sometimes aurelia apps require edge having dev tools open

[arjendeblok]

I am facing the same issue. My site takes about 8 seconds to load on Edge.
But.. on IE11 it takes less than a second to load.
Very strange. Looks like a SystemJS issue to me.

[EisenbergEffect]

Did you add bluebird? That should solve the problem. We have reported this issue to the Edge team along with tests to verify it for them.

[arjendeblok]

If I add bluebird (not via JSPM, but in the header on index.html) the Edge browser now takes 2 seconds.
IE11 (with or without bluebird) still takes less than a second, so IE11 is still more then 2 times faster.
Thanks for the tip!

[SorenMuller]

I added bluebird script in index.html, but still the same..
Aurelia stop at splash screen on Edge...
Do I need to do more ??

btw: same issue with "http://aurelia.io/docs.html#/aurelia/framework/latest/doc/article/what-is-aurelia"

[DavidRogers]

Anyone find a fix for this? I am having the same issue...

[EisenbergEffect]

@jdanyow Any progress on this? I'd put this as our absolute highest priority bug right now...

[jdanyow]

I can't reproduce it. Bluebird fixed my edge issues. No one is seeing it in the docs app anymore either (that I've heard).

[EisenbergEffect]

If that's true then I can now sleep again at night :) Thanks @jdanyow!

[gheoan]

Just tested the docs app in Edge. Sometimes it loads, sometimes it doesn't.

[jdanyow]

@Gheoan few questions for you- I'm hoping to find a way to reproduce this:

1. what url/route in the docs app?
2. what version of Edge? Here's what I have:
   
3. if you clear your cache (ctrl+shift+delete and check the second and third boxes) does it reproduce?

[gheoan]

1. http://aurelia.io/docs.html which redirects to http://aurelia.io/docs.html#/aurelia/framework/latest/doc/article/what-is-aurelia
2. 
3. It seems to _almost_ always reproduce when clearing cache.

[DavidRogers]

I am seeing the same inconsistent results with the docs as Gheoan and I am running the same version of Edge. On my own site though it seems to never work no matter what I do. However it works great as soon as I open my dev tools and refresh the page...

[JayLance]

Seeing the same results here also. With dev tools open it's fine, with dev tools closed it mostly fails.

[obany]

I can confirm I am seeing the same issue with the aurelia docs site, and also our own apps on Edge.

Since the problem always disapears when the dev tools are open it is very tricky to debug, however I have managed to trace the following.

The issue appears to be triggered by a call to the template-registry-entry plugin failing. I augmented the system.src.js with the following:

hook('instantiate', function(instantiate) {
    return function(load) {
      var loader = this;

      if (load.metadata.loaderModule && load.metadata.loaderModule.instantiate && !loader.builder && load.metadata.format != 'defined') {
        window.debug("isModule: " + (load.metadata.loaderModule === System._loader.modules["template-registry-entry"].module));

        window.debug("metadata result 1: " + JSON.stringify(load.metadata.result));
        var inResult = load.metadata.loaderModule.instantiate.call(loader, load);
        var inResult2 = System._loader.modules["template-registry-entry"].module.instantiate.call(loader, load);
        window.debug("metadata result 2: " + JSON.stringify(load.metadata.result));

        window.debug("inResult: " + JSON.stringify(inResult));
        window.debug("inResult2: " + JSON.stringify(inResult2));

        return Promise.resolve(inResult).then(function (result) {
          load.metadata.entry = createEntry();
          load.metadata.entry.execute = function () {
            return result;
          }
          load.metadata.entry.deps = load.metadata.deps;
          load.metadata.format = 'defined';
          return instantiate.call(loader, load);
        });
      }
      else
        return instantiate.call(loader, load);
    };
  });

and the results are as follows:

isModule: true
metadata result 1: {"templateIsLoaded":true,"factoryIsReady":false,"resources":null,"dependencies":[],"address":"http://localhost/myapp/app/common/ui/elements/navBarMenu.html","onReady":null,"_template":{},"_factory":null}
metadata result 2: {"templateIsLoaded":true,"factoryIsReady":false,"resources":null,"dependencies":[],"address":"http://localhost/myapp/app/common/ui/elements/navBarMenu.html","onReady":null,"_template":{},"_factory":null}
inResult: {"templateIsLoaded":true,"factoryIsReady":false,"resources":null,"dependencies":[],"address":"http://localhost/myapp/app/common/ui/elements/navBarMenu.html","onReady":null,"_template":{},"_factory":null}
inResult2: {"templateIsLoaded":true,"factoryIsReady":false,"resources":null,"dependencies":[],"address":"http://localhost/myapp/app/common/ui/elements/navBarMenu.html","onReady":null,"_template":{},"_factory":null}
isModule: true
metadata result 1: {"templateIsLoaded":true,"factoryIsReady":false,"resources":null,"dependencies":[],"address":"http://localhost/myapp/app/common/ui/elements/helpTip.html","onReady":null,"_template":{},"_factory":null}
metadata result 2: {"templateIsLoaded":true,"factoryIsReady":false,"resources":null,"dependencies":[],"address":"http://localhost/myapp/app/common/ui/elements/helpTip.html","onReady":null,"_template":{},"_factory":null}
inResult: {"templateIsLoaded":true,"factoryIsReady":false,"resources":null,"dependencies":[],"address":"http://localhost/myapp/app/common/ui/elements/helpTip.html","onReady":null,"_template":{},"_factory":null}
inResult2: {"templateIsLoaded":true,"factoryIsReady":false,"resources":null,"dependencies":[],"address":"http://localhost/myapp/app/common/ui/elements/helpTip.html","onReady":null,"_template":{},"_factory":null}
isModule: true
metadata result 1: {"templateIsLoaded":true,"factoryIsReady":false,"resources":null,"dependencies":[],"address":"http://localhost/myapp/app/common/ui/elements/logConsole.html","onReady":null,"_template":{},"_factory":null}
metadata result 2: {"templateIsLoaded":true,"factoryIsReady":false,"resources":null,"dependencies":[],"address":"http://localhost/myapp/app/common/ui/elements/logConsole.html","onReady":null,"_template":{},"_factory":null}
inResult: {"templateIsLoaded":true,"factoryIsReady":false,"resources":null,"dependencies":[],"address":"http://localhost/myapp/app/common/ui/elements/logConsole.html","onReady":null,"_template":{},"_factory":null}
inResult2: {"templateIsLoaded":true,"factoryIsReady":false,"resources":null,"dependencies":[],"address":"http://localhost/myapp/app/common/ui/elements/logConsole.html","onReady":null,"_template":{},"_factory":null}
isModule: true
metadata result 1: {"templateIsLoaded":true,"factoryIsReady":false,"resources":null,"dependencies":[],"address":"http://localhost/myapp/app/app.html","onReady":null,"_template":{},"_factory":null}
metadata result 2: {"templateIsLoaded":true,"factoryIsReady":false,"resources":null,"dependencies":[],"address":"http://localhost/myapp/app/app.html","onReady":null,"_template":{},"_factory":null}
inResult: {"templateIsLoaded":true,"factoryIsReady":false,"resources":null,"dependencies":[],"address":"http://localhost/myapp/app/app.html","onReady":null,"_template":{},"_factory":null}
inResult2: {"templateIsLoaded":true,"factoryIsReady":false,"resources":null,"dependencies":[],"address":"http://localhost/myapp/app/app.html","onReady":null,"_template":{},"_factory":null}
isModule: true
metadata result 1: {"templateIsLoaded":true,"factoryIsReady":false,"resources":null,"dependencies":[],"address":"http://localhost/myapp/app/ventilationCalculator/home.html","onReady":null,"_template":{},"_factory":null}
metadata result 2: {"templateIsLoaded":true,"factoryIsReady":false,"resources":null,"dependencies":[],"address":"http://localhost/myapp/app/ventilationCalculator/home.html","onReady":null,"_template":{},"_factory":null}
inResult: undefined
inResult2: undefined

as you can see the plugin behaves correctly for the first 4 calls, but the 5th module fails. The metatadata.result is definitely correct but the "template-registry-entry" appears to be corrupt so the call to instantiate doesn't return a value.

[EisenbergEffect]

@jdanyow A clue! ^^^ Do you have time to look into it?

[jdanyow]

@obany awesome :100:- thanks for sharing! will dig into this some more

[obany]

This is now the only defect left on our projects and as such has become a very high priority and blocker to release.

Since the last debug session our code and libraries all over the projects have updated and now the issue exhibits in a different location albeit in a very similar fashion.

Bear in mind that this only happens on Edge without the DevTools open, as soon as they are open it works every time.

The following steps can consistently reproduce the issue in our apps.

In system.src.js the hook('fetch') method is modified as follows to add the window.debug message

hook('fetch', function(fetch) { return function(load) { var loader = this; if (load.metadata.loaderModule && load.metadata.loaderModule.fetch && load.metadata.format != 'defined') { load.metadata.scriptLoad = false; window.debug("systemjs fetch " + load.address + " = " + load.metadata.loaderModule.fetch); return load.metadata.loaderModule.fetch.call(loader, load, function(load) { return fetch.call(loader, load); }); } else { return fetch.call(loader, load); } }; });

So this is simply capturing the content of the fetch method in the 'template-registry-entry' plugin, the next line actually makes the call. Inside the plugin fetch method I have the following:

DefaultLoader.prototype.addPlugin = function (pluginName, implementation) { System.set(pluginName, System.newModule({ 'fetch': function fetch(load, _fetch) { window.debug("DefaultLoader fetch: " + JSON.stringify(load.address)); var result = implementation.fetch(load.address); return Promise.resolve(result).then(function (x) { load.metadata.result = x; return ''; }); }, 'instantiate': function instantiate(load) { return load.metadata.result; } })); };

Which will simply display the address to be loaded.

A working trace of this show the following

`systemjs fetch http://localhost/myapp/app/common/ui/elements/navBarMenu.html = function fetch(load, _fetch) {
window.debug("DefaultLoader fetch: " + JSON.stringify(load.address));
var result = implementation.fetch(load.address);
return Promise.resolve(result).then(function (x) {
load.metadata.result = x;
return '';
});
}
DefaultLoader fetch: "http://localhost/myapp/app/common/ui/elements/navBarMenu.html"

systemjs fetch http://localhost/myapp/app/common/ui/elements/helpTip.html = function fetch(load, _fetch) {
window.debug("DefaultLoader fetch: " + JSON.stringify(load.address));
var result = implementation.fetch(load.address);
return Promise.resolve(result).then(function (x) {
load.metadata.result = x;
return '';
});
}
DefaultLoader fetch: "http://localhost/myapp/app/common/ui/elements/helpTip.html"

systemjs fetch http://localhost/myapp/app/common/ui/elements/buttonList.html = function fetch(load, _fetch) {
window.debug("DefaultLoader fetch: " + JSON.stringify(load.address));
var result = implementation.fetch(load.address);
return Promise.resolve(result).then(function (x) {
load.metadata.result = x;
return '';
});
}
DefaultLoader fetch: "http://localhost/myapp/app/common/ui/elements/buttonList.html"

systemjs fetch http://localhost/myapp/app/app.html = function fetch(load, _fetch) {
window.debug("DefaultLoader fetch: " + JSON.stringify(load.address));
var result = implementation.fetch(load.address);
return Promise.resolve(result).then(function (x) {
load.metadata.result = x;
return '';
});
}
DefaultLoader fetch: "http://localhost/myapp/app/app.html"

systemjs fetch http://localhost/myapp/app/home/home.html = function fetch(load, _fetch) {
window.debug("DefaultLoader fetch: " + JSON.stringify(load.address));
var result = implementation.fetch(load.address);
return Promise.resolve(result).then(function (x) {
load.metadata.result = x;
return '';
});
}
DefaultLoader fetch: "http://localhost/myapp/app/home/home.html"
`

As you can see we get the dump of the method and then the message from inside the method.

Now a failed log with the DevTools closed.

`systemjs fetch http://localhost/myapp/app/common/ui/elements/navBarMenu.html = function fetch(load, _fetch) {
window.debug("DefaultLoader fetch: " + JSON.stringify(load.address));
var result = implementation.fetch(load.address);
return Promise.resolve(result).then(function (x) {
load.metadata.result = x;
return '';
});
}
DefaultLoader fetch: "http://localhost/myapp/app/common/ui/elements/navBarMenu.html"

systemjs fetch http://localhost/myapp/app/common/ui/elements/helpTip.html = function fetch(load, _fetch) {
window.debug("DefaultLoader fetch: " + JSON.stringify(load.address));
var result = implementation.fetch(load.address);
return Promise.resolve(result).then(function (x) {
load.metadata.result = x;
return '';
});
}
DefaultLoader fetch: "http://localhost/myapp/app/common/ui/elements/helpTip.html"

systemjs fetch http://localhost/myapp/app/common/ui/elements/buttonList.html = function fetch(load, _fetch) {
window.debug("DefaultLoader fetch: " + JSON.stringify(load.address));
var result = implementation.fetch(load.address);
return Promise.resolve(result).then(function (x) {
load.metadata.result = x;
return '';
});
}
DefaultLoader fetch: "http://localhost/myapp/app/common/ui/elements/buttonList.html"

systemjs fetch http://localhost/myapp/app/app.html = function fetch(load, _fetch) {
window.debug("DefaultLoader fetch: " + JSON.stringify(load.address));
var result = implementation.fetch(load.address);
return Promise.resolve(result).then(function (x) {
load.metadata.result = x;
return '';
});
}
`

As you can see the systemjs message shows that it is about to call the correct method, but it never reaches the code inside that method!

I have tried bundling the app and while this improves the situation it still fails maybe 1 out of every 4 loads. In addition I have tried the system.js polyfills, bluebird and no polyfills (very slow) for Promises, but this has had no impact on the results.

I am at a bit of a loss to try and understand why this is happening, maybe the plugin has been garbage collected? Any more suggestions to try ?

[EisenbergEffect]

@jdanyow This is really the most important thing to work on now. @obany has provided us some good information. Let's see if we can squash this bug fast. If it's an issue in system.js, then let's submit a PR to them to fix it as well.

[obany]

I have now created a minimal example based on the skel app which demonstrates the issue.

https://github.com/obany/skeleton-navigation

Just build and fire up in edge browser and it shows a blank screen, open devtools, refresh and it displays the app.html.

The main changes to reproduce the failure are load some global resources and disable development logging, console.log has the same effect as opening the devtools and makes it work.

[EisenbergEffect]

@obany As a temporary hack...could you add a console.log statement to your main.js file to ensure that your app always loads?

[obany]

Nice idea, unfortunately Edge swallows any console.logs if the devtools aren't open so it doesn't help.

[EisenbergEffect]

I thought you just said that console.log has the same effect as opening the devtools and makes it work?

[obany]

Sorry that was me confusing myself, mainly because you can't use console.logs in Edge as they get swallowed. .developmentLogging() can be left enabled and it still fails, but you don't see any output in the devtools. I had to create my own method in index.html

<script> window.logs = ""; window.debug = function(a) { window.logs += a + "\r\n"; }</script>

call that when debugging code and when it fails open the devtools and dump the window.logs property.

[jdanyow]

@obany we were able to determine this was an issue with SystemJS. If you execute jspm dl-loader --latest to get on SystemJS v0.19.23 the issue should be resolved.

[obany]

I am afraid to say that did not fix the issue, the skel app I posted a link to earlier still fails with the 0.19.23 loader.

[PWKad]

@obany was this with 0.19.23 in the package.json or actually in jspm_packages/system.js?

[jdanyow]

@obany I was using your app to reproduce the issue- please confirm edge is getting the 0.19.23 version of system.js

[michaelmalonenz]

I am still experiencing the issue both in our app and with the Docs page right after I clear the cache (nearly every time). I am definitely using 0.19.23 on our site - not sure what you're using on the docs.

Though the docs page might be slightly different - I actually get past the spinner there, but I get a blank screen thereafter. It works fine if I type in the address again and hit enter at that point, but frequently still fails if I just hit refresh. It only appears if I navigate to http://aurelia.io/docs.html _not_ if I go straight to http://aurelia.io/docs.html#/aurelia/framework/latest/doc/article/what-is-aurelia

[jdanyow]

We haven't updated systemjs in the docs app yet. @michaelmalonenz I'd be willing to debug your app if you could give me access to it somehow. With @obany's app I was able to reproduce the issue very consistently, only needing to use CTRL+F5. Tracked it down to a specific line of code, upgraded to the latest SystemJS and the issue was fixed.

[EisenbergEffect]

The docs are currently using 0.19.8
They will be updating in the next day or so.

[michaelmalonenz]

@jdanyow sorry - can't give you access to it. I will attempt to narrow the issue further on something I can.

[jdanyow]

here are some tips to help you debug-

1. In your index.html add this before any other scripts:

html <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.3/bluebird.js"></script> <script> Promise.config({ longStackTraces: true }); </script>

1. In your index.html, use system.src.js instead of system.js
2. In main.js, replace this:

js aurelia.start().then(() => aurelia.setRoot());

with this:

``` js
aurelia.start().then(() => aurelia.setRoot()).catch(reason => {
console.log(reason);
console.log(reason.stack);

 alert('open debugger');
 setTimeout(() => {
   debugger;
 }, 5000);

});
```

this should allow you to get the debugger open after the error has occurred to review the error, the stack and other contextual info. I used pretty much the same code to dig into @obany's project.

[michaelmalonenz]

@jdanyow I have some info for you, but I don't know how helpful it will be:

In the ViewEngine, during the function loadTemplateResources the error being thrown is that dependencies is undefined. Which appears logical, because the "registryEntry" it is trying to load is a function:

function instantiate(load) {
  return load.metadata.result;
}

which is where I run out of ideas. I've tried to go one level up the call stack and find some commonality between the templates it is trying and failing to load, but unfortunately there is nothing obvious - they are reasonably normal (but quite different) modules. One is a customElement, the other isn't. It's all very weird. Unfortunately, I've run out of time today, but maybe that helps? Or you could give me something else I need to look for, given the new information?

[jdanyow]

@michaelmalonenz good info- sounds like another incarnation of the same issue I was seeing in @obany's project.

What does the following return:

1. typeof(load.source) (should be string but I was seeing function when the issue happens)
2. load.source.toString() (when the issue occurs it was this instead of some html)
3. JSON.stringify(load, null, 2) (find out what resource was being loaded)

Other things that help with troubleshooting (recently edited) https://github.com/aurelia/framework/issues/227#issuecomment-191025884

[michaelmalonenz]

Good News Everyone! (extra points if you automatically read that in Prof. Farnsworth's voice)
The problem disappears after updating _all_ of my dependencies. This includes the latest Aurelia, jspm in everything. A frustrating day, but it loads in Edge without problems or the Dev tools open!

So while I believe that the right version of SystemJs was being used (the comments at the top of the file certainly implied it was) maybe there was a conflict or a bug fix from elsewhere? Anyway, it's solved now, so I'm less interested in knowing how it got fixed (as I'm not going to be the one maintaining that code!)

Thanks for your help @jdanyow and @EisenbergEffect

[EisenbergEffect]

All thanks goes to @jdanyow on this along with @obany who gave us the clue. I had almost nothing to do with it. I might have even caused some problems :laughing:

[obany]

I can confirm that with all the latest updates of aurelia and systemjs the skel app I provided does work.

However the aurelia docs site and our own apps still fail with the same issue with a failure to call back into the template-registry-entry plugin.

I am assuming that the removal of core-js has reduced the overhead of number of files to load for the skel app hence why it is now working. With the larger projects they still fail.

I will attempt to add more to the skel app to try and get it in a failing state again.

[obany]

My test skel app is now updated https://github.com/obany/skeleton-navigation to all the latest libraries and with the addition of another single blank view/viewmodel (Element5) being loaded it now fails again.

[EisenbergEffect]

@jdanyow Can you continue the investigation? Thanks!

[jdanyow]

@obany I pulled down your latest app, the fix is working for me. I cannot reproduce the issue.

[EisenbergEffect]

@jdanyow I saw it happen with the docs app yesterday ;(

[jdanyow]

zzzzzzzzzzzzzzz this issue is the worst! I can't reproduce in @obany's app or the docs app. Even when clearing my cache.

[EisenbergEffect]

I didn't see it in the docs app at first but it appeared after refreshing multiple times.
However, I did just release updates to the polyfills library this evening. If you jspm installed and got those, maybe there was something related? I hadn't updated the docs app myself to see.

[jdanyow]

Could be- I had [email protected] installed because I had jspm installed all the aurelia libs prior to testing @obany's skelly

This morning I _can_ reproduce the docs app hanging at the splash screen :dizzy_face: I'll update my copy, add the instrumentation and keep digging...

[brianeyre]

Hi people - I'm getting this issue 9 times out of 10 using Edge. Any progress with it yet? It's a massive issue for our project as we are targeting Windows 10 devices.

[EisenbergEffect]

We believe it is a bug in system.js. It's extremely hard to pinpoint. You may want to try using require.js instead and see if that solves the issue.

[EisenbergEffect]

We are still working on it from our end.

[brianeyre]

We will try that next week, thanks for the suggestion.

[obany]

Having updated a couple of our projects to use RequireJS I can confirm this resolves the issue, which does indeed point to it being an issue with SystemJS.

While this is a solution for now having to use requirejs and switching from JSPM/systemjs is not an ideal long term solution.

Most of the Aurelia examples use JSPM/systemjs and the Edge user base is rapidly growing so I assume a resolution for this issue will still need to be found in partnership with the SystemJS devs.

I will be happy to test any potential fixes on our projects if that is of any help.

[EisenbergEffect]

@obany Thanks for taking time to research that and confirming what we suspected. This helps us press the issue with the system.js team. Hopefully they can address it quickly. In the mean time, we have recently released experimental support for Webpack. We'd like to grow this a bit in the future as a strong alternative to jspm/system.js. You may want to look into that and see if it would work for you. We've got a skeleton in our latest release that has the basic configuration in place. We've been told that using Webpack also results in better performance, esp. at startup, so there may be other advantages in addition to resolving the Edge bug.

[EisenbergEffect]

We are closing this for now. The issue is with SystemJS. We plan to move the community away from SystemJS/JSPM in the future. For the present, you may want to look into using our new Webpack setup. We are also working on an NPM/RequireJS workflow. Preliminary tests show it is 4-5x faster than SystemJS as well.

[alvarezmario]

@EisenbergEffect only for curiosity, do you know if Angular2 is having this issues as well? Is SystemJS really that bad?

[EisenbergEffect]

I don't know if they are or not. It mostly appears to manifest when an app reaches above a certain size. My guess is that there aren't enough significant ng2 apps being deployed yet to uncover it in their community.

[weegeekps]

@EisenbergEffect Any idea on a timeline for deprecating SystemJS/JSPM?

[EisenbergEffect]

We aren't going to deprecate it. We are planning to continue to support it. However, we are working in improving the alternative options and switching to one of those as our recommended default. No timeline yet. We do have core team members working on it presently for real apps that need deploying. So, we should have an alternate solution soon.

[alvarezmario]

@EisenbergEffect thanks! The NPM/RequireJS option seems very promising

[weegeekps]

Has anyone opened an issue on the SystemJS Github for this?

[EisenbergEffect]

I think there have been issues reported. I've also personally reported both the IE/Edge and performance issues to Guy.

[32graham]

Looks like @guybedford is using systemjs/systemjs#1182 to track this issue.

[EisenbergEffect]

Yes, he's working on a fix for the bug. It doesn't address the performance issues though. That's different.

[michaelmalonenz]

Even though I said it had been fixed for me earlier, it hadn't - I just got lucky a couple of times in a row. However, now that the fix has been released, I've discovered that there is an interaction with Bluebird promises.

After removing Bluebird, Edge starts up without the Dev Tools open and still has decent performance. So either Microsoft have released their improved performance of the promise library (though the User Voice issue suggests they haven't) or it wasn't just the Promises causing poor performance.

Anyway, it's positive news for me - we can run on Edge!

[jdanyow]

what version of edge do you have- on 25.10586.0.0 the promise implementation is still using setTimeout:

let t = window.setTimeout.bind(window);
window.setTimeout = function(callback, delay) {
  console.log('setTimeout was called');
  return t(callback, delay);
};

let p = new Promise(function(resolve, reject) { resolve('done'); });
p.then(console.log.bind(console));

[michaelmalonenz]

I have Edge v25.10586.0.0, and jspm v0.16.32 and systemjs v0.19.25.
Ok, so decent performance is relative. I timed our app startup (with a manual stop watch, so times are subject to human) and it's ~7.5s on Edge compared to ~2.5 on Chrome, but I think I'll take "slow" over never.

The decent performance means that the drawing times, etc when loading the most complex screen on our UI isn't too frustrating (though the last time I tried that without Bluebird was before the major perf work that you folks did).

[DavidRogers]

I can confirm that updating to systemjs v0.19.25 and removing bluebird.js does indeed make my app work in Edge, however it does take ~15s to load vs. ~2-3s in Chrome. Edge is v20.10240

[flieks]

For me, even with jspm v0.16.32 and systemjs v0.19.25 and without the bluebird it still doesn't work in Edge.
Only when dev mode open it works.
Someone got this working ?

[SorenMuller]

I also tried fiddling with version, but never got it to work everytime..
But when i bundled aurelia, there by limiting the number of .js files to be loaded, it started working..
So I guess Edge has a problem with to many files or the time its taking to load them..
Hope it helps.

[dkent600]

Have you guys tried porting the Aurelia Docs to Webpack? Could be nice in case that will be your recommended best practice for Aurelia, and so we can use the Docs in Edge.

[michaelmalonenz]

Our app can start in Edge every time now. I haven't seen it not start in a while. Current version combinations:

• Bluebird v3.4.0
• SystemJS 0.19.29
• Jspm 0.16.34

[EisenbergEffect]

We aren't sure that Webpack is going to be our default since it can't support 100% scenarios, including those required by the docs. We have an alternate solution we're working on as well.

[dkent600]

@michaelmalonenz Cool, thanks. The Aurelia Docs still don't work for me in Edge, so I assume you aren't using that combo there.

@EisenbergEffect Thanks for the heads up about Webpack. Any hints about what the alternate solution is going to be?

[EisenbergEffect]

@dkent600 I'm working on something that turns gulp into a streaming bundling solution. It basically tries to take the best of webpack, but built on top of gulp's plugin ecosystem, while supporting real module loaders.

[dkent600]

@EisenbergEffect Cool! Thanks!

[weegeekps]

@EisenbergEffect What kind of scenarios are you seeing Webpack unable to support? I'm interested since while we've had some pretty good success on our end moving over to Webpack, it'd be good to know what kind of issues others are seeing with Webpack & Aurelia.

[dkent600]

I'm interested in hearing about that too.

[EisenbergEffect]

• Webpack cannot do on-demand loading of individual modules or bundles which aren't known at build-time.
• Webpack isn't integrated with a module loader (such as require.js, system.js, whatwg, etc.) so it can't handle more advanced loading scenarios in general.
• Webpack doesn't have the notion of a "dep cache" which is important for the future of real modules and HTTP/2.
• Webpack also seems to have some issues with certain composition patterns in Aurelia where it's losing important metadata that is needed to fulfill requests properly. I haven't nailed down the details of this last one yet, but I've seen some bugs related to it. For example, using the dialog plugin to show a dialog based off a Class constructor doesn't work. Developers are required to use strings in that case. This seems to be rooted in point 2 above.

It may be that none of these items are an issue for you, in which case Webpack would be a good choice for now. However, I feel strongly that we should offer a "full fidelity" solution that enables all scenarios and is future-prepared. That's something that we are experimenting with now (with excellent results I might add).

[weegeekps]

Thanks. While Webpack does work for us the fact that it isn't integrated with a module loader has been a point we've noticed as a weakness. It is working great for us now but it is a bit frustrating that it seems to make just a few chunks since it can't determine all the dependencies since Aurelia is using dynamic loading. I didn't really think of these as major issues but after seeing your points I understand better.

Really looking forward to what you come up with. Thanks for the great explanation.

[AStoker]

Digging up an old issue, I know. Has this issue cropped back up for anybody? We're dealing with some Edge strangeness right now.
We have the "why" it's failing narrowed down to the instantiate method in the aurelia-loader-default addPlugin function. It seems that during the process of loading templates, the instantiate method itself is passed back to aurelia-templating instead of the result of the function. Haven't the slightest on the "why" yet. Only happens on Edge with Dev Tools open, same as described previously.

[AStoker]

Also, two additional notes. The errors are not always consistent, it might work once, then fail 8 times, then work again. And it _seems_ to pass consistently when I don't have any plugins or features installed in the main.js

[AStoker]

Edge has failed to load in our project for quite some time. We've about exhausted our resources trying different things and trying to nail down the issue.
Currently, I am in the mindset that it's something wrong in Aurelia's code, as it only occurs when I'm pulling down plugins and other resources (doesn't happen if I just use the standard configuration). I've been trying to find the source of this particular issue mentioned: https://github.com/aurelia/framework/issues/227#issuecomment-191061035
and currently believe it might be related to how template resources are loaded up when using SystemJS and adding the plugin for template-registry-entry, as it finally fails here when trying to load up the app.html!template-registry-entry file via aurelia-loader-default

DefaultLoader.prototype.loadTemplate = function loadTemplate(url) {
      return this._import(this.applyPluginToUrl(url, 'template-registry-entry'));
    };

[EisenbergEffect]

I don't think it's something in Aurelia. Our HUB is running fine on Edge and it uses plugins.
If you are using SystemJS, please make sure you have the latest version.

[AStoker]

Ive gotten the latest of pretty much everything there is to get latest on :P Perhaps there's something going on with the plugins we're using. But on the HUB, you're using RequireJS, right?

[EisenbergEffect]

Yes, the hub is being developed using the CLI and deployed on RequireJS.

[EisenbergEffect]

We had some IE/Edge issues at first, I should note. But they weren't in Aurelia itself. They were in some of our HUB code where we had done some specific things which didn't work well, related to DOM manipulation.

[AStoker]

That's why I think the Hub still works on Edge, because it's using RequireJS. The aurelia-loader-default has different logic to load modules depending on whether or not SystemJS is available. And there is a difference (the instantiate method) between the way the two branches load files and add plugins:

//sans System
DefaultLoader.prototype.addPlugin = function (pluginName, implementation) {
      var nonAnonDefine = define;
      nonAnonDefine(pluginName, [], {
        'load': function load(name, req, onload) {
          var result = implementation.fetch(name);
          Promise.resolve(result).then(onload);
        }
      });
    };

//With System
DefaultLoader.prototype.addPlugin = function (pluginName, implementation) {
      System.set(pluginName, System.newModule({
        'fetch': function fetch(load, _fetch) {
          var result = implementation.fetch(load.address);
          return Promise.resolve(result).then(function (x) {
            load.metadata.result = x;
            return '';
          });
        },
        'instantiate': function instantiate(load) {
          return load.metadata.result;
        }
      }));
    };

Now, I could be interpreting the logic incorrectly, I'll leave that as a definite possibility :)

[SorenMuller]

We have both a site with system.js and one created with Aurelia-cli using Require.js
Using Require.js eliminates the bug i Edge...
But using using system.js, I struggled a lot with Edge, but I think it has something with timeout for loading scripts..
After bundling/minifying the app, the Edge bug has disapeared and loading time was ofcause shorter :-)..
Just my input ;-)

[AStoker]

Yah, unfortunately bundling didn't work for us. :(

[patroza]

We moved to Webpack quite a while ago and things are quite awesome since then.. (just did the switch ti 2.0 and easywebpack)
SystemJS/jspm was nice though... We'll be evalling CLI/RJS too at some point I guess :)

[codermrrob]

Just to say we are also encountering this issue with or without bundling.
It is also reproduced on the Aurelia Kendo-UI Components Catalog (http://aurelia-ui-toolkits.github.io/demo-kendo/#/about/about).

Seems like the best solution is to move to webpack....

[powerbuoy]

Having the same issue here. Bundled app won't load in Edge unless dev tools are open. Using SystemJS v0.19.36 and Bluebird 3.4.1. Might bite the bullet and switch to Webpack but the whole bundling process is a bit of a mystery for me right now so I'm dreading it :P

[dpinart]

@powerbuoy It's working fine for me with same settings than yours. Since a week ago edge works signficatively faster and I can even run the app even without bundling

[powerbuoy]

@dpinart That's odd. Definitely does not work for me. Without Bluebird the app takes ages to load as well.

[dpinart]

I switched to Webpack 1.0 a few months ago but I got back to jspm. Webpacks 1.0 bundling is really tedious and I'm not able to configure several bundles in order to lazy load parts of my app, in addition, with systemjs I can configure system mappings at runtime,...

As an advise, be sure your index.html files looks like the skeleton one

In addition, look at chrome adn edge consoles to ensure you don't have unexpected exceptions. Some times exceptions do not appear in chrome but the do in edge and avoid to complete the app launch

[powerbuoy]

I do get Failed to parse SourceMap: http://.../dist/app.css.map and Failed to parse SourceMap: http://.../jspm_packages/system.js.map. I'm not sure how to remove sourcemaps when bundling (I haven't really touched the build/ folder at all, but I'd prefer if they weren't even included in export/.

[dkent600]

Edge works for me with bundling and system.js (javascript is ES5 with es6-shim and bluebird).

[notanewbie]

I have an HTML5 file that it supposed to load a .js library I made but it won't load in MS Edge, saying that the function is undefined. (BTW the HTML file in video3.html from my repo LIPTV [https://github.com/notanewbie/LIPTV] and the library is from my repo getCookie [https://github.com/notanewbie/getCookie])

[DerAlbertCom]

Hey, loading with Edge seems to works .... if you don't use .globalResources() or .feature(). But this does not help us ;(

[codermrrob]

so far Edge has been working for us using aurelia-cli
still doing our spikes with aurelia-cli but so far, so good.

[AStoker]

@codermrrob Aurelia CLI uses RequireJS which doesn't have the issue with Edge. The Edge issue is due to a problem in SystemJS it seems.

[DerAlbertCom]

yes, the combinaton of Aurela, SystemJs and Edge does not work well together.

[dpinart]

I disagree. Right now, I have sevearal apps with Aurelia + jspm + SystemsJs that work fine in edge. I'm facing some issues with both edge and safari related with polymer, not with aurèlia or jspm.

I can agree that probably app startup is better with requireJS than with SystemJS, but right now there's no a clear difference

[dkent600]

The combo works for me as long as I also use bluebird. Note I also have ES5 javascript with es6-shim.

[AStoker]

The problem with Edge and SystemJS seemed contained to something with loading up plugins. If you have a setup that is working consistently @dpinart, I would love to have the chance to take a look at your setup in an attempt to figure out why other people have problems with SystemJS still :)

[Thanood]

@AStoker I'm also very interested in an answer to that question. 😃
I also have a setup that's been working consistenly for months (January until today). Maybe you'd like to have a look.

Here it is:
http://aurelia-ui-toolkits.github.io/demo-materialize/

Source: https://github.com/aurelia-ui-toolkits/demo-materialize
Source of the plugin used: https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge

[SamDeBlock]

After a long afternoon of debugging, we came up with a very strange fix.
Putting this in our head tag, resolves all our issues with loading in edge.
<script> Function.prototype.call = function(t) { return this.apply(t, Array.prototype.slice.apply(arguments, [1])); } </script>
Some things we found out:

• Reducing the number of globalresources seemed to make the issue go away, but this wasn't a feasible solution.
• Adding a .catch to the last promise in aurelia-framework setRoot function, gave us a pointer to where the actual exception occured. (In our case: _object doesn't support property or method 'match'_
  This seemed to originate from (and only occurred when loading html resources) systemjs/plugins.js where the return of that fetch.call was a function rather than a string. To be clear, the function returned was this fetch function instead of the empty string you would expect.

I think this all traces back to this bug in edge https://github.com/Microsoft/ChakraCore/issues/1415

edit:

• Our app now works in Edge with or without bluebird.
• Edge versions:
  Microsoft Edge 38.14393.0.0
  Microsoft EdgeHTML 14.14393

[DerAlbertCom]

after gaving up on that issue, trying moving to aurelia-cli (which has other problems, and does not worked out yet). i gave this a shoot. first check, the App in Up and Running in Edge. Thank you. But we have not tested any further. but seeing the app starting in Edge is promising.

[AStoker]

Wish I had that a few weeks ago! :D
Our office moved to the Aurelia CLI, and although it's promising, it's not quite at the same place that we had SystemJS (I'm working on getting a few of those features implemented). Glad to hear that there was some fix, and at least a source to the problem was found (theoretically).

[peterpde]

@SamDeBlock Amazing. Your fix worked like a charm. I have been struggling with this issue for quite a while. Just wanted to say thank you.

[don-bluelinegrid]

I am seeing something that sounds similar to this, but in IE 11. Our app hangs on the initial app loading splash screen. We are using latest Aurelia framework, and Typescript + Webpack.

In IE 11 the app hangs at the splash screen, but works fine on all other platforms. I see these errors in the IE 11 console:

DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
127.0.0.1:9000
HTML1300: Navigation occurred.
127.0.0.1:9000
SCRIPT1002: Syntax error
app.bundle.js (71464,1)

Error: Loading chunk 0 failed.
   {
      [functions]: ,
      __proto__: {
         [functions]: ,
         __proto__: { },
         __
symbol:hasInstance0.58877379413517476: undefined,
         __
symbol:isConcatSpreadable0.58877379413517477: undefined,
         __
symbol:iterator0.58877379413517471: undefined,
         __
symbol:match0.58877379413517472: undefined,
         __
symbol:replace0.58877379413517473: undefined,
         __
symbol:search0.58877379413517474: undefined,
         __
symbol:species0.58877379413517479: undefined,
         __
symbol:split0.58877379413517475: undefined,
         __
symbol:toPrimitive0.588773794135174710: undefined,
         __
symbol:toStringTag0.588773794135174711: undefined,
         __
symbol:unscopables0.58877379413517478: undefined,
         message: "",
         name: "Error"
      },
      __stackCleaned__: true,
      __
symbol:hasInstance0.58877379413517476: undefined,
      __
symbol:isConcatSpreadable0.58877379413517477: undefined,
      __
symbol:iterator0.58877379413517471: undefined,
      __
symbol:match0.58877379413517472: undefined,
      __
symbol:replace0.58877379413517473: undefined,
      __
symbol:search0.58877379413517474: undefined,
      __
symbol:species0.58877379413517479: undefined,
      __
symbol:split0.58877379413517475: undefined,
      __
symbol:toPrimitive0.588773794135174710: undefined,
      __
symbol:toStringTag0.588773794135174711: undefined,
      __
symbol:unscopables0.58877379413517478: undefined,
      description: "Loading chunk 0 failed.",
      message: "Loading chunk 0 failed.",
      name: "Error",
      stack: "Error: Loading chunk 0 failed.
    (No stack trace)
From previous event:
   at requireEnsure (http://127.0.0.1:9000/aurelia-bootstrap.bundle.js:97:12)
   at Anonymous function (http://127.0.0.1:9000/aurelia-bootstrap.bundle.js:15794:9)
From previous event:
   at _import (http://127.0.0.1:9000/aurelia-bootstrap.bundle.js:15780:5)
   at loadModule (http://127.0.0.1:9000/aurelia-bootstrap.bundle.js:15838:5)
   at config (http://127.0.0.1:9000/aurelia-bootstrap.bundle.js:15604:5)
   at handleApp (http://127.0.0.1:9000/aurelia-bootstrap.bundle.js:15595:3)
   at Anonymous function (http://127.0.0.1:9000/aurelia-bootstrap.bundle.js:15623:9)
From previous event:
   at Anonymous function (http://127.0.0.1:9000/aurelia-bootstrap.bundle.js:15620:5)
From previous event:
   at run (http://127.0.0.1:9000/aurelia-bootstrap.bundle.js:15617:3)
   at Anonymous function (http://127.0.0.1:9000/aurelia-bootstrap.bundle.js:15642:1)
   at aurelia-bootstrapper-webpack (http://127.0.0.1:9000/aurelia-bootstrap.bundle.js:15542:29)
   a"
   }

Unhandled rejection Error: Loading chunk 0 failed.
    (No stack trace)
From previous event:
   at requireEnsure (http://127.0.0.1:9000/aurelia-bootstrap.bundle.js:97:12)
   at Anonymous function (http://127.0.0.1:9000/aurelia-bootstrap.bundle.js:15794:9)
From previous event:
   at _import (http://127.0.0.1:9000/aurelia-bootstrap.bundle.js:15780:5)
   at loadModule (http://127.0.0.1:9000/aurelia-bootstrap.bundle.js:15838:5)
   at config (http://127.0.0.1:9000/aurelia-bootstrap.bundle.js:15604:5)
   at handleApp (http://127.0.0.1:9000/aurelia-bootstrap.bundle.js:15595:3)
   at Anonymous function (http://127.0.0.1:9000/aurelia-bootstrap.bundle.js:15623:9)
From previous event:
   at Anonymous function (http://127.0.0.1:9000/aurelia-bootstrap.bundle.js:15620:5)
From previous event:
   at run (http://127.0.0.1:9000/aurelia-bootstrap.bundle.js:15617:3)
   at Anonymous function (http://127.0.0.1:9000/aurelia-bootstrap.bundle.js:15642:1)
   at aurelia-bootstrapper-webpack (http://127.0.0.1:9000/aurelia-bootstrap.bund

[don-bluelinegrid]

Also as FYI, I see some pretty significant errors in the JS console of IE 11 for the aurelia.io docs page, and the left-hand navigation does not render as a result:

[sberney]

I am developing a large platform which uses SystemJS (the latest version), and we are experiencing this same issue, no Aurelia involved. The plugin in question is mine -- all code involved is mine (except SystemJS), code which I am confident in.

I tracked it down independently to Chakra and a plugin for fetch at the line which expects the result of fetch to be a string, not a function, exactly as mentioned above. This is a crazy bug.

I highly suspect all the "resolutions" above are patternicity, as this occurs for me in a highly random manner. Sometimes it seems like it is working, other times like it is failing all the time -- it changes from time to time, and I make changes from time to time trying to debug the problem. While it may be possible to "work around" the issue by using software which doesn't provoke the behavior, I suspect the fault is with Edge.

Thanks @SamDeBlock !