I'm new to the ionic framework world and now I'm trying to create a app for a schoolproject.
To save data in the app I'll be using firebase (for the first time). I try to import Angularfire and FirebaseListObservable to my .ts file but i get this error message:
"TS2305:Module "'C:/Users/matss/myRecords/node_modules/angularfire2/index"' has no exported member 'AngularFire'.
Here's my import in app.module.ts
import { AngularFireModule } from 'angularfire2;
export const firebaseConfig = {
apiKey: "blablabla",
authDomain: "blablabla",
databaseURL: "blablabla",
projectId: "blablabla",
storageBucket: "blablabla",
messagingSenderId: "blablabla"
};
here's my code in excersises.ts, which gives the errormessage:
import { AngularFire, FirebaseListObservable } from 'angularfire2';
constructor(private navParams: NavParams, public nacCtrl: NavController, af: AngularFire){
this.records = af.database.list('/records');
}
As a rookie to this, I haven't found any "good" tutorials, I might use the wrong keywords in my searches..
But for this I followed this tutorial:
https://www.joshmorony.com/building-a-crud-ionic-2-application-with-firebase-angularfire/
Thanks for your help.
I ran into the same issue, however I was able to solve it. I read Josh's article, as I read all of his and he is really good, but recently AngularFire2 was updated from what I understand and that has caused a few changes.
How I solved it was like this:
import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database';
I also imported import { AngularFireModule } from 'angularfire2';
instead of
import { AngularFire } from 'angularfire2';
From what I understand, they are modularising it a lot more so that people can use the functions they want and not have all the overhead. I might be wrong though.
This did work for me however.
So, with your code, it should now look like this:
In your app.module.ts file:
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireModule } from 'angularfire2';
Then import it under the #NgModule tag imports like so:
imports: [
AngularFireModule.initializeApp(firebaseConfig),
AngularFireDatabaseModule
]
Then under your component ts that you are working with. do the following:
import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database';
Then later on you would need to declare it
records: FirebaseListObservable<any[]>;
In your constructor:
constructor(private navParams: NavParams, public nacCtrl: NavController, db: AngularFireDatabase){
this.records = db.list('/records');}
Related
I am trying to upgrade to RNFirebase 6 from 5 and am going to move all my authentications from firebase.js sdk to RNFirebase and I am not sure why this initialization isn't working. I am using service everywhere so no idea what to be doing differently.
import { firebaseConfig } from '../configs/firebase';
import firebase from '#react-native-firebase/app';
import '#react-native-firebase/auth';
import "#react-native-firebase/database"
import "#react-native-firebase/dynamic-links"
import "#react-native-firebase/firestore"
import "#react-native-firebase/functions"
import "#react-native-firebase/iid"
import "#react-native-firebase/in-app-messaging"
import "#react-native-firebase/messaging"
import "#react-native-firebase/remote-config"
import "#react-native-firebase/storage"
import "#react-native-firebase/database"
import "#react-native-firebase/dynamic-links"
import "#react-native-firebase/firestore"
import "#react-native-firebase/functions"
let instance = null;
class FirebaseService {
constructor() {
if (!instance) {
this.app = firebase.initializeApp(firebaseConfig)
firebase.database().setLoggingEnabled(true);
instance = this;
}
return instance;
}
}
const firebaseService = new FirebaseService().app;
export default firebaseService;
So I didn't realize with React-Native-Firebase none of this initialization is needed. I am not sure why the initializeApp is in the docs or used anywhere. Hopefully this helps someone else out in the future since I banged my head against the wall all day
My app is a Flutter Web app. It uses package:firebase/firebase.dart.
I am trying to use the Firebase Emulators UI.
The app is hosted on Firebase and reads and writes to Firestore. But when I use firebase emulators:start the locally hosted app at localhost:5000 is still accessing the production Firestore db.
How do I set this up so that the app running locally uses the Firestore emulator at localhost:8080?
I have found threads like this, but I'm not using cloud_firestore.dart. I've tried similar steps (see UPDATE below), but they don't work in my context.
This is my main.dart file:
import 'package:algolia/algolia.dart';
import 'package:firebase/firebase.dart' as fb;
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:web_flutter/data/repository.dart';
import 'package:web_flutter/pages/auth/login.dart';
import 'package:web_flutter/pages/home/home_page.dart';
import 'package:web_flutter/services/authentication.dart';
Future<void> main() async {
try {
var app = fb.initializeApp(
apiKey: 'someAPIkey',
authDomain: 'some.domain.com',
databaseURL: 'https://somedomain.firebaseio.com',
projectId: 'myProj',
storageBucket: '',
messagingSenderId: 'someId',
appId: '1:9anAppId');
var searchClient = Algolia.init(
applicationId: 'anAppId',
apiKey: 'someAPIkey');
runApp(MyApp(
repository: Repository(app.firestore(), searchClient),
authentication: Authentication(app.auth())));
} on fb.FirebaseJsNotLoadedException catch (e) {
print(e);
}
}
class MyApp extends StatefulWidget {
final Repository repository;
final Authentication authentication;
const MyApp({Key key, this.authentication, this.repository})
: super(key: key);
#override
_MyAppState createState() => _MyAppState();
}
Any thoughts?
Thank you!
UPDATE:
I tried the following but am getting the same results:
import 'package:algolia/algolia.dart';
import 'package:firebase/firebase.dart' as fb;
import 'package:firebase/src/firestore.dart' as fs;
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:web_flutter/data/repository.dart';
import 'package:web_flutter/pages/auth/login.dart';
import 'package:web_flutter/pages/home/home_page.dart';
import 'package:web_flutter/services/authentication.dart';
Future<void> main() async {
try {
var app = fb.initializeApp(
apiKey: 'someAPIkey',
authDomain: 'some.domain.com',
databaseURL: 'https://somedomain.firebaseio.com',
projectId: 'myProj',
storageBucket: '',
messagingSenderId: 'someId',
appId: '1:9anAppId');
var searchClient = Algolia.init(
applicationId: 'anAppId',
apiKey: 'someAPIkey');
// These two lines are new:
var db = app.firestore();
db.settings(fs.Settings(host: 'localhost:8080', ssl: false));
runApp(MyApp(
repository: Repository(db, searchClient),
authentication: Authentication(app.auth())));
} on fb.FirebaseJsNotLoadedException catch (e) {
print(e);
}
}
The key was to import dart:html giving me access to window. From there I was able to do something similar to the JavaScript used in the Firebase docs.
import 'dart:html';
import 'package:algolia/algolia.dart';
import 'package:firebase/firebase.dart' as fb;
import 'package:firebase/firestore.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:web_flutter/data/repository.dart';
import 'package:web_flutter/pages/auth/login.dart';
import 'package:web_flutter/pages/home/home_page.dart';
import 'package:web_flutter/services/authentication.dart';
Future<void> main() async {
try {
var app = fb.initializeApp(firebaseConfig);
if (window.location.hostname == 'localhost') {
app.firestore().settings(Settings(
host: '0.0.0.0:8080',
ssl: false,
));
}
I don't know if the host will be 0.0.0.0 for everyone in all situations. I got this from the host listed when the emulators are started.
I currenlty want to start integrating webpack into my js firebase app.
Currently, I have done import * as firebase from 'firebase/app and added my required dependencies after.
However, when I do that, it says that it could not find the modules with an npm not found warning in console.
import * as firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
import 'firebase/firestore';
Is there any way to fix this?
This included in multiple files, as they all require firebase.
Thank you very much in advance.
I think, it should be working correctly.
Anyway, here is my solution for importing firebase libraries only once.
I have created single file/class, called FirebaseConnector:
import * as firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/functions';
import AppConfig from 'src/js/config/app_config';
const FUNCTIONS_REGION = 'europe-west1';
class FirebaseConnector {
static initFirebase() {
if (!firebase.apps.length) {
firebase.initializeApp(AppConfig.firebase);
}
}
static getDb() {
FirebaseConnector.initFirebase();
return firebase.firestore();
}
static getFunctions() {
FirebaseConnector.initFirebase();
return firebase.app().functions(FUNCTIONS_REGION);
}
}
export default FirebaseConnector;
Whenever I am using something from the Firebase API, I just import that connector and use objects that returns my FirebaseConnector.getDb() and FirebaseConnector.getFunctions(), eg.:
import FirebaseConnector from './firebase_connector';
// ...
const sendEmail = FirebaseConnector.getFunctions().httpsCallable('sendEmail');
// ...
//Login component.ts
import { Component } from '#angular/core';
import {AngularFireAuth} from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import {Router} from '#angular/router';
#Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
constructor(public afAuth: AngularFireAuth , public router: Router) { }
login() {
this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()).then((sucess) => {
this.router.navigate(['/option']);
});
}
angularFire2 version --5.0.0-rc.10
firebase version --4.13.1
I have imported the AngularFireAuthModule and AngularFireModule in my app.module.ts and enabled google authentication in firebase console but am still getting an error message as-this is the error message i get
Please Help !!
did you provided the correct Config for FireBase? With all you auth domain and api keys?
See step 4: AngularFire2 installation Guide
Please don't forget to not post the config here, or to change your values as it contains Secret keys.
I'm getting an error that FirebaseListObservable has no imported member.
Also, it's saying that import * as firebase from 'firebase/app'; is declared but not use.
what's a way I can fix this issue.
import { Injectable } from '#angular/core';
import 'rxjs/add/operator/map';
import { AngularFireAuth } from 'Angularfire2/auth';
import * as firebase from 'firebase/app';
import { AlertController } from 'ionic-angular';
import { Storage} from '#ionic/storage';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
#Injectable()
export class UserServiceProvider {
items: FirebaseListObservable<any>;
// this will be used to find out if a user has been loggged in then nav to another page
success: boolean;
constructor(private afAuth: AngularFireAuth, public alertCtrl: AlertController,
private storage: Storage, private fbDb: AngularFireDatabase) {
// This create a refrence to the users in the database
this.items = fbDb.list('/users')
}
FirebaseListObservable is no longer used in later versions of angularfire2, try using AngularFireList instead:
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
And then:
items: AngularFireList<any>;
If you are using firebase 4.8.1 try downgrading to 4.8.0:
npm install firebase#4.8.0
FirebaselistObservable is not used in the recent update.
Instead you need to import the following library:
import { Observable } from 'rxjs/Observable';
and declare items as:
items: Observable<firebase.User>;
Above implementation would resolve your error