部署在All-Inkl Webhosting的Angular应用刷新后空白页问题求助

• 核心原因：Angular是单页应用(SPA)，刷新浏览器时，浏览器会直接请求当前URL对应的服务器物理资源，但服务器上不存在该文件，返回404状态码导致页面空白。

• 解决方案（适配All-Inkl默认Apache环境）：

  1. 在Angular项目的src目录下创建.htaccess文件，写入以下规则：

  RewriteEngine On
  # 若请求的文件/目录存在，直接访问
  RewriteCond %{REQUEST_FILENAME} -f [OR]
  RewriteCond %{REQUEST_FILENAME} -d
  RewriteRule ^ - [L]
  # 否则重定向到index.html，交由Angular路由处理
  RewriteRule ^ /index.html [L]
  

  2. 修改angular.json配置，确保.htaccess被打包到输出目录：
     在projects -> 你的项目名称 -> architect -> build -> options -> assets数组中添加：

     "src/.htaccess"
     

  3. 重新构建项目（执行ng build --prod或对应环境的构建命令），将构建产物完整上传到All-Inkl服务器的网站根目录。

• 额外检查项：

  • 确认Angular路由使用默认的PathLocationStrategy（无需额外配置，若手动改为HashLocationStrategy虽能避免刷新问题，但URL会带#，不推荐）。
  • 若规则不生效，联系All-Inkl客服确认服务器是否启用了mod_rewrite模块（默认已开启）。

内容的提问来源于stack exchange，提问作者Steffen Kämmerer