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

Question

尝试@angular/fire在 Angular 11 和@nguniversal/express-engine(SSR) 上运行。当 initAngularFireModule在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 或更高版本的发行说明）。因此，如果您可以接受，那么解决方法可能只是执行以下操作：

# 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 对象现在用于访问其依赖模块的缓存实例（在此提交中）。以前版本的 Angularfire 没有引用这个对象，所以如果你无法升级节点版本，你也可以通过降级到以前版本的 Angularfire 来解决这个问题：

npm i @angular/fire@6.0.5

但是，以前的版本有一些其他问题，也可能会影响您的项目，因此它可能是不行的。由于 Angularfire 区域集成，SSR 服务器在查询数据库时似乎挂了一段时间，如下所述：https : //github.com/angular/angularfire/issues/2420。

希望能帮助到你 ：）