Использование зарезервированных URL-адресов для Firebase в TypeScript

Question

Я использую TypeScript для реализации приложения Firebase, и существует четыре способа инициализации приложения Firebase в соответствии с документацией Firebase .

Я успешно использую объект FirebaseConfig, но использую«Зарезервированные URL-адреса хостинга» Мне кажется, что я не могу уйти от этого сообщения: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

Я делаю следующее:

import * as firebase from 'firebase/app';
import "firebase/database";

... (inside of Component)

ngOnInit() {
  var testRef = firebase.database().ref('test');
  testRef.on('value', function (snapshot) {
    console.log('test', snapshot.val());
  });
}

Я предполагаю, что база огня.database (), вероятно, вызывается до кода firebase.initializeApp (), но я вижу, что <script src="/__/firebase/init.js"></script> был успешно загружен без ошибки, которая содержит следующее:

if (typeof firebase === 'undefined') throw new Error('hosting/init-error: Firebase SDK not detected. You must include it before /__/firebase/init.js');
firebase.initializeApp({
  "projectId": "....",
  "appId": "....",
  "databaseURL": "....",
  "storageBucket": "....",
  "apiKey": "....",
  "authDomain": "....",
  "messagingSenderId": "...."
});

Я разместил<script src="/__/firebase/init.js"></script> в соответствующем месте, в теге body, как указано в документации. Есть ли что-то еще, что мне нужно сделать дополнительно, чтобы это работало с TypeScript, и чтобы я мог использовать firebase.database () в любом месте внутри Компонента?

Answer 1

Вам нужно инициализировать Firebase перед любым другим вызовом одного из его компонентов.

Вы можете получить конфигурацию из зарезервированного URL-адреса в функции асинхронной / ожидаемой обработки, например:

const load = async () => {
   let config = {}
   const response = await fetch('/__/firebase/init.json')
   config = await response.json()

   ...

затем передайте объект конфигурации на initializeApp() и продолжите загрузку остальной части вашего приложения.