如何在 Hostinger 上部署你的 Angular 项目
内容提要
本文介绍了将代码上传到Hostinger的指南，包括添加'useHash: true'到app-routing.module.ts文件，使用命令'ng build --configuration production'生成部署文件，通过文件管理器或压缩文件夹的方式上传代码，并测试网站是否正常运行。
延伸解读
为何需要启用 useHash
在 app-routing.module.ts 中添加 useHash: true 是为了让 Angular 使用哈希路由策略。当部署到 Hostinger 这类静态托管环境时，服务器通常不会自动将未知路径重写到 index.html，导致直接访问子路由或刷新页面时出现 404 错误。启用哈希后，URL 中会带有 #，浏览器只向服务器请求根路径，路由切换由前端处理，从而避免此类问题。
生产构建命令的作用
运行 ng build --configuration production 会触发 Angular 的生产模式构建。该命令会启用优化选项，如 AOT 编译、Tree-shaking 和代码压缩，生成体积更小、性能更好的静态文件。构建结果默认输出到 dist 文件夹下的项目同名子目录中，这些文件才是需要上传到服务器的最终产物，而非项目源码。
两种上传方式的选择
上传到 Hostinger 的 public_html 文件夹有两种方式：直接拖拽文件或先压缩再上传。如果 public_html 中已有文件，直接拖拽前需要先删除旧文件，否则可能造成冲突。压缩上传适合文件数量多或网络不稳定的情况，可以减少传输中断的风险。无论哪种方式，都要确保上传的是 dist 子文件夹内的内容，而不是整个项目文件夹。
部署后的验证步骤
上传完成后，应通过浏览器访问网站进行测试，确认页面能正常加载、路由跳转无误。如果遇到空白页或资源加载失败，常见原因包括文件路径错误、未使用哈希路由导致刷新 404，或上传了错误的文件夹层级。根据文章，完成测试后即可认为部署成功。
Q&A
如何在 Hostinger 上上传 Angular 项目代码？
首先，在 app-routing.module.ts 文件中添加 'useHash: true'，然后使用命令 'ng build --configuration production' 生成部署文件，最后通过文件管理器将代码上传到 public_html 文件夹。
生成 Angular 项目的部署文件需要使用什么命令？
在 node.js 终端中使用命令 'ng build --configuration production' 来生成部署文件。
在 Hostinger 上传代码时，有哪些上传方法？
可以通过文件管理器直接拖拽文件到 public_html 文件夹，或者将文件夹压缩后上传。
如何确保我的网站在 Hostinger 上正常运行？
上传代码后，测试网站以确保其正常运行。
在部署 Angular 项目时，为什么要添加 'useHash: true'？
'useHash: true' 用于配置 Angular 路由，以确保在使用哈希路由时能够正确处理 URL。
在 dist 文件夹中可以找到什么？
在 dist 文件夹中会看到一个与项目同名的子文件夹，里面包含生成的部署文件。
