Блог

Попытка запуска @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:projectsassistant-art.comdistAssistant-Artservermain.js:128059:1)
    at Module.spgP (D:projectsassistant-art.comdistAssistant-Artservermain.js:128165:30)
    at __webpack_require__ (D:projectsassistant-art.comdistAssistant-Artservermain.js:26:30)
    at Module.k6Fv (D:projectsassistant-art.comdistAssistant-Artservermain.js:115283:71)
    at __webpack_require__ (D:projectsassistant-art.comdistAssistant-Artservermain.js:26:30)
    at Module.ZAI4 (D:projectsassistant-art.comdistAssistant-Artservermain.js:67605:81)
    at __webpack_require__ (D:projectsassistant-art.comdistAssistant-Artservermain.js:26:30)
    at Module.24aS (D:projectsassistant-art.comdistAssistant-Artservermain.js:38291:69)
    at __webpack_require__ (D:projectsassistant-art.comdistAssistant-Artservermain.js:26:30)
    at Module.K011 (D:projectsassistant-art.comdistAssistant-Artservermain
.js:52876:80)
 

Я только что столкнулся с аналогичной проблемой при попытке предварительной загрузки моего приложения Angular 11 с использованием базы данных Firebase.

Решение

Решение, которое сработало для меня, заключалось в обновлении node до версии, поддерживающей globalThis (примечание к выпуску версии 12 или выше). Так что, если вас это устраивает, исправление может заключаться в том, чтобы просто сделать что-то вроде этого:

 # 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 (версия 6.1.1), которая была выпущена 2 дня назад, объект globalThis теперь используется для доступа к кэшированному экземпляру его модулей зависимостей (в этом коммите). Предыдущая версия Angularfire не ссылалась на этот объект, поэтому, если вы не можете обновить версию узла, вы также можете решить проблему, перейдя на предыдущую версию Angularfire:

npm i @angular/fire@6.0.5

Однако в предыдущей версии есть некоторые другие проблемы, которые также могут повлиять на ваш проект, поэтому, вероятно, это бесполезно. Сервер SSR, похоже, зависает на некоторое время при запросе к базе данных из-за интеграции зоны Angularfire, как описано здесь: https://github.com/angular/angularfire/issues/2420 .

Надеюсь, это поможет 🙂