3

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?

Improve this question
7
  • any error in console? Commented Jun 17, 2017 at 14:45
  • 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? Commented Jun 20, 2017 at 1:18
  • Also, out of curisosity, are you triggering the dialog when a user clicks an anchor tag (aka a link or <a> tag)? Commented Jun 20, 2017 at 1:20
  • @31piy there is no meaning full error in console. Commented Jun 30, 2017 at 15:22
  • 1
    you should add office.js only when you are serving office app, you can use library like oc-lazy-load to do that Commented Jul 1, 2017 at 16:56

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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 My intention was to explain why the html5mode is disabled. I think you should accept Michael's answer, as his answer is more sound.
@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...
Just tested github.com/devote/HTML5-History-API, adding history.js after office.js works so far...
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.

Improve this answer

2 Comments

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...
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 stackoverflow.com/questions/26549724/…
0
+50

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.

Improve this answer

1 Comment

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...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.