0

我正在尝试在使用 Angular CLI 8.2 构建的 Office word 插件中运行一个简单的应用程序。此应用程序有一个带有链接的主页。该链接应该路由到另一个组件。路由在 Edge 和 IE 11 中有效，但在 word 插件中无效。在 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>

索引.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.

应用程序路由.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>
4

1 回答 1

1

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

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

在此处输入图像描述

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

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

  <script>
    window.history.replaceState = function(){};
    window.history.pushState = function(){};
  </script>
于 2021-03-23T19:48:21.113 回答