Corey Roth [MVP]

If you want to build an Office AddIn for Word, Excel, or PowerPoint, all you really need to know is a little HTML and JavaScript.  Since Ionic Framework is built with HTML and JavaScript, it actually makes a great fit for hosting an Office AddIn.  In fact, task pane apps have a very similar shape to your mobile phone (long and narrow) so the UX elements that Ionic provides work pretty well there.  Here's an example of my Word AddIn, BrewZap menus.  It creates paper menus for subscribing breweries using the menus they manage directly from their mobile app on the BrewZap platform.

Getting started with the manfiest

An Office AddIn is essentially just a manifest XML file that tells Office the location of your web application.  You'll want to start with one of the existing manifest examples otherwise you may be missing components required to get your AddIn published in the Office Store.  You will need to provide a link to your web application as well as icons in the size of 12x12, 32x32, and 80x80.  Look through the example manifests and you should have what you need to get started.  I recommend creating two manifests: one for debugging locally and one for production use.  When you debug locally, you can simply run ionic serve and load the AddIn from the AddIns menu in Word (or whatever app you are targeting).

Creating your Ionic app

Create an Ionic app using ionic start and selecting the appropriate options.  I used the tab template and it works pretty well.  Once you project is created, you can start adding your code.  First, we add the reference to the office.js library to your index.html.  The Office Store requires you serve it from the CDN.

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>

Depending on what you are doing, you may actually have to load jQuery as well.  I know that seems odd in an Ionic app.  Once you have your scripts registered, you are ready to start writing some content into your Word document.  The Word AddIn example has some easy snippets you can leverage

function insertHtml() {
     Word.run(function (context) {

        // Create a proxy object for the document.
         var thisDocument = context.document;

        // Queue a command to get the current selection.
         // Create a proxy range object for the selection.
         var range = thisDocument.getSelection();

        // Queue a command to replace the selected text.
         range.insertText('"<b>Hello World!</b>."\n', Word.InsertLocation.replace);

        // Synchronize the document state by executing the queued commands,
         // and return a promise to indicate task completion.
         return context.sync().then(function () {
             console.log('Added html.');
         });
     })
         .catch(function (error) {
             console.log('Error: ' + JSON.stringify(error));
             if (error instanceof OfficeExtension.Error) {
                 console.log('Debug info: ' + JSON.stringify(error.debugInfo));
             }
         });
}

I find the easiest way to apply formatting in your word document is to use HTML.  Word will interpret it appropriately and format your content.

Testing your app

You can develop Office AddIns in Windows, OS X, an iPad, or in the browser with Word Online.  The same API works for all hosts of your application.  However, you need to pay attention to which API you use because some are supported in different versions of the Office client (2013 vs. 2016).  You need to test them your AddIn on all platforms to verify that it works correctly.  Windows of all platforms gave me the most trouble because Internet Explorer gets used as the backend for Office AddIns.  I also had some issue with the formatting on some inputs and they didn't render correctly in Word 2016.

Deploying your app

You'll need to deploy the code for your app somewhere so that you can publish your app to the store.  This entails adding the browser platform to cordova and then doing a production build.  You can read my steps on how to run an Ionic PWA using Azure Web Sites for more details.  If you aren't hosting in Azure, the steps are pretty familiar still.  To do your final build for production, you will run the following command.

ionic cordova build browser --prod --release

You'll then copy the contents of your platform/browser/www/build folder to your production server.  Now update your manifest to point to that new server location and you're ready to go.  Once you validate it works, you can begin the Office Store submission process to get your app in the store.

Here is what my app looks like after it has inserted a table listing the beer menu at a restaurant.

Sorry for the lack of code formatting today.  I don't have a working solution to post code effectively currently.  Once I scrub some of the code, I'll post a repo with the complete solution as well.