Adding Bluebird to Aurelia app introduces bugs

Question

I tried my Aurelia app in IE Edge today and it took like 20 seconds to load the front page. Switching pages also takes unreasonably long so I google aurelia edge performance and found that adding the Bluebird JS library helps with performance in all browsers. I couldn't find an example of exactly how to add this library except for the instruction to add it just before system.js.

So now instead of this:

<script src="/jspm_packages/system.js"></script>
<script src="/config.js"></script>
<script>
    System.import('aurelia-bootstrapper');
</script>

I have this:

<script src="//cdn.jsdelivr.net/bluebird/3.4.1/bluebird.min.js"></script>
<script src="/jspm_packages/system.js"></script>
<script src="/config.js"></script>
<script>
    System.import('aurelia-bootstrapper');
</script>

The whole app works just like it used to, I've tried basically every single view and its functionality, except for one thing;

On every route success I add an id to the <html> element (for styling purposes) matching the currently viewed route. So on the home page I'll have <html id="home-page"> and on the login page <html id="login-page">.

This is done in app.js (the root element) in its attached() method like so:

this.eventAggregator.subscribe('router:navigation:success', event => {
    if (event.instruction && event.instruction.router && event.instruction.router.currentInstruction && event.instruction.router.currentInstruction.config) {
        document.documentElement.id = event.instruction.router.currentInstruction.config.name + '-page';
    }
});

For some reason, on the first page load, and only on the first page load, this event never fires. Going to another route works fine, and going back to the route where the event never fired the first time works fine. Only on the first page load it doesn't fire.

If I remove bluebird it starts working again.

Does anyone have any idea what might be causing this? Like I said the only change I've made is adding the bluebird script element to index.html. I haven't made any changes at all in the actual application code.

powerbuoy powerbuoy · Accepted Answer · 2016-08-08T09:56:33

So the way I solved it is that I now check the current page on load as well as in the router:navigation:success event. It's a little annoying that this one thing stops working with Bluebird, but at the same time the site is now usable in IEdge so...

// Give <html> an ID representing the current page
if (this.router.currentInstruction) {
    document.documentElement.id = this.router.currentInstruction.config.name + '-page';
}

// Listen to route navigation changes and change the ID
this.navigationSubscription = this.eventAggregator.subscribe('router:navigation:success', event => {
    if (event.instruction && event.instruction.router && event.instruction.router.currentInstruction && event.instruction.router.currentInstruction.config) {
        document.documentElement.id = event.instruction.router.currentInstruction.config.name + '-page';
    }
});

Adding Bluebird to Aurelia app introduces bugs

1 Answers