Angular Office Add-in: "Cannot find name 'Office'"
I created a new Angular project using angular-cli and then installed the Office TS definitions via npm and put the Office JS API CDN in the header of my index.html. However, in my main.ts, when I call Office.initialize = function () {}; it cannot find the name "Office" even though the namespace is recognized by TS. Does anyone know what I am doing wrong? Thank!
I read the following tips here: https://dev.office.com/docs/add-ins/develop/add-ins-with-angular2
If you want to reproduce my scenario and install Angular CLI:
ng new test
cd test
npm install –save-dev @types/office-js
Then open your project directory and go to src / index.html. Add this CDN to your header:
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js" type="text/javascript"></script>
Then go to src / main.ts
And change it so that the application doesn't load the module until after it initializes Office:
Office.initialize = function(){
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
};
UPDATE
I managed to get this to work in my main.ts using:
declare const Office: any;
Office.initialize = function () {
platformBrowserDynamic().bootstrapModule(AppModule);
};
However, this only works if the add-in is loaded in an Office application. The module doesn't seem to load in the browser and just says "Loading ...". Is there a way to load it in the browser for debugging purposes? I'm talking about how it will affect debugging and any E2E or unit tests with protractor, karma and jasmine.
source to share
I recommend that you take a look at Script Lab , a recently announced tool, as well as an open source demo that uses Angular 4 that you can use for inspiration. Some of the core technologies are also discussed in the project's podcast .
What we did for Script Lab, we create a Promise initialization for Office.js and optimistically await it for a few seconds. If we don't get it, we'll show a set of buttons that will help the user choose whether to launch in web mode or launch as if they were still in the add-on (and hopefully the best).
See also How to Correctly Check Host: Office, Office Online, and Web Browser
source to share
The Office.js library is not loaded in the browser and therefore Office.initialize()
does not start. But you can debug the add-in in an Office application using the F12 tool inC:\Windows\SysWOW64\F12\F12Chooser.exe
Update: You can find help for this tool here: https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide
source to share