Angular应用部署至GitHub Pages遇404问题排查

我看了你操作的步骤，发现几个可能导致404的关键点，咱们一步步来排查修复：

1. 修正ng build的--base-href参数格式 #

你执行的命令里--base-href= https://username.github.io/有个致命的空格问题——等号后面的空格会让CLI把后面的URL当成独立参数，导致base-href设置失效。正确的写法应该去掉空格，或者用引号包裹路径：

# 写法一：无空格直接指定
ng build --base-href=https://username.github.io/

# 写法二：用引号包裹（更稳妥，避免路径含特殊字符）
ng build --base-href="https://username.github.io/"

# 因为你的个人页是根域名，也可以简化成
ng build --base-href="/"

2. 确保ngh指向正确的分支和构建目录 #

个人GitHub Pages要求部署文件在master分支的根目录，但angular-cli-ghpages默认会推送到gh-pages分支，而且默认找dist/<项目名>目录。结合你修改了outputPath为dist/的情况，需要给ngh加两个参数：

# 指定构建产物目录为dist，同时推送到master分支
ngh --dir=dist --branch=master

3. 验证仓库内容是否正确 #

执行完上面的命令后，去你的GitHub仓库看master分支：

• 根目录下应该直接有index.html、main.js、styles.css这些构建后的文件，而不是只有Angular的源码（比如src/、angular.json这些）
• 如果发现还是源码，说明ngh没正确推送构建产物，你可以手动把dist/里的所有文件复制到仓库根目录，然后提交推送：

  # 复制dist文件到根目录（注意覆盖时确认不需要的文件）
  cp -r dist/* .
  # 提交更改
  git add .
  git commit -m "Deploy Angular app to GitHub Pages"
  git push origin master
  

4. 等待GitHub Pages缓存刷新 #

有时候GitHub Pages部署后不会立刻生效，可能需要等5-10分钟，尤其是第一次部署的时候。如果还是404，可以尝试强制刷新浏览器（Ctrl+F5），或者清除浏览器缓存再访问。

额外检查点 #

• 确认你的angular.json里的outputPath确实是"dist/"，没有拼写错误
• 检查index.html里的资源路径是否正确（比如<script src="runtime.js">这类路径是否是相对根目录的）

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