webentwicklung-frage-antwort-db.com.de

Ungefangen (in Versprechen): Fehler: Kein Anbieter für AngularFireAuth

Wir haben versucht, uns mit Google-Authentifizierung mit (Firebase/ionic/angularjs 2) .Stundencode anzumelden

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

aber wir bekommen fehler:

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

Bitte führen Sie uns, was in unserem Code funktioniert.

firebaseionic2firebase-authenticationangularfire2google-login
13
Pavan Alapati

Zur Verdeutlichung dessen, was @rmalviya vorgeschlagen hat, nehme ich an, dass Sie sich derzeit auf Ionic Version 3.x.x befinden. Für diese Version haben Sie zwei Möglichkeiten, ein natives Plugin zu importieren und die entsprechenden Anbieter für das Plugin hinzuzufügen.

1) Sie können den Anbieter in Ihre aktuelle TypeScript-Seitendatei einfügen. wie so:

  import { AngularFireAuth } from 'angularfire2/auth';

  ...

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

2) Zweitens können Sie es in Ihre app.modules.ts importieren und das Plugin in die Provider hinzufügen

 import { AngularFireAuth } from 'angularfire2/auth';

 ...

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

Lösung hier 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

Wenn Sie das IonicPageModule System verwenden, müssen Sie AngularFireAuth in Ihren app.module.ts UND in Ihren page.module.ts In das Provider-Array importieren .

app.module.ts:

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

page.module.ts:

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