//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.
Related
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've just started a new project using angular cli.
I have set up my firebase config in an environments fire.
I initialise the app in my app module but I get the following error:
Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
App Module
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
// AngularFire and Firestore
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
// Routing
import { AppRouting } from './routing/app-routing';
// Environment
import { environment } from '../environments/environment';
// Components
import { LoginModule } from './login/login.module';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule,
AppRouting,
LoginModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
My login component displays, but when I try to call 'createUserWithEmailAndPassword' I receive the error.
Login Component
import * as firebase from 'firebase';
...
createAccount(){
firebase.auth().createUserWithEmailAndPassword(this.email, this.password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode + ' / ' + errorMessage);
// ...
});
}
I've used the same setup in a previous project which is running on an older cli version. Any idea what this could be?
In your login Component you’re not using angularfire2 which you initialized. You didn’t initialize the standard Firebase sdk
https://github.com/angular/angularfire2/blob/master/docs/auth/getting-started.md
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
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 saw this example for how to subscribe to firebase auth events
this.firebase.onAuth((user) => {})
How can I do the same thing with angularfire2 and ionic2 and angular2 project?
constructor(nav:NavController, private auth: FirebaseAuth) {
auth.onAuth ... // I don't see any subscription events on the firbaseAuth object
}
I saw this syntax in the angularfire2 documentation but not sure what the | syntax means and how to do the same logic from the #Component declartion in the controller code:
import {FirebaseAuth} from 'angularfire2';
#Component({
selector: 'auth-status',
template: `
<div *ng-if="auth | async">You are logged in</div>
<div *ng-if="!(auth | async)">Please log in</div>
`
})
class App {
constructor (#Inject(FirebaseAuth) public auth: FirebaseAuth) {}
}
I don't know about Iconic, but using angularafire2 (2.0.0-beta.2). Here's how to do this. Assuming the project has been setup so that AngularFire is an injectable service. (I followed the instructions at Angularfire2 Github.)
#Component({
.. blah, blah, blah
})
export class MyComponent{
constructor(private AngularFire af){
af.subscribe.auth(auth => {
//the auth object contains the logged in user info
// if one exists.
console.log(auth)
});
}
In order to refer to the auth object from the html template (as in your example), just store the auth object returned by the call to subscribe as member variable. Your template code is just checking non-null to determine that there is a logged in user.
This has been updated in "angularfire2": "^4.0.0-rc.1"
The subscribe is now in authState from the import { AngularFireAuth } from 'angularfire2/auth';
So in your ngModule you need to add
import { AngularFireAuthModule } from 'angularfire2/auth';
And add it to your imports and then in your app.components.ts
this.af.authState.subscribe(auth => {
console.log(auth);
});