Angular 删除了某些路由的 base-href答案

【问题标题】：Angular removes the base-href for some routesAngular 删除了某些路由的 base-href
【发布时间】：2021-07-22 21:42:51
【问题描述】：

我有一个问题，我们的 Angular 应用程序在导航到某个组件时会删除/忽略 base-href。我们使用以下命令构建我们的应用程序：

ng b --prod --base-href /some-base/

部署到我们的开发和测试环境后，一切都按预期工作。使用 Angular 路由器，我被导航到了正确的位置。

this._router.navigate(['/register']) -> https://test.myawesomeapp.com/some-base/register this._router.navigate(['/other']) -> https://test.myawesomeapp.com/some-base/other

但是，有一个组件在导航后地址栏中的 base-href 消失了。它设法导航到正确的组件并且页面正常工作。但是地址栏中的 URL 现在已损坏，因为它不包含 base-href。 this._router.navigate(['/broken']) 之后的 URL 是 https://test.myawesomeapp.com/broken（/some-base/ 去哪儿了？）

由于 URL 损坏，此页面上的任何刷新现在都会出现 404。我不确定这是 Angular 路由问题还是问题出在其他地方。

这是一个带有 Angular SPA 的 .NET Core 3.1 应用。我们的开发和测试环境托管在 IIS 上。

任何有关如何解决此问题的提示将不胜感激。

【问题讨论】：

你能看到生成的 index.html 中的 base-href 是什么吗？当您构建应用程序时，您的参数应将其设置为您编写的内容。检查那个。另外，您是否重现了 100% 的问题？当您手动（在浏览器中自己编写 url）到 https://test.myawesomeapp.com/some-base/broken 时会发生什么？如果您通过单击链接复制它，您可以显示此链接的代码吗？你可能同时有一个 href 和一个 router.navigate...
我检查了生成的index.html，结果符合预期。我认为您正在使用 href 和 router.navigate。下面是运行的代码（修改为通用名称）：gist.github.com/ironmaiden1212/8429139cf107df7832f4ecf840212a14
您是否尝试过使用button 更改a 标签？所以你不会有任何 href ？
是的，尝试了一个按钮，我得到了相同的行为。有趣的是，在浏览器中单击返回或window.history.back() I，URL 会更改为正确的 URL。从test.myawesomeapp.com/broken 到test.myawesomeapp.com/some-base/broken

标签： angular .net-core

【解决方案1】：

我发现了我的问题。在/broken-page 的子组件的ngOnInit() 中，有一个调用修改了 URL：

window.history.pushState({}, 'Placeholder', this._router.url);

// `Placeholder` was not the original text, just replaced for demo purposes

我使用了在this Stack Overflow post 中找到的调试技巧来确定历史状态是否有任何变化。

【讨论】：