office-js office-addins word-addins angular-cli-v8

Office Word Addin with Angular CLI 8.2 - Getting Unhandled Navigation Error

I am trying to run a simple application in Office word add-in that I have built using Angular CLI 8.2. This application has a home page with a link. That link should route to another component. Routing works in Edge and IE 11 but doesn't work in word add-in. On loading the app in the word. I see the home page but I see this error in the Developers tool with no details. When I click on the link, it doesn't do anything. I think due to following error angular routing is not working.

OS: Windows 10, Microsoft Word : 2016 (16.0.5110)

Here is my package.json

{
  "name": "tb",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.0",
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/forms": "~8.2.0",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.802.0",
    "@angular/cli": "~8.2.0",
    "@angular/compiler-cli": "~8.2.0",
    "@angular/language-service": "~8.2.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

tsconfig.json

I have updated the target from "es2015" to "es5" to make it work in IE. Otherwise it was displaying a blank page.


{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { LoadComponent  } from './load/load.component';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    LoadComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

Just to be on the safe side, I added the route with and without a slash. both links are not working. It's not doing anything at all.

<ul class="sidebar-nav nav-pills nav-stacked" id="menu">
    <li>
        <a routerLink="load" title="Load component" style="cursor: pointer;">Link 1</a>
    </li>
    <li>
        <a routerLink="/load" title="Load component" style="cursor: pointer;">Link 2</a>
    </li>
</ul>


<router-outlet></router-outlet>

load.component.html

<div> Load Component works ! </div>

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>MyApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

polyfills.ts


/*
 * BROWSER POLYFILLS
 */

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 */
import 'web-animations-js';  // Run `npm install --save web-animations-js`.


import 'core-js/es/symbol';
import 'core-js/es/promise';
import 'core-js/es/object';
import 'core-js/es/function';
import 'core-js/es/parse-int';
import 'core-js/es/parse-float';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/string';
import 'core-js/es/date';
import 'core-js/es/array';
import 'core-js/es/regexp';
import 'core-js/es/map';
import 'core-js/es/weak-map';
import 'core-js/es/set';


/*
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoadComponent } from './load/load.component';

const routes: Routes = [
  { path: 'load', component: LoadComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

I have tried whatever I could find online but couldn't resolve the issue.

Update

I have removed all the unnecessary code and found as soon as I add following lines of code, I see navigation error:

  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)  // This line
  ],

Here is the URL in the manifest file.


  <DefaultSettings>
    <SourceLocation DefaultValue="http://localhost/ab/" />   
  </DefaultSettings>

Solution

This is how I resolved the issue..

As the developer tool was not displaying any details of the error. I opened the node_modules@angular\router\bundles\router.umd.js and search for the error "Unhandled Navigation Error". On exception it was throwing this error without any detail, I added a link of code to write the whole exception in the console. After I ran the application, I saw the details of the err:

After debugging the router code, I found out that "window.history.replaceState()" and "window.history.pushState()" are null. May be word addin is making those null. That I couldn't figure out. As my code is pretty simple and doesn't refer any third party Javascript API ( not even office.js).

I added the following code in the index.html and that resolved the issue:

  <script>
    window.history.replaceState = function(){};
    window.history.pushState = function(){};
  </script>