CODEWITHSUNDEEP
angularoffice-addins
Alex Willenbrink
Alex Willenbrink

Reputation: 162

How do you generate an office add-in built upon Angular that uses a shared Javascript runtime?

I'm trying to build an Office add-in for Excel the uses Angular and shares a Javascript runtime. Here's a perfect example of what I'm trying to implement except it's using React.

I tried to reverse engineer the above example along with the Office add-in documentation on creating a Javascript shared runtime. At this point I do have an excel add-in built upon Angular working but can't get the shared Javascript runtime aspect working.

In my project, I've added 2 buttons in the ribbon: "Open task pane" and "Close task pane". The intended behavior is to use these buttons to open and close the taskpane (...sounds simple enough). At the moment, neither of these buttons seem to work even though the functions I've attached to them in the tags should be defined and available through the global command object.

I've played around with the tag in the "manifest.xml" file but uncommenting out the tag seems to just break everything.

Here's my repo. I'm not sure if it'll help or if it'd be easier to solve this by starting from scratch, but if someone could tell me what I'm doing incorrectly or point me towards a repo/code sample for an Office add-in for Excel the uses Angular and shares a Javascript runtime, that would be lovely.

Thanks in advance.

Upvotes: 1

Views: 481

Answers (2)

Frank Guerra
Frank Guerra

Reputation: 49

Hi hope you're doing well, first up want to ask you if you make your SharedRuntime test works? i came across this post as i am literally trying to do the same as you, taking a look your repo seems that you are missing some properties in the manifext file, to make shared runtime works as mentioned in the docs you have to include these properties:

  1. Set property, under Sets section as you can see in the picture below
<Hosts>
 <Host Name="..."/>
</Hosts>
<Requirements>
 <Sets DefaultMinVersion="1.1">
  <Set Name="SharedRuntime" MinVersion="1.1"/>
 </Sets>
</Requirements>
<DefaultSettings>

and 2. Set Runtime property under Runtimes section as seen below

<VersionOverrides ...>
 <Hosts>
  <Host xsi:type="...">
   <Runtimes>
    <Runtime resid="Taskpane.Url" lifetime="long" />
   </Runtimes>
  ...
  </Host>

you can check if you're still looking for help, and again would like to know if you get it working as this was posted a year+ ago!

Upvotes: 1

William Denman
William Denman

Reputation: 3154

One reason you might be having trouble is due to your Excel version and the peculiarities of Office.js and the web renderer used.

First you have to check that the Shared runtime requirement set is supported by the version of Excel you are running.

If it is supported, then you need to check exactly which HTML renderer is supported by your combo of Windows version + Excel version.

What is very important to note that if you turn on a shared runtime using the manifest and you DON'T meet the requirements for WebView2 (chromium) it will default to the IE11. And looking at your Angular app's browserslist you have disabled support for IE11 so the add-in will break.

If your add-in includes the element in the manifest, then it will not use Microsoft Edge with the original WebView (EdgeHTML). If the conditions for using Microsoft Edge with WebView2 (Chromium-based) are met, then the add-in uses that browser. Otherwise, it uses Internet Explorer 11 regardless of the Windows or Microsoft 365 version.

Of note, it just so happened that my corp's version of Windows 10 and Excel was the very edge case "Semi-Annual Enterprise channel" and I had to put in an obscure registry entry to enable WebView2. This was only mentioned on a random microsoft blog

Note: Customers on the Semi-Annual Enterprise channel of Office can expect to receive version Version 2102 in July 2021. Admins at these customers will need to take an additional step to enable the use of WebView2. They must create the registry key HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\16.0\WEF\Win32WebView2 and set its value to dword:00000001.

Upvotes: 1

Related Questions