Angular站点访问任意内链后刷新页面丢失报错问题咨询

问题根因 #

Angular属于单页应用，所有页面跳转默认在客户端通过前端路由完成，应用实际只有index.html一个入口文件。当在非根路径的子页面执行刷新操作时，浏览器会直接向服务端请求当前子路径对应的物理资源，服务端未配置路由重定向规则时，找不到对应文件就会返回404错误。

修复方案 #

根据实际部署环境选择对应配置即可：

• Nginx部署场景
  找到站点对应的Nginx配置文件，在location /规则块中添加try_files配置，将所有找不到的资源请求统一重定向到index.html：

  location / {
    root /your/angular/project/dist/path;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
  

  配置完成后执行nginx -s reload重载Nginx配置即可生效。
• Apache部署场景
  在Angular打包生成的dist发布目录根路径下，新建.htaccess配置文件，写入以下重写规则：

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
  

• 无服务端配置权限的临时方案
  如果暂时无法修改服务端配置，可以临时将Angular路由切换为Hash模式，这种模式下路由会自动携带#标识，浏览器不会将#后的路径作为资源路径请求服务端，修改app-routing.module.ts中的路由导入配置即可：

  @NgModule({
    imports: [RouterModule.forRoot(routes, { useHash: true })],
    exports: [RouterModule]
  })
  

  *注意：Hash路由模式会对站点SEO效果产生负面影响，优先推荐使用服务端重定向方案。
• 静态托管平台部署场景
  如果是部署在Netlify、Vercel、GitHub Pages这类静态托管平台，需要按照平台规则配置重定向：
  • Netlify：在发布目录新建_redirects文件，写入/* /index.html 200
  • Vercel：在项目根目录新建vercel.json，配置对应路由重写规则指向index.html
  • GitHub Pages：在发布目录新建404.html，内容和index.html保持一致做兼容处理

内容的提问来源于stack exchange，提问作者Avinash Kumar