Adding office.js disables html5mode

Question

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?

I'm not sure I follow when it "becomes" the new URL. Loading Office.js shouldn't result in a redirect to a new href. Could you provide the code you're using? — Marc LaFleur, Jun 20 '17 at 01:18
Also, out of curisosity, are you triggering the dialog when a user clicks an anchor tag (aka a link or tag)? — Marc LaFleur, Jun 20 '17 at 01:20
@MarcLaFleur-MSFT I rewrited my question, it is simpler now. — SoftTimur, Jun 30 '17 at 15:22
you should add `office.js` only when you are serving `office app`, you can use library like `oc-lazy-load` to do that — harishr, Jul 01 '17 at 16:56

Elwin Arens · Answer 1 · 2017-07-03T08:41:04.183

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.

edited Jul 03 '17 at 08:41

answered Jul 01 '17 at 06:59

Elwin Arens

1,542
10
21

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:44
1

Bringing Office.js local isn't a good solution. You should always be using the CDN version or you'll run into all sort of issues (it also won't pass validation if you're targeting the Store). I'm not an Angular expert, but I believe you can turn off the hashbang feature. See this question https://stackoverflow.com/questions/26549724/angularjs-how-to-turn-off-hashbang-mode – Marc LaFleur Jul 03 '17 at 15:02

score 3 · Answer 2 · answered Jul 03 '17 at 01:59

3

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.

answered Jul 03 '17 at 01:59

Michael Zlatkovsky - Microsoft

8,424
1
33
46

Thank you, Michael... I just got it work with `oc-lazy-load` that @tiona suggested: so we load `office.js` for some routes and we don't load `office.js` for the others. I will try this polyfill approach if I have trouble with `oc-lazy-load`... – SoftTimur Jul 03 '17 at 02:06
@SoftTimur My intention was to explain why the html5mode is disabled. I think you should accept Michael's answer, as his answer is more sound. – Elwin Arens Jul 03 '17 at 08:46
@ElwinArens I accepted your answer in the duplicated question and Michael's answer in another similar question. As tiona put her comment as an answer and this is what I use so far, I accepted her answer... Hope everyone is happy now... – SoftTimur Jul 04 '17 at 00:17
Just tested https://github.com/devote/HTML5-History-API, adding `history.js` after `office.js` works so far... – SoftTimur Jul 07 '17 at 01:22

harishr · Accepted Answer · 2017-07-03T06:29:35.643

0

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.

edited Jul 03 '17 at 06:29

answered Jul 03 '17 at 05:32

harishr

17,807
9
78
125

`ocLazyLoad` works for me so far, though loading `office.js` for all the cases will be easier if it does not disable `html5mode`. Thank you... – SoftTimur Jul 04 '17 at 00:20

Adding office.js disables html5mode

3 Answers3

Linked