部署Angular 5应用至gh-pages时出现bundle.js加载失败问题求助

我之前也碰到过几乎一模一样的情况，大概率是基础路径配置错误或者部署命令没带对参数，和MDBootstrap的关联不大，你可以从这几个方向排查：

1. 构建时必须指定正确的base-href #

GitHub Pages的项目访问路径是https://你的用户名.github.io/仓库名/，如果构建时没指定基础路径，Angular会默认从根目录加载资源，自然找不到bundle.js这类文件。

针对Angular 5，构建命令要加上这个参数：

ng build --prod --base-href "/你的仓库名/"

注意路径前后的斜杠不能省略，比如你的仓库叫my-angular-app，就写成"/my-angular-app/"。

2. 用正确的命令组合完成部署 #

推荐直接把构建和部署命令合并，避免手动操作dist文件夹出错：

ng build --prod --base-href "/你的仓库名/" && ngh

这里的ngh是angular-cli-ghpages的简写命令，它会自动把dist目录里的文件推送到gh-pages分支。

3. 排查MDBootstrap的资源引用（可选） #

如果前两步做完还是有问题，再检查MDBootstrap的资源路径：

• 确认.angular-cli.json（Angular 5的配置文件）里配置的MDB资源是相对路径，比如./assets/mdb/css/mdb.min.css，而不是绝对路径/assets/mdb/css/mdb.min.css
• 检查index.html里有没有硬编码的绝对路径引用MDB的文件，改成相对路径即可。

4. 验证gh-pages分支的内容 #

最后去GitHub仓库的gh-pages分支看看，确认dist里的bundle.js、vendor.js等文件都正确上传了，且路径和index.html里的引用完全一致。

如果还是不行，可以试试清除本地缓存后重新构建：

rm -rf dist
git rm -r --cached dist
ng build --prod --base-href "/你的仓库名/" && ngh

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