Angular 2 从 URL 中删除哈希 (#)
Posted
技术标签:
【中文标题】Angular 2 从 URL 中删除哈希 (#)【英文标题】：Angular 2 Remove Hash (#) from the URL 【发布时间】：2017-05-31 22:49:34 【问题描述】：我正在尝试从 Angular 2 中的 url 中删除 # 符号，但我找不到任何关于如何在不产生任何问题的情况下删除它的好的解释。
我记得在 AngularJS 1 上添加 $locationProvider.html5Mode(true); 更容易
如果您能告诉我这是一种好的做法（删除 #）还是会影响应用程序的 SEO（或改进它），我将不胜感激。
PS：我正在使用带有打字稿的 Angular 2
【问题讨论】：
【参考方案1】：正如@Volodymyr Bilyachat 指出的那样，PathLocationStrategy 是 Angular2 中的默认 location strategy，如果 url 中存在 #，那么它一定是在某个地方被覆盖了。
除了模块提供程序，检查您的模块导入，也可以通过提供 useHash: true 作为RouterModule.forRoot 的第二个参数来覆盖它：
imports: [
...
RouterModule.forRoot(routes, useHash: true ) // remove second argument
]
另请注意，在使用 PathLocationStrategy 时，您需要将 Web 服务器配置为为所有请求的位置提供 index.html（应用程序的入口点）。
以下是一些流行的 Web 服务器的配置示例：https://angular.io/guide/deployment#fallback-configuration-examples
【讨论】：
伙计们，在 ng build --prod 这个解决方案不起作用，给出 404 错误..任何线索？ 这解决了#删除的问题，但是当我们刷新页面或h5时这不起作用。 @HydTechie，JinnaBalu，当使用 PathLocationStrategy（HTML5 路由）时，您需要将您的网络服务器配置为为所有请求的 url 提供 index.html 文件（应用程序的入口点）。 您好 Seid，您能否告诉我在使用 PathLocationStrategy 时配置 Web 服务器的内容和方法。 @SuchetaShrivastava Angular 文档为 PathLocationStrategy 实现的 Web 服务器配置添加了一段示例：angular.io/guide/deployment#fallback-configuration-examples【参考方案2】：在角度有location strategy
查看 app.module.ts 在哪里启动了应用程序
@NgModule(
.......
providers: [
....
provide: LocationStrategy, useClass: HashLocationStrategy ,
....
]
);
并删除这部分，因为 PathLocationStrategy 是default strategy
【讨论】：
它适用于 ng serve，但不适用于 ng build --prod，有什么线索吗？谢谢！ 错误是 404，没有 # 的链接在 IIS 中显示为 404。我知道在 iis 中设置重定向需要一些设置，但如果可能的话，我一直在寻找。欣赏！ @HydTechie 不，不是。寻找 SPApageFallback 包 @VolodymyrBilyachat，如果我使用HashLocationStrategy ，navigate 在开发和生产中都不起作用任何想法？
@VolodymyrBilyachat 这个 tric 不适用于生产...但在本地工作【参考方案3】：
以上答案有关于从 URL 中删除哈希的正确解释，但是当您更改 LocationStrategy 时，您的后端将受到影响，因为后端不了解您的所有 Angular 2 路由。以下是使用后端支持删除哈希的步骤。
1) 更改 Angular 以使用 PathLocationStrategy
@NgModule(
.....
providers: [
// Below line is optional as default LocationStrategy is PathLocationStrategy
provide: LocationStrategy, useClass: PathLocationStrategy
]
)
2) 更改 index.html 中的 base Href，Angular2 将处理所有路由 post base Href
<base href="/app-context/">
例如
<base href="/app/">
3) 在后端服务器，我们必须为带有以下模式的任何请求渲染 index.html 文件
"/app/**" - Render index.html for any request coming with "/app/**" pattern
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My App</title>
<base href="/app/">
</head>
<body>
<app-root>Loading...</app-root>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>
【讨论】：
你能简单解释一下“/app-context/”吗？以上是关于Angular 2 从 URL 中删除哈希 (#)的主要内容，如果未能解决你的问题，请参考以下文章
如何从 ui-router 中的 url 地址中删除哈希标签 (#)
如何在不刷新页面的情况下使用 JavaScript 从 window.location (URL) 中删除哈希？
在 Laravel Homestead 中使用 Vue.js 时从 URL 中删除 # 哈希