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). 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. Same problem with angular 10 version. Does any one have any clue what to do ?

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:

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.

The solution

The solution that worked for me, was to upgrade node to a version that supports the globalThis (v12 or above release note). 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/).

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). 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:

npm i @angular/[email protected]

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.

Hope it helps :)

Recommended topics

Hot tags