AngularDart 5部署Firebase后页面空白/加载异常求助

我来帮你一步步排查这个问题，大概率是构建产物路径和Firebase托管配置不匹配导致的，咱们先从最核心的点入手：

1. 核心问题：构建输出目录与Firebase公共目录不匹配 #

你执行构建命令时指定了输出到build文件夹：

pub run build_runner build --output build

但你的firebase.json里设置的托管公共目录是web，Firebase根本找不到构建好的静态文件，自然会显示空白或停在Loading状态。

解决方法二选一即可：

方案A：修改Firebase配置，指向构建产物目录 #

把firebase.json里的public字段改成"build"：

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

方案B：调整构建命令，输出到Firebase指定的web目录 #

如果想保留web作为公共目录，修改构建命令将产物输出到该目录（注意备份web下原有文件，避免被覆盖）：

pub run build_runner build --output web

2. 检查构建产物是否完整 #

调整路径后，重新执行构建命令，然后去对应的目录（build或web）查看：

• 有没有生成index.html、main.dart.js、styles.css这些核心文件
• 如果文件缺失，打开构建时的控制台，查看是否有报错（比如依赖安装失败、编译错误），根据错误提示修复后重新构建

3. 用浏览器开发者工具定位资源加载问题 #

本地运行firebase serve时，打开浏览器的开发者工具（按F12），切换到Network标签页，刷新页面：

• 查看所有资源的请求状态，如果出现404错误，说明对应的文件路径不对（比如Firebase在web目录找main.dart.js，但文件实际在build目录）
• 检查index.html里引用的main.dart.js路径是否正确，确保和实际文件位置一致

4. 排查依赖版本兼容性问题 #

你用的是AngularDart 5的alpha版本，这类预览版可能和build工具存在兼容性问题：

• 尝试更新pubspec.yaml里的开发依赖到兼容版本，比如：

  dev_dependencies:
    angular_test: ^2.0.0-alpha+13
    build_runner: ^1.0.0
    build_test: ^0.10.3
    build_web_compilers: ^0.4.1
    test: ^1.3.0
  

• 运行pub upgrade更新依赖，然后重新构建

5. 确认路由重写配置 #

你的firebase.json里已经配置了路由重写，把所有请求指向index.html，这对于Angular单页应用是正确的配置，但前提是index.html本身能被Firebase正确加载，所以先确保前面的路径问题解决后再验证这一点。

按照上面的步骤调整后，重新执行firebase deploy或者firebase serve，应该就能正常显示应用了。

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