Angular 11 在 SSR @nguniversal/express-engine ReferenceError : globalThis is not defined 上运行

Question

尝试运行 @angular/fire在 Angular 11 和 @nguniversal/express-engine 上(SSR)。
初始化时AngularFireModule在 app.module.ts运行命令有错误npm run dev:ssr或 npm run serve:ssr ng serve 时没问题. angular 10 版本也有同样的问题。有没有人知道该怎么做？
app.module.ts:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    AppRoutingModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
    AngularFireModule.initializeApp(environment.firebaseConfig),
    // AngularFirestoreModule,
    // AngularFirestoreModule.enablePersistence({ synchronizeTabs: true }),
    // AngularFireFunctionsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在 server/main.js 文件中错误:

globalThis.ɵAngularfireInstanceCache || (globalThis.ɵAngularfireInstanceCache = new Map());
^

ReferenceError: globalThis is not defined
    at Module.<anonymous> (D:\projects\assistant-art.com\dist\Assistant-Art\server\main.js:128059:1)
    at Module.spgP (D:\projects\assistant-art.com\dist\Assistant-Art\server\main.js:128165:30)
    at __webpack_require__ (D:\projects\assistant-art.com\dist\Assistant-Art\server\main.js:26:30)
    at Module.k6Fv (D:\projects\assistant-art.com\dist\Assistant-Art\server\main.js:115283:71)
    at __webpack_require__ (D:\projects\assistant-art.com\dist\Assistant-Art\server\main.js:26:30)
    at Module.ZAI4 (D:\projects\assistant-art.com\dist\Assistant-Art\server\main.js:67605:81)
    at __webpack_require__ (D:\projects\assistant-art.com\dist\Assistant-Art\server\main.js:26:30)
    at Module.24aS (D:\projects\assistant-art.com\dist\Assistant-Art\server\main.js:38291:69)
    at __webpack_require__ (D:\projects\assistant-art.com\dist\Assistant-Art\server\main.js:26:30)
    at Module.K011 (D:\projects\assistant-art.com\dist\Assistant-Art\server\main
.js:52876:80)

Answer 1

我在尝试使用 Firebase 数据库预渲染我的 Angular 11 应用程序时遇到了类似的问题。
解决方案
对我有用的解决方案是将节点升级到支持 globalThis 的版​​本(v12 或更高版本 release note )。因此，如果这对您来说没问题，那么解决方法可能只是做这样的事情:

# Install and use node version 12+ 
nvm install 14
nvm use 14
# Persist the node version
nvm alias default 14

解释
globalThis 对象是在 ES10 (ES2019) 中引入的，以创建一种在所有 js 环境中访问全局变量的统一方式，替换为“window”、“self”或“frames”(在此处阅读更多信息 https://www.w3schools.io/javascript/es10-globalthis/)。
在 2 天前发布的最新版 @angular/fire (v6.1.1) 中，globalThis 对象现在用于访问其依赖模块的缓存实例(在此 commit 中)。以前版本的 Angularfire 没有引用这个对象，所以如果你不能升级节点版本，你也可以通过降级到以前版本的 Angularfire 来解决这个问题: npm i @angular/fire@6.0.5但是，以前的版本还有一些其他问题，也可能会影响您的项目，因此可能不可行。由于 Angularfire 区域集成，在查询数据库时，SSR 服务器似乎会挂起一段时间，如下所述: https://github.com/angular/angularfire/issues/2420 .
希望能帮助到你 :)