Angularfire2 error TS2305 - firebase

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

No Firebase App '[Default]' Has Been Created Call Initialize

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

How do I use Firebase.dart with Firebase Emulators FireStore db in a Flutter Web app?

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.

Webpack and firebase

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');
// ...

User Authentication failed in angularFire2

//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.

import { AngularFireDatabase, FirebaseListObservable } from “angularfire2/database”;

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

Resources