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來配合使用。