Angular默认路由策略-PathLocationStrategy策略页面刷新报404错误解决方案

解决方案有两种：

1 从程序去解决：修改Angular路由策略，改为使用hash路由 （HashLocationStrategy ），即带#号URL

2 从服务器去解决：修改Nginx站点conf配置

解决方案1： 

Angular路由策略有两种方案：

1  PathLocationStrategy - 默认的策略，支持“HTML 5 pushState”风格。

2  HashLocationStrategy - 支持“hash URL”风格。

修改app.module.ts如下

解决方案 2：

使用Nginx属性 try_files 做内部重定向

示例：

location /myapp {
      root   html;
      try_files $uri $uri/ /myapp/index.html =404;
}

server {
    listen 80;
    server_name xxx.xxx.xxx;
    location / {
        root   /;
        index  index.html index.htm;
        try_files $uri /x/x/x/index.html;
    }

}

Nginx try_files 指令

按顺序检查文件是否存在，返回第一个找到的文件。结尾的斜线表示为文件夹 -$uri/。如果所有的文件都找不到，会进行一个内部重定向到最后一个参数。

务必确认只有最后一个参数可以引起一个内部重定向，之前的参数只设置内部URI的指向。 最后一个参数是回退URI且必须存在，否则将会出现内部500错误。

命名的location也可以使用在最后一个参数中。与rewrite指令不同，如果回退URI不是命名的location那么$args不会自动保留，如果你想保留$args，必须明确声明。

语法: try_files file ... uri 或 try_files file ... = code

场景：适用于当本地没有明确URL文件时，前端可能走的是路由，这里我们就可以指向前端项目的index来配合使用。