web-dev-qa-db-fra.com

Uncaught (promis): Erreur: aucun fournisseur pour AngularFireAuth

Nous sommes essayés de nous connecter avec l'authentification Google en utilisant (Firebase/ionic/angularjs 2).

 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();
  }
}

mais nous obtenons une erreur:

Error: Uncaught (in promise): Error: No provider for AngularFireAuth!
Error: No provider for AngularFireAuth!

Veuillez nous indiquer ce qui fonctionne dans notre code.

firebaseionic2firebase-authenticationangularfire2google-login
13
Pavan Alapati

Une clarification de ce que @rmalviya a suggéré, je suppose que vous êtes actuellement sur Ionic version 3.x.x, pour cette version, vous avez deux façons d'importer un plugin natif et d'ajouter les fournisseurs respectifs pour le plugin.

1) Vous pouvez ajouter le fournisseur dans votre fichier TypeScript de page actuelle. ainsi:

  import { AngularFireAuth } from 'angularfire2/auth';

  ...

  @Component({
    selector: 'page-home',
    templateUrl: 'home.html',
    providers: [AngularFireAuth]
  })

2) Deuxième méthode, vous pouvez l'importer dans votre app.modules.ts et ajouter le plugin dans les fournisseurs

 import { AngularFireAuth } from 'angularfire2/auth';

 ...

 providers: [
   StatusBar,
   SplashScreen,
   {provide: ErrorHandler, useClass: IonicErrorHandler},
   AngularFireAuth
 ]
24
TriDiamond

résolvez ici https://github.com/iglewski/Annotator/issues/

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();

  }));
2
user8935431

Si vous utilisez le système IonicPageModule , vous devrez alors importer AngularFireAuth dans votre app.module.ts ET dans votre page.module.ts dans le tableau des fournisseurs.

app.module.ts:

@NgModule({
... 
 providers: [AngularFireAuth]
...

page.module.ts:

@NgModule({
  declarations: [
    SignupPage,
  ],
  imports: [
    IonicPageModule.forChild(SignupPage)
  ],
  exports: [
    SignupPage
  ],
  providers: [
    AngularFireAuth
  ]
})
1
santeko