angular - 为Angular 2配置history.pushState

我的Angular 2应用程序使用默认的HTML 5 history.pushState location strategy。如何使用history.pushState配置服务器，以便浏览器刷新且浏览器URL不生成404？

例如，Tour of Heroes应用程序具有一些不同的应用程序路由，例如:

http://localhost:8080/dashboard
http://localhost:8080/heroes
http://localhost:8080/detail/13

如果您在这些路由之一上单击“刷新”，或者键入URL之一，则将获得404，因为/detail/13是应用程序路由，而不是服务器资源。我已经在head的index.html顶部配置了定位策略:

<!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。

最佳答案

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服务

要使用ng serve:

ng serve -prod

或ahead-of-time compilation:

ng serve -prod -aot

支持history.pushState

生产应用程序构建

开发HTTP服务器

关于angular - 为Angular 2配置history.pushState，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40142130/

PushState

angular - 为Angular 2配置history.pushState