###Building an Office add-in with Angular 2 sample

This is a sample project showing how to get started building Office add-ins with Angular 2 and Office UI Fabric. The sample add-in is a task pane add-in for Excel.

####Latest

This sample has been updated for Angular 2 RC5.

####Requirements

Tools:

• Node.js
• Visual Studio 2015 Community or > update 3
• Office Developer Tools
• TypeScript for Visual Studio 2015 latest version

NPM Packages:

• TypeScript
• Typings

These need to be installed globally. The setup script will do this (see the installation section).

Also recommended are:

• Node.js Tools for Visual Studio 2015
• NPM Task Runner
• Open Command Line

Visual Studio is required to be able to debug the add-in any of the Office desktop applications. That said you can run this sample using the lite-server and use you preferred IDE to work with it. You can then still use Office Online for in browser debugging (see below).

####Installation

Download or clone the repo to its own folder. Open a command prompt under the ./OfficeAddInWithAngular2Web folder and run the command:

npm run setup

This will install all the required NPM package and typings. If you are using Visual Studio now open the solution and build it.

SSL issues

Office add-ins require HTTPS and browser errors when the localhost certificate is not trusted. Make sure that the certificate being used by IIS Express or lite-server is trusted. See this post for more information.

####Running the add-in

#####...in Excel Online

Either run start the OfficeAddInWithAngular2Web project in VS or from the OfficeAddInWithAngular2Web directory run

npm start

Open up a new workbook in Excel Online. Click on the INSERT tab and then Office Add-ins. On the Office Add-ins dialog click Upload my Add-In and select OfficeAddInWithAngular2/OfficeAddInWithAngular2Manifest/OfficeAddInWithAngular2.xml. The add-in will now be available on the HOME tab. F12 to debug the addin in browser.

#####...in Excel desktop

In Visual Studio 2015 build the project and run it.

####Resources

This sample is more of a reference project for people who are already familiar with Office add-ins, Angular 2 and TypeScript than a tutorial so if you need to get up to speed with anything here are some good resources.

• Angular 2
• TypeScript
• Office UI Fabric
• Office Add-ins