问题
I have a mean-stack website which enables html5mode by $locationProvider.html5Mode(true). and index.html looks like as follows:
<html>
<head>
<base href="/" />
...
</head>
<body ng-app="f">
<ui-view ng-cloak></ui-view>
</body>
</html>
Because of html5mode, we can load in a browser, eg. https://localhost:3000/home, which will remain the same; without html5mode, that url would become https://localhost:3000/#/home.
Now I want the server to serve (besides the web site) also an Office add-in. I will need to be able to do <SourceLocation DefaultValue="https://localhost:3000/addin" /> in an add-in manifest file. To this end, I need to add
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script> in index.html.
However, I realise that after adding <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script> in index.html of the website, loading https://localhost:3000/home in a browser becomes https://localhost:3000/#/home, which means adding office.js disables html5mode.
Does anyone know how to what's wrong? Does anyone have a workaround?
回答1:
putting comment as answer
As I understand, office.js is needed only for office app, in that case do not burden your web-app with office-js. Use ocLazyLoad (or some other similar library) to load the office.js optionally/dynamically only when needed.
回答2:
Modifying "office.js" itself is the wrong approach. First of all, the Store currently requires that you reference the official Office.js CDN; so already, that approach has a problem. Also, you don't want to be in the business of having to keep applying the same patch to a set of files that are often changing, nor to be stuck on an old version just because that's the one that you'd modified.
A much better approach is to have an additional file that fills in the gaps, but only as an additive thing. It's far less invasive and less prone to breaking.
For the issue of history in particular: see Office.js nullifies browser history functions breaking history usage for an approach that uses a polyfill to enable history.
回答3:
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.
You could remove these two lines of code to re-enable html5mode, but considering that the History API is most certainly disabled for a reason, odds are that the office.js plugin will stop working properly with html5mode enabled.
来源：https://stackoverflow.com/questions/44604703/adding-office-js-disables-html5mode