CODEWITHSUNDEEP
angularjsoffice-js
Sandun Tharaka
Sandun Tharaka

Reputation: 747

Angular component not loading under Outlook 2016 for Mac

I am working on create a Outlook Add-in using Angular. For a sample i added task pane button to open up a side panel in outlook. After index page loading its open another component.

Problem is angular component not loading in Outlook 2016 mac, but it works Firefox, Chrome, Safari browsers.

How would you recommend carrying out such a problem?

Note : I have tested outlook on mac with Vorlon. Office.intialize not loading and got folllowing console messages.

  1. Attempting to configure 'userAgent' with descriptor '{}' on object '[object Navigator]' and got error, giving up: TypeError: Attempting to change the getter of an unconfigurable property.
  2. Attempting to configure 'appVersion' with descriptor '{}' on object '[object Navigator]' and got error, giving up: TypeError: Attempting to change the getter of an unconfigurable property.
  3. Attempting to configure 'appName' with descriptor '{}' on object '[object Navigator]' and got error, giving up: TypeError: Attempting to change the getter of an unconfigurable property.
  4. Attempting to configure 'product' with descriptor '{}' on object '[object Navigator]' and got error, giving up: TypeError: Attempting to change the getter of an unconfigurable property.
  5. Attempting to configure 'vendor' with descriptor '{}' on object '[object Navigator]' and got error, giving up: TypeError: Attempting to change the getter of an unconfigurable property.

And also I published the addin and checked F12 to console messages in Outlook on windows. getting an error message "SCRIPT5022: Office.js has not been fully loaded yet. Please try again later or make sure to add your initialization code on the Office.initialize function."

This is my main.ts file 

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

declare let Office:any;

Office.initialize = (reason: any) => {
  console.log('SampleAddin: initalizing office.js...');

  // bootstrap
  platformBrowserDynamic().bootstrapModule(AppModule)
    .then((success: any) => {
      console.log('SampleAddin: bootstrap success', success);
    })
    .catch((error: any) => {
      console.log('SampleAddin: bootstrap error', error);
    });
};

Upvotes: 1

Views: 348

Answers (1)

Marc LaFleur
Marc LaFleur

Reputation: 33124

Without an error/warning, it is difficult to identify what might be going on. I'd recommend looking at the following resources:

  1. Tips for creating Office Add-ins with Angular

  2. Debug Office Add-ins on iPad and Mac

  3. OfficeDev/script-lab (OSS Word/Ppt/Excel Add-in using Angular)

Upvotes: 1

Related Questions