路由到子目录中的应用程序时，Angular2 中的 URL 会增长答案

【问题标题】：URL grows in Angular2 when routing to app in a sub-directory路由到子目录中的应用程序时，Angular2 中的 URL 会增长
【发布时间】：2017-09-06 12:32:06
【问题描述】：

我的 Angular2 应用程序部署在 IIS 网站的子目录中。我使用以下命令来构建它。（--bh 将子目录设置为应用的根目录）：

ng build --bh testdna --no-aot --dev

然后我在应用程序中使用路由如下

app.routes.ts：

import { Routes } from '@angular/router';
import { DnaPlotComponent } from './dna-plot/dna-plot.component';

export const routes: Routes = [{ path: '', component: DnaPlotComponent }];

app.module.ts:

import { RouterModule } from '@angular/router';
import { routes } from './app.routes';
...
RouterModule.forRoot(routes)

每次页面刷新时，URL 都会附加子目录。这意味着 URL 无限增长并且无法刷新，从而导致 404。这是我所看到的示例。

https://develop.domain.com/dnaplot/dnaplot#/dnaplot/

原来调用的网址是：

https://develop.domain.com/dnaplot

任何阻止这种情况发生的想法将不胜感激。

【问题讨论】：

标签： angular routing http-status-code-404

【解决方案1】：

您需要设置<base href="..."> 或提供指向部署路径的APP_BASE_HREF。

更多详情见Angular 2 router no base href set

提供APP_BASE_HREF 通常是更好的方法，因为它只会影响路由器，而<base href="..."> 会影响其他内容，例如 SVG 引用。

具有空路径 '' 且没有子路由的路由应该有 pathMatch: 'full'

export const routes: Routes = [{ path: '', component: DnaPlotComponent , pathMatch: 'full'}];

【讨论】：

【解决方案2】：

最后的解决方案就是将base href 设置为一个空字符串，即。 <base href="">.

路由器似乎“知道”原始构建命令中的--bh testdna，因此无需在 href 标记中重新声明子目录。

【讨论】：