带有 Angular CLI 8.2 的 Office Word 插件 - 出现未处理的导航错误

问题描述

我正在尝试在使用 Angular CLI 8.2 构建的 Office Word 插件中运行一个简单的应用程序。此应用程序有一个带有链接的主页。该链接应该路由到另一个组件。路由适用于 Edge 和 IE 11，但不适用于 Word 插件。在单词中加载应用程序。我看到了主页，但我在开发人员工具中看到了这个错误，但没有详细信息。当我点击链接时，它什么也没做。我认为由于以下错误，角度路由不起作用。

操作系统：Windows 10， Microsoft Word：2016 (16.0.5110)

这是我的 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

我已将目标从“es2015”更新为“es5”以使其在 IE 中工作。否则它会显示一个空白页面。


{
  "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

为了安全起见，我添加了带斜线和不带斜线的路线。两个链接都不起作用。它根本没有做任何事情。

<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 { }

我已经尝试了所有可以在网上找到的方法，但无法解决问题。

更新

我删除了所有不必要的代码，发现添加以下代码行后，我看到导航错误：

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

这是清单文件中的 URL。


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

解决方法

这就是我解决问题的方法..

由于开发人员工具未显示任何错误详细信息。我打开 node_modules@angular\router\bundles\router.umd.js 并搜索错误“未处理的导航错误”。在异常情况下，它在没有任何细节的情况下抛出此错误，我添加了一个代码链接以在控制台中编写整个异常。我跑完应用后，看到了err的详细信息：

调试路由器代码后，我发现“window.history.replaceState()”和“window.history.pushState()”为空。可能是 word addin 使那些为空。这是我想不通的。因为我的代码非常简单并且没有引用任何第三方 Javascript API（甚至没有 office.js）。

我在 index.html 中添加了以下代码并解决了问题：

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

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