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

Question

我正在尝试运行我使用 Angular CLI 8.2 构建的 Office word 加载项中的一个简单应用程序。此应用程序的主页带有 link。 link 应该路由到另一个组件。路由在 Edge 和 IE 11 中有效，但在 word 插件中无效。在 word 中加载应用程序。我看到了主页，但我在 Developers 工具中看到了这个没有详细信息的错误。当我点击 link 时，它什么也没做。我认为由于以下错误 angular 路由无法正常工作。

OS: 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

为了安全起见，我添加了带斜线和不带斜线的路线。两个 link 都不工作。它什么也没做。

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

Answer 1

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

因为开发者工具没有显示错误的任何细节。我打开 node_modules@angular\router\bundles\router.umd.js 并搜索错误“未处理的导航错误”。在异常情况下，它没有任何细节地抛出此错误，我添加了 link 代码以在控制台中写入整个异常。在我运行应用程序之后，我看到了错误的详细信息：

调试路由器代码后，发现“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 8.2 的 Office Word 插件 - 出现未处理的导航错误

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

office-js

office-addins

word-addins

angular-cli-v8