Search code examples
ms-officeoffice-jsaurelia

Aurelia router fails when hosted in Project


I am creating a Microsoft Office Project Professional 2016 add-in (not VSTO, but the new Office add-ins model). I have made a basic web app, using ASP.NET Core with Aurelia, Webpack and TypeScript (not referencing any office-js apis yet), and deployed the add-in manifest. This works, and I can load the add-in in a side pane within Project.

The problem is when I add a router to my app. The app silently fails when hosted in Project, and is not rendered in the page. By attaching the Windows 10 F12 Developer Tools and viewing the console I can see that the Aurelia app is started, and configureRouter() is called in app.ts. Something seems to fail after that point, but I can't find where to put a breakpoint to catch any more information. If I try to hook into the component lifecycle, bind is called but not attached.

The web app loads correctly in Chrome, Firefox, Edge and IE 11, with and without the router.


Solution

  • This is because history.pushState and history.replaceState are disabled in the Office AddOn context, so the router will fail when it tries to call those functions (which it does to support history forward/backward navigation).

    You can probably find this in the debugger by opening your vendor.bundle and searching for BrowserHistory.prototype.navigate and/or BrowserHistory.prototype.activate and putting breakpoints at the beginning of those. It should be failing in one of them.

    You could try setting both config.options.pushState = false and config.options.hashChange = false to completely disable state management (afaik) but I've never actually tried that myself though.

    You might need to roll a stripped-down BrowserHistory implementation of your own that works for this project, and simply replace the existing History and BrowserHistory keys with that implementation in your root container.