Adding office.js adds # in the url, then removes it

Question

I have a mean-stack web site. Initially, views/index.html (having <ui-view></ui-view>) is the entry point of all the pages. It uses angular-ui-router and html5mode. Thus, https://localhost:3000/XXXX in a browser will remain the same (rather than adding #) and show the corresponding content based on the router.

Then, I want the server to serve also an Office add-in. I will need views/addin.html that contains office.js and another router, such that the site serves a set of urls https://localhost:3000/addin/XXXX, and I don't mind if it is html5mode or not (a url can contain # somewhere).

So here is the correpsonding of routes/index.js:

router.get('/addin/*', function (req, res) {
    console.log("router.get /addin/*");
    res.sendfile('./views/addin.html')
});

router.get('*', function(req, res) {
    console.log("router.get *");
    res.sendfile('./views/index.html');
});

And here is views/addin.html:

<html>
<head>
    <title>F-addin</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
    <!--<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>-->
    <base href="/" />
</head>
<body ng-app="addinF">
    addin content
    <ui-view ng-cloak></ui-view>
</body>
<script>
    var addinApp = angular.module('addinF', ['ui.router'])
    addinApp.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {
        $stateProvider
            .state('addinNew', {
                url: '/addin/new',
                template: "new page"
            })
            .state('addinHome', {
                url: '/addin/home',
                template: "home page"
            })
        $locationProvider.html5Mode(true);
    }]);
</script>
</html>

When office.js is commented as above, https://localhost:3000/addin/new and https://localhost:3000/addin/home in a browser work well. However, when office.js is uncommented, there is an odd behavior: typing https://localhost:3000/addin/new in a browser will change to https://localhost:3000/#/addin/new, then change back to https://localhost:3000/addin/new. And we will see addin content new page appear once and disappear.

With office.js uncommented, if we load a manifest file with <SourceLocation DefaultValue="https://localhost:3000/addin/new"/>, we will see also in the task pane addin content new page appear once and disappear, and then Add-in Error Something went wrong and we couldn't start this add-in. Please try again later or contact your system administrator.

Without html5mode here, .../addin/new or .../addin/home in a browser will only show addin content; the add-in can be loaded, with only addin content too.

My goal is to make an add-in pointing to .../addin/new or .../addin/home work. office.js has to be loaded somewhere. I don't mind if it is html5mode (ie, the url has #), but the behavior in either way is odd or unsatisfactory. Does anyone know how to fix it or have a workaround?

Duplicate of https://stackoverflow.com/questions/44604703/adding-office-js-disables-html5mode/44858254#44858254. — Elwin Arens, Jul 01 '17 at 07:01

score 1 · Accepted Answer · answered Jul 01 '17 at 07:07

Looking at the debug version of the office.js file:

https://appsforoffice.microsoft.com/lib/1/hosted/office.debug.js

You'll see that the window's history replaceState and pushState functions are set to null:

window.history.replaceState = null;
window.history.pushState = null;

Which disables the ability to manipulate the browser's history and it seems it has Angular thinking the history API is not available, so Angular falls back to hashtag navigation.

In the office.js minified version you can find these two lines by looking for:

window.history.replaceState=e;window.history.pushState=e;

You could remove these two lines of code to re-enable html5mode, but i'm not sure if the office.js plugin will keep working properly.

Thank you... I copied `office.js` to local, such that `https://localhost:3000/static/office.js` shows well the file. But loading `addin.html` with the new reference gave me an error in the console `Uncaught SyntaxError: Unexpected token < :3000/static/o15apptofilemappingtable.js:1`. I always got this error no matter if I remove those two `window.history` lines... — SoftTimur, Jul 01 '17 at 13:42

Adding office.js adds # in the url, then removes it

1 Answers1