Excel Angular Web Add-In路由报错：无法匹配路由段'index.html'

算力阿峰

2026-5-22

嘿，这个问题我之前做Office Angular Add-In时也踩过坑！虽然路由功能还能正常跑，但这个报错确实挺闹心的——本质原因是Angular路由在Office宿主环境里，误把index.html当成了URL路径的一部分去匹配，而你的路由配置里又没有对应的规则。下面给你几个实用的解决办法：

方案1：调整`base href`配置

Office加载Add-In时，实际访问的URL会包含index.html，所以我们可以把Angular的基准路径直接指向它：

在index.html里，把原来的<base href="/">改成：
```
<base href="./index.html">
```
如果是用Angular CLI构建生产包，记得加上--base-href参数：
```
ng build --prod --base-href ./index.html
```

方案2：添加`index.html`重定向路由

在你的app-routing.module.ts里，新增一条路由规则，把index.html路径重定向到默认路由：

const routes: Routes = [
  // 你的其他业务路由
  { path: 'index.html', redirectTo: '', pathMatch: 'full' },
  { path: '', component: HomeComponent }, // 你的默认首页组件
  // 404兜底路由放在最后
  { path: '**', component: NotFoundComponent }
];

这样当路由匹配到index.html时，会自动跳转到默认路由，不会再抛出匹配失败的错误。

方案3：切换到Hash路由模式

Office宿主环境对HTML5 History模式的支持有时候会有兼容性问题，换成Hash模式就能彻底避免路径解析的麻烦：
在app.module.ts里修改RouterModule的配置：

import { NgModule } from '@angular/core';
import { RouterModule, Routes, HashLocationStrategy, LocationStrategy } from '@angular/router';

const routes: Routes = [
  // 你的路由配置
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }]
})
export class AppRoutingModule { }

这个方案是最稳妥的，因为所有Office宿主（Excel、Word等）对Hash模式的支持都很稳定。

如果是本地开发用ng serve测试，记得加上对应参数模拟Office环境：