Angular应用部署Hostinger后子路由404问题求助

是的，缺少.htaccess文件就是导致子路由404的核心原因。

原因解释 #

Angular是单页应用（SPA），本地环境下所有路由由Angular框架自身处理。但部署到Hostinger的Apache服务器后，直接访问http://www.example.com/careers这类子路由时，服务器会尝试在文件系统中寻找名为careers的物理文件或目录，找不到就返回404错误。我们需要配置服务器将所有路由请求转发到index.html，让Angular来处理路由逻辑。

添加.htaccess文件的步骤 #

方法一：从项目打包时包含该文件

1. 在Angular项目的src目录下创建.htaccess文件
2. 将以下配置内容写入文件：

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

3. 打开项目根目录的angular.json文件，找到projects -> 你的项目名 -> architect -> build -> options -> assets数组，添加.htaccess路径：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/.htaccess" // 新增这一行
]

4. 重新构建生产环境包：执行命令 ng build --configuration production
5. 将构建生成的dist目录下所有文件上传到Hostinger服务器的public_html目录

方法二：直接在Hostinger服务器创建文件

如果已经上传了项目文件，可直接通过Hostinger后台操作：

1. 登录Hostinger后台，进入「文件管理器」，打开public_html目录
2. 点击「新建文件」，文件名输入.htaccess
3. 编辑该文件，粘贴上述的Apache配置内容，保存即可

验证 #

完成配置后，刷新浏览器访问子路由http://www.example.com/careers，即可正常跳转。

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