用angular2-cli打包项目之后，跳转路由刷新会报404的错误

Question

Aangular2项目用anguar2-cli下的ng build命令打包项目之后，运行dist文件夹中的静态index.html文件，第一次路由跳转没有问题，但是在跳转的路由中刷新页面的话，会返回404的错误。

GitHub代码链接：https://github.com/borysn/spr...

在主页面点击register 之后会正常跳转到注册页面，但是在注册页面下刷新的话，会返回404

不知道有没有其他人遇到过这种情况，有的话还烦请告知下解决办法。

Answer 1

在路由中添加{useHash:true}可以解决这个问题

Answer 2

同问，我也在找这个问题

Answer 3

可以借助于 Nginx 做一层路由中转，先跳到首页，再利用路由策略再进行相关渲染

Answer 4

路由是否设置了动态参数，如果设置了的话，是有可能出现这个问题，我也正在解决中

Answer 5

这个原因是，页面刷新后重新发起了http请求。解决方案是后端做一次重定向即可。这个是我的解决方案

Angular2中支持两种路由模式，LocationStrategy 和 HashLocationStrategy。LocationStrategy 采用Html5中的history.pushState
实现。这是一种改变URL地址却发送HTTP请求的技术，非常的赞。可以参考以下文章了解：

<!--more-->

https://www.renfei.org/blog/html5-introduction-3-history-api.html

LocationStrategy 路由形如：http://localhost/home/index

HashLocationStrateg 路由形如：http://localhost/#/home/index

如果采用默认的LocationStrategy，项目打包发布到服务器端以后。当用户访问http://localhost/home/index并刷新页面时，会产生一个HTTP请求，导致当前请求绕过前端路由，访问服务器端资源。如果服务器没有做相应处理。会导致404或者其他错误。

解决方案：

通过配置Apache模块重写(mod_rewrite)重定向到前端路由。

假设，我们所有的前端请求放置在服务器根目录下的public下。我们把public作为前端发布地址。正确的访问姿势是这样：

http://a.com/public。前端的入口是：http://a.com/public/index.html

如果带前端路由（LocationStrategy方式），应该是这样子：
http://a.com/public/home/index，注意，这里的前端路由仅仅是 home/index。如果页面刷新，请求会发送到服务器端，错误一个正常的HTTP请求。此时，可通过模块重写重定向到前端路由。以下是我的 .htaccess文件的写法，仅作为参考。要实现重写，请参考apache2 mod_rewite规则。

RewriteEngine on

# 执行前端路由
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !\.(js|ico|gif|jpg|jpeg|png|css|xml|swf|txt|woff|ttf|eot|svg|otf|map)$
RewriteRule ^(public)(.*)$ public/index.html [L]

# 执行后端路由
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !\.(js|ico|gif|jpg|jpeg|png|css|xml|swf|txt|woff|ttf|eot|svg|otf|map)$
RewriteRule ^(.*)$ index.php/$1 [L]

规则简单解释（其实我对模块重写规则不是特别了解）：

1. RewriteEngine on 开启模块重写。前提是httpd.conf已经配置OK。

2. RewriteCond %{REQUEST_FILENAME} !-f 当请求一个存在的文件时，不做规则重写。

3. RewriteCond %{REQUEST_FILENAME} !-d 当请求一个存在的目录时，不做规则重写。

4. RewriteCond %{REQUEST_URI} !\.(js|ico|gif|jpg|jpeg|png|css|xml|swf|txt|woff|ttf|eot|svg|otf|map)$ 当请求中存在这些文件后缀（通常是资源文件），不做规则重写。

5. RewriteRule ^(public)(.*)$ public/index.html [L] 当满足 public开头的请求时，重定向到public/index.html。规则末尾的[L] 表示这是最后一条独立的规则。主要是避免对后面的规则产生影响，可以理解为一个IF语句的结束。

6. RewriteRule ^(.*)$ index.php/$1 [L] 实现后端（PHP）隐藏index.php这个入口文件。

Answer 6

看了没有想要的答案，因为我们这边要走负载所以问题更严重，最后走了个取巧的方法替换url地址，代码如下！

  changeURL() {
    var text = window.location.href;
    text.toString();
    var url = text.replace(/#/, "index.html#");
    window.history.pushState({}, "0", url);
  }
  ngOnInit() {
    this.changeURL();
  }