Angular5/Firebase部署后子页面无法访问问题求助

嘿，我之前部署Angular+Firebase的时候也踩过一模一样的坑！问题核心在于Angular是单页应用（SPA），你的子页面都是前端路由，并没有对应的物理文件存在于dist目录里。Firebase Hosting默认会在找不到对应文件时返回404，所以得配置路由重写规则，让所有请求都指向index.html，交给Angular的路由系统来处理。

修改你的firebase.json配置 #

你需要在hosting节点里添加rewrites规则，修改后的完整配置如下：

{
  "database": { "rules": "database.rules.json" },
  "firestore": { "rules": "firestore.rules", "indexes": "firestore.indexes.json" },
  "hosting": {
    "public": "dist",
    "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ],
    "rewrites": [ {
      "source": "**",
      "destination": "/index.html"
    } ]
  },
  "storage": { "rules": "storage.rules" },
  "functions": {
    "predeploy": [ "npm --prefix \"$RESOURCE_DIR\" run lint", "npm --prefix \"$RESOURCE_DIR\" run build" ]
  }
}

重新部署生效 #

保存修改后的firebase.json，在终端运行部署命令：

firebase deploy

等部署完成后，所有子页面的路由请求都会被Firebase转发到Angular的index.html，Angular的路由系统就能正确识别并加载对应的页面，不会再出现404错误啦！

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