Angular集成Firebase App Check本地正常，部署Firebase Hosting失败原因

问题场景 #

在Angular项目的app.module.ts的imports中通过以下代码初始化Firebase App Check：

provideAppCheck(() => initializeAppCheck(getApp(), {
  provider: new ReCaptchaV3Provider('xxxxxxxx'),      
  isTokenAutoRefreshEnabled: true 
})),

本地运行完全正常，但执行部署命令：

firebase deploy --only hosting

时出现预渲染失败的错误：

Prerendering 6 route(s) to C:\dev\ai-diagnose-assistant\hosting\dist\ai-diagnose-assistant\browser...Unhandled Promise rejection: Cannot read properties of undefined (reading 'appendChild') ; Zone: ; Task: Promise.then
; Value: TypeError: Cannot read properties of undefined (reading 'appendChild')
at makeDiv (C:\dev\ai-diagnose-assistant\hosting\dist\ai-diagnose-assistant\server\main.js:1:4054192)
at initializeV3 (C:\dev\ai-diagnose-assistant\hosting\dist\ai-diagnose-assistant\server\main.js:1:4054224)
at ReCaptchaV3Provider.initialize (C:\dev\ai-diagnose-assistant\hosting\dist\ai-diagnose-assistant\server\main.js:1:4057853)
at index_esm2017_activate (C:\dev\ai-diagnose-assistant\hosting\dist\ai-diagnose-assistant\server\main.js:1:4060053)
at initializeAppCheck (C:\dev\ai-diagnose-assistant\hosting\dist\ai-diagnose-assistant\server\main.js:1:4060070)
at C:\dev\ai-diagnose-assistant\hosting\dist\ai-diagnose-assistant\server\main.js:1:4036965
at C:\dev\ai-diagnose-assistant\hosting\dist\ai-diagnose-assistant\server\main.js:1:4036951
at _ZoneDelegate.invoke (C:\dev\ai-diagnose-assistant\hosting\node_modules\zone.js\bundles\zone.umd.js:412:30)
at Zone.run (C:\dev\ai-diagnose-assistant\hosting\node_modules\zone.js\bundles\zone.umd.js:166:47)
at NgZone2.runOutsideAngular (C:\dev\ai-diagnose-assistant\hosting\dist\ai-diagnose-assistant\server\main.js:1:2105206) TypeError: Cannot read properties of undefined (reading 'appendChild')
at makeDiv (C:\dev\ai-diagnose-assistant\hosting\dist\ai-diagnose-assistant\server\main.js:1:4054192)
at initializeV3 (C:\dev\ai-diagnose-assistant\hosting\dist\ai-diagnose-assistant\server\main.js:1:4054224)
at ReCaptchaV3Provider.initialize (C:\dev\ai-diagnose-assistant\hosting\dist\ai-diagnose-assistant\server\main.js:1:4057853)
at index_esm2017_activate (C:\dev\ai-diagnose-assistant\hosting\dist\ai-diagnose-assistant\server\main.js:1:4060053)
at initializeAppCheck (C:\dev\ai-diagnose-assistant\hosting\dist\ai-diagnose-assistant\server\main.js:1:4060070)
at C:\dev\ai-diagnose-assistant\hosting\dist\ai-diagnose-assistant\server\main.js:1:4036965
at C:\dev\ai-diagnose-assistant\hosting\dist\ai-diagnose-assistant\server\main.js:1:4036951
at _ZoneDelegate.invoke (C:\dev\ai-diagnose-assistant\hosting\node_modules\zone.js\bundles\zone.umd.js:412:30)
at Zone.run (C:\dev\ai-diagnose-assistant\hosting\node_modules\zone.js\bundles\zone.umd.js:166:47)
at NgZone2.runOutsideAngular (C:\dev\ai-diagnose-assistant\hosting\dist\ai-diagnose-assistant\server\main.js:1:2105206)
✖ Prerendering routes to C:\dev\ai-diagnose-assistant\hosting\dist\ai-diagnose-assistant\browser failed.

错误原因 #

核心原因是服务器端预渲染环境中不存在浏览器的DOM对象：

• ReCaptchaV3Provider初始化过程中，会调用makeDiv函数尝试创建DOM元素并执行appendChild操作，但在Node.js服务器环境里，document对象是undefined，导致读取appendChild时抛出类型错误。
• 本地运行时是纯浏览器环境，有完整的DOM API支持，所以不会触发该错误；而部署时Firebase Hosting会启动预渲染流程，在服务器端执行Angular的服务器端代码，此时缺少浏览器环境的DOM对象，因此报错。

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