Обслуживание Firebase через CDN вместо модулей npm в приложении Angular - PullRequest
Новая
       27

Обслуживание Firebase через CDN вместо модулей npm в приложении Angular

1 голос
/ 02 августа 2020

Я создаю приложение angular, которое использует firebase. Я использовал firebase, выполнив npm install firebase. Но это увеличивает размер моего пакета, который мне не нужен.

Итак, я попытался обслуживать файлы firebase через CDN и вставил ссылки прямо в index.html, например: 

<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-storage.js"></script>
<script src="./init-firebase.js"></script>

и для инициализации firebase я создал файл init-firebase. js с таким содержимым, как: 

let firebaseConfig = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

firebase.initializeApp(firebaseConfig);

Выполнение всего этого должно инициировать для меня проект firebase.

Теперь, что проблема заключается в доступе к приложению firebase изнутри angular. Из-за разницы в модульной системе я не могу получить доступ к приложению firebase изнутри angular

Я попытался написать следующий код в app.module.ts для отладки, но не получил помощи. 

import * as firebase from 'firebase/app';

try {
  console.log(firebase.app.length);
  console.log(firebase.apps[0]);
  firebase.app();
} catch (e) {
  console.log(e);
}

console.log(firebase.initializeApp(environment.firebaseConfig));
console.log(firebase.app.length);

Результат: 

1 <- output 1
undefined <- output 2
FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
    at Object.app (http://localhost:4200/vendor.js:113625:33)
    at Module../src/app/app.module.ts (http://localhost:4200/main.js:202:54)
    at __webpack_require__ (http://localhost:4200/runtime.js:85:30)
    at Module../src/main.ts (http://localhost:4200/main.js:1550:73)
    at __webpack_require__ (http://localhost:4200/runtime.js:85:30)
    at Object.0 (http://localhost:4200/main.js:1573:18)
    at __webpack_require__ (http://localhost:4200/runtime.js:85:30)
    at checkDeferredModules (http://localhost:4200/runtime.js:46:23)
    at Array.webpackJsonpCallback [as push] (http://localhost:4200/runtime.js:33:19)
    at http://localhost:4200/main.js:1:57 <- output 3
FirebaseAppImpl {firebase_: {…}, isDeleted_: false, name_: "[DEFAULT]", automaticDataCollectionEnabled_: false, options_: {…}, …} <- output 4
1 <- output 5

Для дополнительной помощи, если я делаю console.log(firebase.initializeApp(environment.firebaseConfig)); изнутри firebase-init.js, я получаю немного другой формат вывода, чем если бы я делал это из app.module.ts, что указывает на разность потенциалов из-за модульных систем.

Пожалуйста, помогите мне в этом вопросе.

И если вам нужно небольшое репо, которое может воспроизвести проблему, дайте мне знать. Спасибо.

ОБНОВЛЕНИЕ : после написания следующей строки: declare var firebase: any; в файлах, которые я использую firebase, я могу его использовать. Но доступна только функциональность, а не набор текста.

Кто-нибудь знает, как набирать текст? Спасибо.

1 Ответ

1 голос
/ 06 августа 2020

Типы есть только в пакете firebase, если вы его не включите, типов не будет. Вы должны вручную написать типы, которые хотите, или использовать любые, чтобы эта работа работала. Нет другой альтернативы, кроме включения пакета.

...