office-js - 带有 Angular CLI 8.2 的 Office Word 插件 - 出现未处理的导航错误
问题描述
我正在尝试在使用 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>
解决方案
这就是我解决问题的方法..
由于开发人员工具未显示错误的任何详细信息。我打开了 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>
推荐阅读
- node.js - 是否有 Angular / Angular-CLI 和 Node.js 的兼容性列表?
- python-3.x - 在 Selenium Xpath 中传递变量
- c# - 使用特征矩阵库进行 C++ 代码翻译
- pandas - 如何将 Eviews 数据导入 pandas
- html - 无法在 Django 模板中实现浮动按钮
- java - 我如何在 spring 2.2.4.RELEASE 中从类中检索 jpa-repository 实例
- macos - 使用 stat 在 Epoch ms 中修改的返回日期
- firebase - SwiftUI firebase - 更改用户的 displayName - 如何立即刷新视图
- javascript - 使用 tap 测试 console.log 的输出
- pandas - 基于两列匹配熊猫将数据框的某些列映射到其他列