We are tried login with google authentication using (Firebase/ionic2/angularjs2).Our code
我们尝试使用google身份验证登录(Firebase / ionic2 / angularjs2)。我们的代码
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
user: Observable<firebase.User>;
constructor(public navCtrl: NavController,public afAuth: AngularFireAuth) {
this.user = afAuth.authState;
}
login() {
this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
}
logout() {
this.afAuth.auth.signOut();
}
}
but we are getting error :
但我们收到错误:
Error: Uncaught (in promise): Error: No provider for AngularFireAuth!
Error: No provider for AngularFireAuth!
Please guide to us what working in our code .
请指导我们在代码中使用的内容。
3 个解决方案
#1
18
A clarification of what @rmalviya suggested, I assume you are currently on Ionic version 3.x.x, for this version you have two ways of importing a native plugin and adding the respective providers for the plugin.
澄清@rmalviya建议的内容,我假设您目前使用的是Ionic版本3.x.x,对于此版本,您有两种方法可以导入本机插件并为插件添加相应的提供程序。
1) You could add the provider in your current page typescript file. like so:
1)您可以在当前页面打字稿文件中添加提供程序。像这样:
import { AngularFireAuth } from 'angularfire2/auth';
...
@Component({
selector: 'page-home',
templateUrl: 'home.html',
providers: [AngularFireAuth]
})
2) Second method you could import it in your app.modules.ts and add the plugin into the providers
2)您可以在app.modules.ts中导入它的第二种方法,并将插件添加到提供程序中
import { AngularFireAuth } from 'angularfire2/auth';
...
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AngularFireAuth
]
#2
2
resolve here https://github.com/iglewski/Annotator/issues/3
解决这里https://github.com/iglewski/Annotator/issues/3
app.component.spec.ts :
app.component.spec.ts:
import { FirebaseApp, FirebaseAppConfig, AngularFireModule } from 'angularfire2';
import { AngularFireAuth, AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import * as firebase from 'firebase/app';
import { firebaseConfig } from './app.module';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
imports: [
AngularFireModule.initializeApp(firebaseConfig), //ajout
AngularFireAuthModule, //ajout
AngularFireDatabaseModule //ajout
],
}).compileComponents();
}));
#3
1
If you're using the IonicPageModule system, then you'll need to import AngularFireAuth
in your app.module.ts
AND in your page.module.ts
in the providers array.
如果您正在使用IonicPageModule系统,那么您需要在您的app.module.ts和导入数组中的page.module.ts中导入AngularFireAuth。
app.module.ts:
app.module.ts:
@NgModule({
...
providers: [AngularFireAuth]
...
page.module.ts:
page.module.ts:
@NgModule({
declarations: [
SignupPage,
],
imports: [
IonicPageModule.forChild(SignupPage)
],
exports: [
SignupPage
],
providers: [
AngularFireAuth
]
})
#1
18
A clarification of what @rmalviya suggested, I assume you are currently on Ionic version 3.x.x, for this version you have two ways of importing a native plugin and adding the respective providers for the plugin.
澄清@rmalviya建议的内容,我假设您目前使用的是Ionic版本3.x.x,对于此版本,您有两种方法可以导入本机插件并为插件添加相应的提供程序。
1) You could add the provider in your current page typescript file. like so:
1)您可以在当前页面打字稿文件中添加提供程序。像这样:
import { AngularFireAuth } from 'angularfire2/auth';
...
@Component({
selector: 'page-home',
templateUrl: 'home.html',
providers: [AngularFireAuth]
})
2) Second method you could import it in your app.modules.ts and add the plugin into the providers
2)您可以在app.modules.ts中导入它的第二种方法,并将插件添加到提供程序中
import { AngularFireAuth } from 'angularfire2/auth';
...
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AngularFireAuth
]
#2
2
resolve here https://github.com/iglewski/Annotator/issues/3
解决这里https://github.com/iglewski/Annotator/issues/3
app.component.spec.ts :
app.component.spec.ts:
import { FirebaseApp, FirebaseAppConfig, AngularFireModule } from 'angularfire2';
import { AngularFireAuth, AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import * as firebase from 'firebase/app';
import { firebaseConfig } from './app.module';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
imports: [
AngularFireModule.initializeApp(firebaseConfig), //ajout
AngularFireAuthModule, //ajout
AngularFireDatabaseModule //ajout
],
}).compileComponents();
}));
#3
1
If you're using the IonicPageModule system, then you'll need to import AngularFireAuth
in your app.module.ts
AND in your page.module.ts
in the providers array.
如果您正在使用IonicPageModule系统,那么您需要在您的app.module.ts和导入数组中的page.module.ts中导入AngularFireAuth。
app.module.ts:
app.module.ts:
@NgModule({
...
providers: [AngularFireAuth]
...
page.module.ts:
page.module.ts:
@NgModule({
declarations: [
SignupPage,
],
imports: [
IonicPageModule.forChild(SignupPage)
],
exports: [
SignupPage
],
providers: [
AngularFireAuth
]
})