Angular 6.0项目Firebase Hosting部署失败，求正确配置方案

我之前也踩过这个坑！你按步骤操作后还是显示Firebase的默认页面，核心原因是Angular 6的构建输出路径和你设置的Firebase公共目录不匹配，咱们一步步来解决：

先搞清楚问题根源 #

Angular 6执行ng build --prod时，默认会把编译后的静态文件输出到dist/[你的项目名称]目录下，而你在firebase init时把公共目录设为了dist——Firebase在dist根目录找不到index.html，就自动显示默认页面了。

两种解决方法任选其一 #

方法1：修改Firebase的公共目录（推荐，不改动Angular配置） #

1. 直接编辑项目根目录的firebase.json文件，把hosting下的public字段改成你的实际输出路径，比如你的项目名叫my-angular-app，就改成：

"hosting": {
  "public": "dist/my-angular-app",
  // 其他配置保持不变
}

或者重新运行firebase init hosting，在“公共目录”步骤输入dist/你的项目名，覆盖配置时选“是”也可以。
2. 重新执行ng build --prod确保产物正确生成
3. 运行firebase deploy，这次应该就能看到你的Angular页面了！

方法2：修改Angular的输出路径到dist根目录 #

如果你希望编译产物直接放在dist下，可以调整Angular的配置：

1. 打开项目根目录的angular.json，找到projects -> [你的项目名] -> architect -> build -> options -> outputPath，把原来的dist/你的项目名改成dist
2. 执行ng build --prod，现在静态文件会直接生成在dist文件夹里
3. 重新部署firebase deploy即可

额外验证小技巧 #

部署前可以先用firebase serve启动本地预览服务器，访问http://localhost:5000看看页面是否正常——如果本地能正常显示，说明配置没问题，再部署到线上就不会踩坑啦！

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