问题标签 [hash-location-strategy]

我正在尝试让 Angular与通用基础 href 一起工作（在任何路径下部署应用程序 -这里HashLocationStrategy建议了很多解决方案）

我的@NgModule：

连同<base href='.'>我一起，我能够将此应用程序部署到任何路径（我的应用程序是从 CDN 提供的），但是当路径的最后一个元素不以斜杠结尾时，Angular 正在删除它。例如，当输入 url 时，它被 AngularX更改为：Y

我应该在我的配置/基本 href 中更改什么以使第二个示例正常工作（期望的效果：输入时http://example.com/my/app我希望 Angular 不更改 url 中的任何内容或将其更改为http://example.com/my/app#/

（我在这个应用程序中使用 Angular 4.3）

我在运行ionic cordova run 浏览器时无法刷新页面，但在ionic serve 中工作正常

我不想使用HashLocationStrategy因为 url 中的哈希

我正在尝试在新选项卡中打开 Angular 路由，并且在将 {useHash: true} 添加到路由器后遇到问题。在尝试 useHash 之前它工作得很好，打开了选项卡，并把我带到了我想要的组件。现在看来，无论我使用什么 URL 打开新选项卡，路由器都认为我正在尝试访问根目录（“/”）。

为了重现，我有一个非常简单的角度路由器：

这允许查看 2 个简单的组件：

/page1

/第2页

本质上，当您单击位于 some.url.com/#/page1 的按钮时，Angular 应该会打开一个显示 some.url.com/#/page2 的新选项卡。正如我清楚地看到的那样，实际发生的情况是它试图打开 some.url.com/page2。请注意缺少 /#。现在，如果我将 useHash 设置为 false，我可以从 some.url.com/page1 转到 some.url.com/page2，没问题。我已经尝试手动将 /# 添加到我以大约 10 种不同方式打开的 url，但无论我尝试什么，只要启用了 useHash，路由器就会将新选项卡的 url 视为 /（根）。

我在这里想念什么？

老实说，我对 Angular HashLocationStrategy 的内部工作原理并没有很好的了解。文档和广泛的研究没有帮助。我知道由于最终将托管实际应用程序的服务器的配置，我确实需要使用 HashLocationStrategy，所以不幸的是，我不能轻松地将 useHash 设置为 false。我还必须从组件内部执行此操作，因为在我的实际应用程序中打开新选项卡之前我需要执行大量逻辑，因此在 html 中也没有 routerLink。我有一种感觉，我在这里错过了一些简单而基础的东西......

任何帮助将不胜感激。

工作最小的 Stackblitz 复制：https ://stackblitz.com/edit/angular-ivy-yedwyk

单击链接时，我想导航到不同页面/组件的片段。即使尝试了多种方法，我也无法实现这一目标：

关联：

目标 html/模板：

路由器配置：

单击“查看”链接时，系统导航到/main/dash路径/页面/组件，但它不会在第一次滚动到片段。一旦我在主页上，当我点击相同的导航链接（视图 - 位于标题中）时，它会滚动到片段。

即当我已经在同一个页面/组件上时，AnchorScrolling 起作用，但如果源是不同的页面/组件，则不起作用。

我也尝试使用(click)&this.router.navigate()而不是使用 routerLink - 但结果是一样的。

我确实使用HashLocationStrategy.

任何帮助，将不胜感激。

谢谢！

更新：

在深入挖掘之后，页面加载 Angular 之后的片段路由是我面临的确切问题。似乎还没有可用的解决方案？：https ://github.com/angular/angular/issues/30139

我在 Angular 中使用哈希定位策略

路由.module.ts

app.module.ts

我正在使用此 URL 从其他应用程序路由到我的 Angular 应用程序

我想在我的应用程序中获取这些参数的值，我该怎么做？

我尝试使用激活的路由快照和订阅，两者都给我空值。

我正在为我的工作开发一个库，它允许其他开发团队使用我们的一些 Angular 组件并在那里传递自己的配置。其中之一是RouterModule。

