javascriptangularjsms-officeoffice-jshtml5mode

Adding office.js disables html5mode

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?

Solution

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