Angular V19 Office-Js Excel Add-in displayDialogAsync zone.js error

I am trying to create an Office 365 Addin using Angular v19 and MS Excel for a simple modal dialog example.

I believe I have installed the appropriate dependencies:

@types/office-js
@types/office-runtime


As well as adding the following JS script references in the index.html page which serves the Angular SPA:

<script type="text/javascript">
// Office js deletes window.history.pushState and window.history.replaceState. Cache them and restore them
window._historyCache = {
replaceState: window.history.replaceState,
pushState: window.history.pushState
};
</script>
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
<script type="text/javascript">
// Office js deletes window.history.pushState and window.history.replaceState. Restore them
window.history.replaceState = window._historyCache.replaceState;
window.history.pushState = window._historyCache.pushState;
</script>


The plugin successfully gets side-loaded into MS Excel Desktop and displays the task pane without any errors.

The task pane renders a button to allow the end-user to invoke a modal dialog as follows:

Office.context.ui.displayDialogAsync('https://localhost:4200/modaltest', { height: 30, width: 20 });


modaltest is a route within the same Angular app which renders a different component to the task pane.

However, upon examining the console log of the modal dialog the following error message is logged:

zone.js:2227
TypeError: Cannot read properties of undefined (reading 'register')
at t.register (excel-win32-16.01.js:25:344923)
at excel-win32-16.01.js:25:1436906


I believe this might be Angular's change detection mechanism inteferring with the MS Office API.

Does anyone have any recommendations for resolving this problem?

Thanks for your time.

Continue reading...