我在我们的库中找到了一些代码，我需要确定它们是否useHash: true在模块的配置中启用了他的参数。

我真正需要做的就是看看它是否被设置为 true 或 false 或 null 但我一直在梳理文档并搜索谷歌，我被难住了。

我尝试了一些简单的方法，但这当然行不通。

有谁知道这是可能的吗？

我是角度新手，使用角度 10。

在“app-routing.module.ts”中，我可以看到下面的配置以在 url 中启用“#”

问题： 如果我通过开发服务器（4200 端口）上的 vs 代码运行应用程序，那么它将 URL“http://localhost:8081/auth”重定向到“http://localhost:8081/#/auth”，页面为加载成功。

但是如果我通过 intellij（端口 8080）作为 springboot 应用程序运行应用程序，那么它会重定向到带有 404 的“http://localhost:8081/auth”

谁能帮忙解决这个问题？

我按照https://www.grapecity.com/activereportsjs/docs/GettingStarted/QuickStart-ARJS-Designer-Component/QuickStart-Angular中的说明进行了一些修改以将 ActiveReportsJS 报表设计器集成到 ASP.NET 样板 Angular 应用程序中.

报表设计器集成在我的 ASP.NET Boilerplate Angular Application的src\app\home\home.component.ts和src\app\home\home.component.html中， HashLocationStrategy应用在src\root.module.ts中。

以下是这些文件的屏幕截图。

home.component.html

home.component.ts

根模块.ts

根路由.module.ts

问题是当在src\root.module.ts中应用了HashLocationStrategy并且我尝试进入主页时，页面立即重定向到 about 页面。我观察了URL，发现URL从http://localhost:4200/#/app/home变成了http://localhost:4200/#，最后变成了http://localhost:4200/#/app/关于. 我知道这是由于src\root-routing.module.ts中的路由设置，但为什么会这样呢？主页实际上在那里，但应用程序甚至无法识别路线。

同时，我测试了以下条件：

1. 当我从src\root.module.ts中删除HashLocationStrategy时，我可以进入主页并可以呈现报表设计器。应用程序没有重定向到关于页面。
2. 当我在src\root.module.ts中应用HashLocationStrategy并从src\app\home\home.component.html中删除所有 HTML 代码时，我可以进入主页，它是一个空白页面。应用程序没有重定向到关于页面。

这个问题是不是报表设计器本身造成的？如何使报表设计器在保留HashLocationStrategy的同时在页面中成功呈现？任何帮助，将不胜感激。

我有一个导航栏、一个侧边栏和一堆页面。

用户必须登录才能查看。

着陆页上的图表完美显示（URL 以 '' 结尾）。

任何其他页面上的图表都拒绝出现。我已将整个代码从工作组件复制粘贴到非工作组件。没有不同。仍然没有图表出现。

我最近将 HashLocationStrategy 添加到我的项目中。

前段时间 - 在添加此位置策略之前 - 图表适用于所有页面。我不能肯定地说是这个添加打破了图表。我只怀疑它与此添加有关，但是当我删除它时，图表仍然没有显示。所以也许我错了。

我已经在互联网上搜索了几天。我试过调试我自己的项目。任何地方都没有错误。

所以，事不宜迟，这是我的 app.module.ts：

我的 sidebar.module.ts：

和我的 navbar.module.ts

很高兴提供其他任何东西。老实说，甚至不确定什么是完全相关的......整个项目？

我的项目的GitHub 链接。

我有一个重定向 uri https://somewebsite.com/somepath。由于我的 Angular 应用程序正在使用 hashLocationStrategy，因此我无法将其重定向到我的应用程序。有没有办法可以在重定向之前添加一个哈希（#），以便 url 变为https://somewebsite.com/#/somepath.

重定向 URI 在 Clio 中用于第三方登录。我无法更改 Clio 中的 URI，因为它不允许我使用片段组件。