angular - 我的 Angular 组件没有加载到 Office Word Addin 操作窗格中，尽管它在办公环境之外运行良好

问题描述

我正在使用 Angular 开发 Office Word 插件，我在 Word 操作窗格中加载了插件，但 Angular 组件未加载（例如：- home 组件）。下面是我的代码。

索引.html

<!doctype html>
<html lang="en">
  <script>
    __Zone_enable_cross_context_check = true;
  </script>
<head>
  <meta charset="utf-8">
  <title>Addin</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- Office JavaScript API -->
  <script type="text/javascript"
  src="https://appsforoffice.microsoft.com/lib/beta/hosted/office.js"></script>
  <script src="https://appsforoffice.microsoft.com/lib/beta/hosted/office.debug.js"></script>
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

main.ts

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();
}

Office.initialize = () => {
  platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch(error => console.error(error));
};

app.component.html

<app-home></app-home>

home.component.html

<p>home works</p>

如您所见，我还没有写任何逻辑。我只想看到单词插件窗格中的文本“家庭作品”。

如本文所述，我已经完成了app.modules.ts中的更改

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy },
    // Other providers suppressed
  ],
  bootstrap: [
    AppComponent,
    HomeComponent
  ]
})

我也尝试过使用 IE 调试工具 (C:\Windows\SysWOW64\F12\IEChooser.exe)，但控制台日志也没有出现。

我在这里错过了什么吗？非常感谢任何帮助！

更新：

该解决方案适用于我朋友的机器，我们都使用相同版本的 Office 产品。

标签： angularms-wordoffice365office-jsword-addins

angular - 我的 Angular 组件没有加载到 Office Word Addin 操作窗格中，尽管它在办公环境之外运行良好

问题描述

解决方案

推荐阅读