Html Angular 2 从 URL 中删除哈希 (#)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41687562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 Remove Hash (#) from the URL
提问by jorgevasquezang
I am trying to remove the # sign from the url in Angular 2 but I couldn't find any good explanation about how to remove it without generate any problem.
我正在尝试从 Angular 2 中的 url 中删除 # 符号，但我找不到关于如何在不产生任何问题的情况下删除它的任何好的解释。
I remember on AngularJS 1 it was easier adding $locationProvider.html5Mode(true);
我记得在 AngularJS 1 上添加更容易 $locationProvider.html5Mode(true);
Also I would appreciate if you can tell me if this is a good practice (removing #) or could affect the SEO for the application (or improve it).
另外，如果您能告诉我这是否是一个好的做法（删除 #）或是否会影响应用程序的 SEO（或改进它），我将不胜感激。
PS: I am using Angular 2 with typescript
PS：我正在使用带有打字稿的 Angular 2
回答by Seid Mehmedovic
As @Volodymyr Bilyachat pointed out, PathLocationStrategyis a default location strategyin Angular2, and if the #is present in the url, it must have been that's overridden somewhere.
正如@Volodymyr Bilyachat 指出的那样，PathLocationStrategy是Angular2中的默认位置策略，如果#url 中存在 ，则它一定在某处被覆盖。
Beside the module providers, check your module imports, it can also be overridden by providing the { useHash: true }as the second argument of the RouterModule.forRoot:
除了模块提供者，检查你的模块导入，它也可以通过提供{ useHash: true }作为 的第二个参数来覆盖RouterModule.forRoot：
imports: [
...
RouterModule.forRoot(routes, { useHash: true }) // remove second argument
]
Also note that when using PathLocationStrategyyou need to configure your web server to serve index.html(app's entry point) for all requested locations.
另请注意，在使用时，PathLocationStrategy您需要配置您的网络服务器index.html为所有请求的位置提供服务（应用程序的入口点）。
回答by Volodymyr Bilyachat
In angular there is location strategy
在角度有位置策略
Look into app.module.ts where app is bootstrapped there you have
查看 app.module.ts，其中应用程序在那里启动
@NgModule({
.......
providers: [
....
{ provide: LocationStrategy, useClass: HashLocationStrategy },
....
]
});
And remove this part since PathLocationStrategy is default strategy
并删除这部分，因为 PathLocationStrategy 是默认策略
回答by prabhatojha
Above answers have the correct explanation about removing the Hash from the URL, but when you change LocationStrategyyour back-end will be affected because the back-end doesn't understand all of your Angular 2Routes. Here are the steps to remove hash with the back-end support.
上面的答案有关于从 URL 中删除哈希的正确解释，但是当您更改LocationStrategy后端时会受到影响，因为后端无法理解您的所有Angular 2路由。以下是使用后端支持删除哈希的步骤。
1) Change Angular to use PathLocationStrategy
1) 改变 Angular 以使用 PathLocationStrategy
@NgModule({
.....
providers: [
// Below line is optional as default LocationStrategy is PathLocationStrategy
{provide: LocationStrategy, useClass: PathLocationStrategy}
]
})
2) Change the base Href in index.html, Angular2 will handle all routes post base Href
2) 更改 index.html 中的 base Href，Angular2 将处理 base Href 后的所有路由
<base href="/app-context/">
For example
例如
<base href="/app/">
3) At the backend server, we must render the index.html file for any request coming with below pattern
3) 在后端服务器，我们必须为任何带有以下模式的请求渲染 index.html 文件
"/app/**" - Render index.html for any request coming with "/app/**" pattern
index.html
索引.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>
