Angular部署至Firebase后源码未上传问题求助

嘿，我太懂这种刚上手部署就踩坑的感觉了！你说的情况我帮好几个朋友排查过，大概率是部署的目录没选对或者没先编译Angular项目，咱们一步步来搞定：

1. 先确认你有没有编译Angular项目 #

Angular不能直接部署源码，必须先把代码编译成浏览器能识别的静态文件。赶紧去项目根目录执行这个命令：

ng build --prod

（要是你用的Angular 12及以上版本，直接跑ng build就行，默认就是生产环境编译）
跑完之后项目根目录会多出一个dist/你的项目名文件夹，这里面才是要部署的内容。

2. 检查Firebase的配置文件 #

打开项目里的firebase.json，看看hosting部分的public字段是不是指向了刚才生成的dist目录。正确的配置应该是这样的：

{
  "hosting": {
    "public": "dist/your-angular-project",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

如果public写的是.或者public，那你部署的就是源码文件，浏览器当然加载不出来正确内容。

3. 要是配置错了，重新初始化Firebase就行 #

如果刚才的配置不对，直接重新跑firebase init，注意这几个关键步骤别选错：

• 选Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
• 问到What do you want to use as your public directory?的时候，输入dist/你的项目名称（比如dist/my-first-angular-app）
• 问到Configure as a single-page app (rewrite all urls to /index.html)?，一定要选Yes（Angular是单页应用，不选这个刷新页面会404）
• 问到Set up automatic builds and deploys with GitHub?，根据自己需求选No或者Yes就行

4. 重新部署+强制清缓存 #

配置好之后重新执行：

firebase deploy

等部署完成，打开链接的时候按Ctrl + Shift + R（Windows/Linux）或者Cmd + Shift + R（Mac）强制刷新浏览器，别让缓存坑了你。

额外小技巧：去Firebase控制台查部署记录 #

登录Firebase控制台，找到你的项目，进入Hosting模块，看看部署记录里的文件列表。如果列表里全是src/、angular.json这些源码文件，那肯定是部署目录选错了；要是能看到index.html、main.xxx.js这些编译后的文件，那就没问题了。

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