Angular 11 run on SSR @nguniversal/express-engine ReferenceError: globalThis is not defined

Question

正在运行 @angular/fire Angular 11 和 @nguniversal/express-engine (SSR)。当app.module.ts中初始化AngularFireModule时，运行宁命令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/).

在两天前发布的@angular/fire (v6.1.1) 的最新版本中，globalThis 对象现在用于访问其依赖模块的缓存实例（在此commit).以前版本的 Angularfire 没有引用这个对象，所以如果你不能升级节点版本，你也可以通过降级到以前版本的 Angularfire 来解决这个问题：

npm i @angular/fire@6.0.5

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

希望对您有所帮助:)

Angular 11 run on SSR @nguniversal/express-engine ReferenceError: globalThis is not defined

Angular 11 run on SSR @nguniversal/express-engine ReferenceError: globalThis is not defined

firebase

angularfire2

angular