Dialog url not working with angular.bootstrap (infinite $ digest Loop)

Question

I have a mid-level website. I want to use ExecuteFunction to bind a button to launch this website in a dialog box:

function doSomethingAndShowDialog(event) { clickEvent = event; Office.context.ui.displayDialogAsync("https://localhost:3000/try", {}, function () {}) } 

Clicking on the button opens a dialog box with the following URL, it shows the contents of the page:

 https://localhost:3000/try?_host_Info=excel|web|16.00|en-us|7fe9b4e9-d51e-bea5-d194-c817bc5ed4bc|isDialog#%2Ftry%3F_host_Info=excel%7Cweb%7C16.00%7Cen-us%7C7fe9b4e9-d51e-bea5-d194-c817bc5ed4bc%7CisDialog 

However, the console has an Error: $ rootScope: infdig Endless $ digest Loop in angular.bootstrap(document, ['myapp']) :

 var wait = setTimeout(myFunction, 1000); Office.initialize = function (reason) { $(document).ready(function () { angular.bootstrap(document, ['myapp']) console.log("bootstrapped inside Office.initialize"); clearTimeout(wait); }) } function myFunction () { $(document).ready(function () { angular.bootstrap(document, ['myapp']) console.log("bootstrapped outside Office.initialize"); }) } app = angular.module("myapp", []); app.config(...); app.controller(...); 

If we just open https://localhost:3000/try in the browser, no error occurs.

Does anyone know why this long url did not work with angular.bootstrap ? How can we fix this?

Edit 1: screenshot of the console for https://localhost:3000/try?_host_Info=excel... Note that neither bootstrapped inside Office.initialize nor bootstrapped outside Office.initialize . But if I run https://localhost:3000/try in the browser, I will only see bootstrapped outside Office.initialize when I call it from the Excel client, I will only see bootstrapped inside Office.initialize .

Answer 1

It looks like you are trying to connect a page that can work as an add-in, or a separate page. Whenever possible, it is best to maintain separate views for each use case. If nothing else, it makes everything a lot more direct. Combining them probably creates a lot more overhead and a headache that is worth it.

Part of your problem here is that you have two separate code paths, and you assume that only one path will be executed at a time. When loading in the browser, this is true; it simply ignores the Office.initialize function. When loading inside Office, it will execute both ways. One will run Office, the other will run setTimeOut after 1 second.

If you have two different code paths where only one is executed, you need to check if you are working as an add-in or as a separate page. This is where these query parameters come into effect. If you have the _host_Info request parameter _host_Info , then you are working in Office. For instance:

 if (getParameterByName('_hostInfo')) { // _hostInfo is defined Office.initialize = function (reason) { $(document).ready(function () { angular.bootstrap(document, ['myapp']) console.log("bootstrapped inside Office.initialize"); }); } } else { // _hostInfo is not defined $(document).ready(function () { angular.bootstrap(document, ['myapp']) console.log("bootstrapped outside Office.initialize"); }) } 

Note that getParameterByName() here a function pulled from this answer . You can use any method you prefer.