Question

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

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

Answer 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'}];

Answer 2

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

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

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

2 个答案: