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
Related
//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 am searching google all day for this problem. I understand why it is not working, but i can't find any solution or other way to get it work. I need to get it working.
I have made my own API that is correctly working when I surf to the url I get a JSON document with values. But now I got the problem with Ionic Asynchronous and Synchronous problems.
Api Service
import { Injectable } from "#angular/core";
import { HttpClient } from "#angular/common/http";
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
#Injectable()
export class ApiService {
constructor(private _http: HttpClient) { }
public getUserById(id: string)
{
return this._http.get(`mysite`);
}
profile.ts
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ApiService} from '../../services/ApiService';
#IonicPage()
#Component({
selector: 'page-profile',
templateUrl: 'profile.html',
})
export class Profile{
user : any;
constructor(public navCtrl: NavController, public navParams: NavParams, private api : ApiService) {
}
ionViewDidLoad() {
this.api.getUserById('test').subscribe(data => {
this.user = data;
console.log(this.user);
});
console.log(this.user);
console.log('ionViewDidLoad ProfilePage');
}
}
you see two console.log(this.user), one inside the subscribe (this ons is working I see my JSON in the console). the second one outside the subscribe (this one gives a error undifined).
After searching on google I found this article that explains why it is not working. But I can't find any other solution on how to do it the correct way, because now I can't use {{user.name}} (for example) on my html.
My question is how should I work around this or how can you use API with Ionic.
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');}
I don't know what I'm doing wrong but somehow i'm not able to read data, though the data is coming from server in response and even the data is getting showed inside service extractData method when I'm putting the console but in component inside subscribe function it is giving me undefined. Help me what I'm doing wrong, what I'm assuming is that this is the problem of async but, I have no idea how correct it.
Any help will be appreciable.
Thanx in advance
Component.ts
import { Component, Input, OnInit } from '#angular/core';
import {AdminService} from './admin.service';
import {logistics} from '../shared/model/logistics';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';
import {Response } from '#angular/http';
#Component({
moduleId:module.id,
selector: 'admin',
templateUrl: 'admin.component.html',
styleUrls:['admin.component.css'],
providers:[AdminService]
})
export class AdminComponent implements OnInit{
#Input() public allocatedAssetsList: logistics[];
mode = 'Observable';
public errorMsg = '';
constructor(private adminService: AdminService) {
}
ngOnInit(){
this.listByEmpId("123");
}
listByEmpId(empId:string){
this.adminService.getAllocatedAssets(empId).subscribe(
res => this.allocatedAssetsList = res,
error => this.errorMessage = <any>error);
}
}
Service.ts
import { Injectable } from '#angular/core';
import { Http, Response } from '#angular/http';
import { Hero } from './hero';
import { Observable } from 'rxjs/Observable';
import { Headers, RequestOptions } from '#angular/http';
import {logistics} from '../shared/model/logistics';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/toPromise';
#Injectable()
export class AdminService {
constructor (private http: Http) {}
private listAssetsURL = '/api/logistics/list/'; // URL to web API
private extractData(res: Response) {
let body = res.json();
return body || { };
}
private handleError (error: any) {
// In a real world app, we might use a remote logging infrastructure
// We'd also dig deeper into the error to get a better message
let errMsg = (error.message) ? error.message :
error.status ? `${error.status} - ${error.statusText}` : 'Server error';
console.error(errMsg); // log to console instead
return Observable.throw(errMsg);
}
getAllocatedAssets (empId: string): Observable<logistics[]> {
this.listAssetsURL+= empId;
//let body = JSON.stringify({ empId });
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.get(this.listAssetsURL)
.map(this.extractData)
.catch(this.handleError);
}
}
listByEmpId(empId:string){
this.adminService.getAllocatedAssets(empId).subscribe(
res => {
this.allocatedAssetsList = res;
console.log(this.allocatedAssetsList);
},
error => this.errorMessage = <any>error);
}
This is probably because you are trying to access your allocatedAssetsLists before the data is actually returned from the service.
If you are accessing it in your template you can use a simple ngIf to make sure you only try to display it once the data is available.
If this is not it, we need more information on your problem to help.
I use redux, react-redux, react-router, and react-router-redux, and redux-thunk.
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import { browserHistory } from 'react-router'
import { routerMiddleware } from 'react-router-redux'
import thunkMiddleware from 'redux-thunk'
...
const reduxRouterMiddleware = routerMiddleware( browserHistory )
const store = createStore(
mainReducer,
applyMiddleware(reduxRouterMiddleware, thunkMiddleware)
)
I was hoping as a result to be able to do thenable dispatch
dispatch(...).then()
but I get the message that then is not a function of dispatch.
How can I accomplish this?
the answer: it depends on what is returned by dispatch; if a promise is returned, then it will be thenable.