My Angular component is not loading in the Office Word Addin action pane, though it works fine outside the office environment

Question

I am developing an Office word addin using Angular, I got the addin loads in the Word action pane, but the Angular component is not loading (eg:- home component). Below is my code.

index.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>

As you can see that there I have not written any logic yet. All I want to see is the text "home works" in the word addin pane.

As mentioned in this post, I have already done the changes in the app.modules.ts

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

I have also tried using the IE Debug tool (C:\Windows\SysWOW64\F12\IEChooser.exe), but the console logs are not coming there as well.

Am I missing anything here? Any help is really appreciated!.

Update:

The solution works on my friends's machine and we both uses the same version of Office products.

Sibeesh Venu Sibeesh Venu · Accepted Answer · 2020-02-13T15:42:09

Yeah I tried many things, some of them are below.

Check the app with different node version
Update the Office
Reinstall the Office
Do the complete sideloading of the app, multiple times

None of them worked, at the end what worked for was, Updating the Windows 10. Yeah, I was using the Windows 10 version 1903, and updating it to the version 1909 fixed my issue.

My Angular component is not loading in the Office Word Addin action pane, though it works fine outside the office environment

1 Answers