2017-05-25 15 views
3

Angularプロジェクトをangle-cliを使用して作成し、Office TS定義をnpm経由でインストールし、Office JS API CDNをインデックスのヘッダーに配置しました.html。しかし、私のmain.tsでは、私はOffice.initialize = function(){}を呼び出します。名前空間がTSによって認識されていても、「Office」という名前を見つけることはできません。誰かが私が間違っていることを知っていますか?ありがとう!角型Officeアドイン:「名前が「Office」」を見つけられません

私はここのヒントのページを追ってきた:

ng new test 
cd test 
npm install –save-dev @types/office-js 

は、次に/プロジェクトディレクトリを開き、SRCに行く:あなたは私のシナリオを再現したいと角度CLIがインストールされている場合は https://dev.office.com/docs/add-ins/develop/add-ins-with-angular2

index.html。ヘッダにこのCDNを追加します。

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

その後のsrc/main.tsに

を行くと、それはオフィスを初期化するまで、アプリはモジュールをブートストラップしないように変更します。

Office.initialize = function(){ 
    if (environment.production) { 
    enableProdMode(); 
    } 
    platformBrowserDynamic().bootstrapModule(AppModule); 
}; 

UPDATE

私が使用して、これは私のmain.tsで動作するように取得することができた。

declare const Office: any; 

Office.initialize = function() { 
    platformBrowserDynamic().bootstrapModule(AppModule); 
}; 

ただし、これは、アドインがOfficeアプリケーションでサイドロードされている場合にのみ機能します。モジュールはブラウザにブートストラップされていないようで、「読み込み中...」と表示されます。デバッグ目的でブラウザにロードする方法はありますか?私はこれがデバッグにどのように影響を及ぼし、分度器、カルマ、ジャスミンを使ってE2Eや単体テストに影響を与えるかについて考えています。

答えて

1

私はあなたがScript Labを見てお勧めします、recently-:あなたがここにツールのヘルプを見つけることができますAngular 4を使用し、インスピレーションのために使用できるオープンソースのショーケースサンプルも提供しています。基礎となる技術の一部については、podcast about the projectでも説明しています。

私たちはScript Labのために、Office.jsの初期化のためのPromiseを作成し、数秒間それを楽観的に待っています。私たちが受け取っていない場合は、Webモードで起動するか、それがアドイン内にあるかのように起動するかを選択するのに役立つ一連のボタンを表示します。

How to correctly check the host: Office, Office online and web browser

1

Office.jsライブラリはブラウザに読み込まれないため、Office.initialize()は実行されません。しかし、あなたはC:\Windows\SysWOW64\F12\F12Chooser.exe

アップデートでF12ツールを使用して、Officeアプリケーションでアドインをデバッグすることができますhttps://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide

+0

あなたが私を指すことができ、このツールを使用する方法のガイドがありますも参照してください? – codex

+0

F12のヘルプへのリンクで私の答えを更新しました。 –

関連する問題