Outlook Add-in using Angular 4

Question

I am developing Outlook Add-in using angular4. I am having trouble with understanding few of the concepts regarding developing office add-ins using angular.

1. Do I need to implement both Office.initialize and Office.OnReady() in main.ts because whenever I start my application I am getting error that I have not implemented Office.OnReady although I have used Offize.initialize
2. Do I need to use Office.initialize everytime I use some office component in my app?
3. Does it affect my Add-in if I am running my app in dev mode and not in production mode?
4. Is it possible to run my angular app in Office dialog and not in taskpane, i.e. I have a simple html(which contains only one button) on my taskpane and when I click that button it opens my angular app in dialog.
5. Or can I open a single component of my app in a dialog? If yes, can somebody please explain with an example code.

Answer 1

1. You only need to implement one of them. You're probably trying to access to some office method before initializing the Office properly. What I like to do generally is to have a loading screen with a spinner and only navigate from that screen once office initializes.

   Office.initialize = function(reason) {
       window.location.hash = 'apploaded';
   }
   

2. No - you just need to initialize it once, unless you're doing a server refresh. As long as you stay in your app's context and not refresh the entire app but just navigate between components, you should be ok.

3. It might, especially if by local you mean you're doing it without the Office context (so you're not in the client). How I generally solve this problem is to never access the Office object directly but always through a service, which in the event of Office object / or its subproperties missins, it doesn't fail. So instead of

   // calling directly in some component
   office.context.mailbox.item.to.getAsync 
   

   I'd do

   OfficeService.GetAsync() {
       if (Office && Office.context && Office.context.mailbox && ...) {
            // call real method
       }
       else {
            console.log('Detected local mode - without office context')
            // do a fake test operation instead of the real thing.
       }
   
   }
   

4. Look into the functionFile. This gives you a button in the ribbon, which you can click and execute a function basically. It would still load the html into an invisible browser but you wouldn't get a taskpane in this case. This should be only supported in a subset of clients though, not everything.

5. There are a few ways of doing this, you can just point your taskpane entry url in your manifest to that component url. Like this

   <SourceLocation DefaultValue="https://randommailaddin.org/component"/>
   

and map the /component routing to your component, so when the user clicks to the button it would only load that component. You'd still need to initialize the office context though or your function wouldn't work.