为 Angular 2 配置 history.pushState
Posted
技术标签:
【中文标题】为 Angular 2 配置 history.pushState【英文标题】：Configure history.pushState for Angular 2 【发布时间】：2017-03-01 17:27:51 【问题描述】：我的 Angular 2 应用程序使用默认的 html 5 history.pushState location strategy。如何使用 history.pushState 配置服务器，以便浏览器刷新和浏览器 URL 不会生成 404s？
例如，Tour of Heroes 应用程序有几个不同的应用程序路由，例如：
http://localhost:8080/dashboard
http://localhost:8080/heroes
http://localhost:8080/detail/13
如果您在其中一个路由上点击刷新，或键入其中一个 URL，您将获得 404，因为 /detail/13 是应用程序路由，而不是服务器资源。我在index.html 的head 顶部配置了定位策略：
<!doctype html>
<html>
<head>
<base href="/">
<meta charset="utf-8">
<title>Tour of Heroes</title>
但是应该如何配置服务器以便将所有 URL 发送到我的应用程序而不是生成 404？
注意： 这个问题是对Angular 2 : 404 error occur when i refresh through Browser 和Angular 2.0 router not working on reloading the browser 询问如何 来解决这个问题的问题的补充。对于 Firebase，有这个：When I refresh my website I get a 404. This is with Angular2 and firebase，对于 Apache，有这个：htaccess redirect for Angular routes。
【问题讨论】：
【参考方案1】：使用最新的 angular-cli 版本创建您的项目，他们在 beta.10 和 beta.14 之间更改了构建系统，从 SystemJS 到 Webpack。
在app.module.ts 中使用 LocationStrategy 和 HashLocationStrategy 类，如下面的代码示例所示。当您将应用程序部署到任何 http 服务器（如（nginx））时，它将解决您在任何特定路由上的刷新问题。
将这些类添加到提供程序部分后，运行ng serve，您的应用程序根目录将在浏览器中看起来像http://localhost:4200/#/。
import NgModule from '@angular/core';
import HttpModule from '@angular/http';
import LocationStrategy, HashLocationStrategy from '@angular/common';
import RouterModule from '@angular/router';
import AppComponent from './app.component';
@NgModule(
declarations: [
AppComponent,
...
],
imports: [
HttpModule,
RouterModule,
...
],
providers: [
...,
provide: LocationStrategy, useClass: HashLocationStrategy
],
bootstrap: [AppComponent]
)
export class AppModule
当你刷新时，它会在适当的地方重新加载。
另请查看Angular 2.0 router not working on reloading the browser 了解更多信息。
希望有帮助！
【讨论】：
感谢@satendra 指出这个问题。我正在使用默认的PathLocationStrategy，我将在我的问题中澄清。【参考方案2】：
nginx
使用nginx：
/etc/nginx/ngin.conf
location /
root /home/jan/tour-of-heroes/;
index index.html index.htm;
error_page 404 =200 /index.html;
history.pushState
生产 HTTP 服务器
推送状态服务器
使用pushstate-server：
pushstate-server /home/jan/tour-of-heroes
history.pushState
生产 HTTP 服务器
表达
使用express：
node express.js
express.js:
var express = require('express'),
path = require('path'),
port = process.env.PORT || 8083,
app = express();
app.use(express.static(__dirname ));
app.get('*', function(request, response)
response.sendFile(path.join(__dirname + '/index.html'));
);
app.listen(port);
history.pushState
生产 HTTP 服务器
http-服务器
使用http-server：
node http-server/bin/http-server /home/jan/tour-of-heroes
history.pushState
生产 HTTP 服务器
实时服务器
使用live-server：
live-server --entry-file=index.html /home/jan/tour-of-heroes
history.pushState
开发 HTTP 服务器
服务
使用ng serve：
ng serve -prod
或ahead-of-time compilation:
ng serve -prod -aot
history.pushState
生产应用程序构建
开发 HTTP 服务器
【讨论】：
以上是关于为 Angular 2 配置 history.pushState的主要内容，如果未能解决你的问题，请参考以下文章
为 Angular 2 配置 history.pushState
将 OAuth2 访问令牌配置为 typescript-angular2 客户端