[英]Angular 11 run on SSR @nguniversal/express-engine ReferenceError: globalThis is not defined
Trying to run @angular/fire
on Angular 11 and @nguniversal/express-engine
(SSR).尝试在 Angular 11 和@nguniversal/express-engine
(SSR) 上运行@angular/fire
。 When init AngularFireModule
in app.module.ts
there are error when running command npm run dev:ssr
or npm run serve:ssr
it is ok when ng serve
.当在app.module.ts
初始化AngularFireModule
时,运行命令npm run dev:ssr
或npm run serve:ssr
时出现错误,当ng serve
。 Same problem with angular 10 version. angular 10 版本也有同样的问题。 Does any one have any clue what to do ?有没有人知道该怎么做?
app.module.ts: 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 { }
In server/main.js file Error:在 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)
I was just facing a similar issue while trying to prerender my Angular 11 App using Firebase Database.我在尝试使用 Firebase 数据库预渲染我的 Angular 11 应用程序时遇到了类似的问题。
The solution解决方案
The solution that worked for me, was to upgrade node to a version that supports the globalThis (v12 or above release note ).对我有用的解决方案是将节点升级到支持 globalThis 的版本(v12 或更高版本的发行说明)。 So if that is okay with you, the fix could simply be to do something like this:因此,如果您可以接受,那么解决方法可能只是执行以下操作:
# Install and use node version 12+
nvm install 14
nvm use 14
# Persist the node version
nvm alias default 14
Explanation解释
The globalThis object was introduced in ES10 (ES2019) to create a uniform way of accessing global variables in all js environments substituting 'window', 'self' or 'frames' (read more here https://www.w3schools.io/javascript/es10-globalthis/ ). globalThis 对象是在 ES10 (ES2019) 中引入的,用于创建一种在所有 js 环境中访问全局变量的统一方式,替换为“window”、“self”或“frames”(在此处阅读更多信息https://www.w3schools.io/javascript /es10-globalthis/ )。
In the latest release of @angular/fire (v6.1.1) which was release 2 days ago, the globalThis object is now used to access a cached instance of its dependency modules (in this commit ).在 2 天前发布的最新版 @angular/fire (v6.1.1) 中, globalThis 对象现在用于访问其依赖模块的缓存实例(在此提交中)。 Previous version of Angularfire did not reference this object, so if it's not possible for you to upgrade the node version you might also resolve the issue by downgrading to the previous version of Angularfire:以前版本的 Angularfire 没有引用这个对象,所以如果你无法升级节点版本,你也可以通过降级到以前版本的 Angularfire 来解决这个问题:
npm i @angular/fire@6.0.5
However, the previous version has some other issue that also might impact your project so it's probably a no go.但是,以前的版本有一些其他问题,也可能会影响您的项目,因此它可能是不行的。 The SSR server seems to hang for some time when querying the database due to Angularfire zone integration, as described here: https://github.com/angular/angularfire/issues/2420 .由于 Angularfire 区域集成,SSR 服务器在查询数据库时似乎挂了一段时间,如下所述: https : //github.com/angular/angularfire/issues/2420 。
Hope it helps :)希望能帮助到你 :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.