Angular 4 有 Angularfire2 和 Firebase 4 语法迁移问题

Question

基本上我正在尝试将我的 angular 2.3.1 和 firebase 2.x.x 项目转换为最新版本，我在获取正确的语法和导入方面遇到了一些问题。我一直在使用 https://github.com/angular/angularfire2/issues/956 但我很困惑，因为他们导入 { AngularFireAuthModule } 但随后将其引用为 afAuth：AngularfireAuth。我已经设法修复了其他地方的一些错误，但很难让身份验证区域正常工作。即使参考好的资源也会有所帮助，youtube 上的视频似乎是针对旧版本和我最初使用的。

还有任何关于改进 app.modules.ts/我的代码的建议。

ERROR in C:/Users/User/Desktop/Projects/angular2/changingLives/src/app/components/account/login/login.component.ts (2,10): Module '"C:/Users/User/Desktop/Projects/angular2/changingLives/node_modules/angularfire2/index"' has no exported member 'AngularFire'.

ERROR in C:/Users/User/Desktop/Projects/angular2/changingLives/src/app/components/account/login/login.component.ts (21,17): Property 'subscribe' does not exist on type 'AngularFireAuth'.

ERROR in C:/Users/User/Desktop/Projects/angular2/changingLives/src/app/components/account/login/login.component.ts (50,10): Property 'af' does not exist on type 'LoginComponent'.

ERROR in C:/Users/User/Desktop/Projects/angular2/changingLives/src/app/components/account/login/login.component.ts (51,17): Cannot find name 'AuthProviders'.

ERROR in C:/Users/User/Desktop/Projects/angular2/changingLives/src/app/components/account/login/login.component.ts (52,15): Cannot find name 'AuthMethods'.

ERROR in C:/Users/User/Desktop/Projects/angular2/changingLives/src/app/components/account/login/login.component.ts (66,12): Property 'af' does not exist on type 'LoginComponent'.

此模块的代码。

import {Component, OnInit} from '@angular/core';
import { AngularFire } from 'angularfire2';
import { AngularFireAuth } from 'angularfire2/auth';
import {FlashMessagesService} from 'angular2-flash-messages';
import {Router} from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  state: string = '';
  error: any;

  constructor(public afAuth: AngularFireAuth,
              public flashMessage: FlashMessagesService,
              private router: Router) {

    this.afAuth.subscribe(auth => {
      if (auth) {
        this.router.navigateByUrl('/dashboard');
      }
    })
  }

  ngOnInit() {
  }

  loginFb() {
    this.afAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider());
  }

  /*loginFb() {
    this.af.auth.login({
      provider: AuthProviders.Facebook,
      method: AuthMethods.Popup,
    }).then(
      (success) => {
        this.router.navigate(['/dashboard']);
      }).catch(
      (err) => {
        this.error = err;
      }
    )
  }*/

  loginGoogle() {
    this.af.auth.login({
      provider: AuthProviders.Google,
      method: AuthMethods.Popup,
    }).then(
      (success) => {
        this.router.navigate(['/dashboard']);
      }).catch(
      (err) => {
        this.error = err;
      }
    )
  }

  onSubmit(formData) {
    if (formData.valid) {
      console.log(formData.value);
      this.af.auth.login({
        email: formData.value.email,
        password: formData.value.password
      }).then(
        (success) => {
          console.log(success);
          this.router.navigate(['/dashboard'])
        }).catch(
        (err) => {
          console.log(err);
          this.error = err;
        }
      )
    }
  }


  //login() {
  //  this.af.auth.login();
  //}

}

app.modules.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router'; // added to provide routes
import { AngularFireModule } from 'angularfire2'; // Adding angularfire
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { FlashMessagesModule } from 'angular2-flash-messages';

// services
import { FirebaseService } from './services/firebase.service'; // must be added to the providers below.

// component
import { AppComponent } from './app.component';
import { LoginComponent } from './components/account/login/login.component';
import { ListingsComponent } from './components/demo/listings/listings.component';
import { NavbarComponent } from './components/content/navbar/navbar.component';
import { ListingComponent } from './components/demo/listing/listing.component';
import { AddListingComponent } from './components/demo/add-listing/add-listing.component';
import { EditListingComponent } from './components/demo/edit-listing/edit-listing.component';
import { SignupComponent } from './components/account/signup/signup.component';
import { DashboardComponent } from './components/content/dashboard/dashboard.component';
import { LoginEmailComponent } from './components/account/login-email/login-email.component';

export const firebaseConfig = {
    apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    authDomain: 'xxxxxxxxxxxxxxxxxxxx',
    databaseURL: 'xxxxxxxxxxxxxxxx.firebaseio.com',
    projectId: 'xxxxxxxxxxxxxxxxx',
    storageBucket: 'xxxxxxxxxxxxxxxxxx.appspot.com',
    messagingSenderId: 'xxxxxxxxxxxxxx'
};

const appRoutes: Routes = [
  {path: '', component:LoginComponent},
  {path: 'listings', component:ListingsComponent},
  {path: 'listing/:id', component: ListingComponent}, //:id to pass id
  {path: 'add-listing', component:AddListingComponent},
  {path: 'edit-listing/:id', component:EditListingComponent}, //:id to pass id
  {path: 'signup', component:SignupComponent},
  {path: 'dashboard', component:DashboardComponent},
  {path: 'login-email', component:LoginEmailComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ListingsComponent,
    NavbarComponent,
    ListingComponent,
    AddListingComponent,
    EditListingComponent,
    SignupComponent,
    DashboardComponent,
    LoginEmailComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    FlashMessagesModule,
    AngularFireModule.initializeApp(firebaseConfig),
    RouterModule.forRoot(appRoutes), //appRoutes is array of stored routes.
    AngularFireDatabaseModule,
    AngularFireAuthModule

  ],
  providers: [FirebaseService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

也许这段代码会对您有所帮助。使用 firebase SDK 代替 AngularFire 进行身份验证。在您的 LoginComponent 中导入 firebase:

import firebase from 'firebase';

它是构造函数，你可以这样做：

firebase.auth().onAuthStateChanged(
      (user) => {
        if (!user) {
          console.log("NOT LOGGED IN");
        } else {
          console.log("Logged In as: ", user);
        }
      });

对于 Facebook 身份验证非常相似，请参阅文档： https://firebase.google.com/docs/auth/web/facebook-login

Angular 4 有 Angularfire2 和 Firebase 4 语法迁移问题

Angular 4 with Angularfire2 and Firebase 4 Syntax Migration issues

firebase

firebase-authentication

angularfire2

angular