#angular #typescript #ionic-framework #firebase #ionic2
#angular #машинопись #ionic-framework #firebase #ionic2
Вопрос:
Я использую Ionic2, и когда я перехожу на localhost: 8100 (после выполнения ionic serve ) Я получаю сообщение об ошибке, которое вы можете увидеть на следующем изображении.
app.component.ts выглядит следующим образом:
import firebase from 'firebase';
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import { HomePage } from '../pages/home/home';
@Component({
template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
rootPage = HomePage;
constructor(platform: Platform) {
platform.ready().then(() => {
var config = {
apiKey: ".....",
authDomain: "......",
databaseURL: ".....",
storageBucket: ".....",
messagingSenderId: "......"
};
firebase.initializeApp(config);
StatusBar.styleDefault();
});
}
}
app.module.ts
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: []
})
export class AppModule {}
Моя системная информация:
Интерфейс командной строки Cordova: 6.3.1
Версия Ionic Framework: 2.0.0-rc.1
Версия ионной командной строки: 2.1.1
Версия библиотеки Ionic App: 2.1.1
Версия скриптов Ionic App: 0.0.36
ОС: Идентификатор распространителя: Ubuntu Описание: Ubuntu 16.04.1 LTS
Версия узла: v4.2.6
Комментарии:
1. Попробуйте:
import * as firebase from 'firebase';2. @Sasxa import * as firebase из «firebase» выдает мне это предупреждение в терминале: накопительный пакет: экспорт «initializeApp» не определяется «/ home / xxxx / Desktop / MyApp / src / app / app.component.ts» и та же ошибка в названии этого вопроса: нет приложения FirebaseСоздано «[ПО УМОЛЧАНИЮ]», а если я импортирую firebase из «firebase», предупреждение не отображается в терминале, но ошибка сохраняется в консоли Google Chrome.
3. Какую версию firebase вы используете?
4. из моего package.json: «firebase»: «^ 3.5.0»
5. Не вижу ничего другого, что могло бы вызвать проблему. Работает ли все остальное, если вы прокомментируете материал firebase?
Ответ №1:
У меня была такая же проблема, и, возможно, у меня есть решение (работает для меня).
Я полностью удалил инициализацию firebase из своего app.components.ts и добавил ее в app.module.ts ПЕРЕД NgModule, например:
...
import * as firebase from 'firebase';
export const firebaseConfig = {
apiKey: "",
authDomain: ".firebaseapp.com",
databaseURL: "https://.firebaseio.com",
storageBucket: ".appspot.com",
messagingSenderId: ""
};
firebase.initializeApp(firebaseConfig); //<-- where the magic happens
@NgModule({
...
Теперь я могу использовать его в своей службе (не забудьте включить вашу службу в app.module.ts ‘providers: [YourService]’)
import firebase from 'firebase';
@Injectable()
export class yourService {
//Here you can use firebase.database(); or firebase.auth(); as you wish and it should work.
}
Надеюсь, это сработает для вас!
Комментарии:
1. Но это не работает с Angular Universe. Мы получаем такие проблемы, как TypeError: firebase.initializeApp не является функцией
2. @Bharat Попробуйте это: этому сообщению 3,5 года, и структура импорта изменилась, попробуйте, если следующий импорт решит вашу проблему: импортируйте * как firebase из ‘firebase / app’;
3. Привет, @Ben, я уже пробовал вышеупомянутый импорт, но не работает и выдает тот же ответ.
Ответ №2:
Изначально я инициализировал firebase в своем приложении таким образом
imports: [
AngularFireDatabaseModule,
AngularFireAuthModule,
AngularFireMessagingModule,
AngularFireModule.initializeApp(environment.firebase)
]
Позже это вызвало ту же проблему, после чего я добавил это до @NgModule
import * as firebase from 'firebase';
firebase.initializeApp(environment.firebase);
Все работает нормально, за исключением этого предупреждения браузера
Редактировать: импорт всегда таким образом, чтобы избежать предупреждений
import firebase from 'firebase/app';