Question

基本上我试图将我的角度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语法迁移问题

1 个答案: