Question

问题

为什么我会收到“AngularFireAuth的无提供商！”我的导入看起来是否正确时出错？

我有LoginPage在html中使用app-login-form组件。该组件使用我的AuthService来验证用户身份。 AuthService使用AngularFireAuth来执行操作。这一切似乎都很简单，但导入的问题就在那里。

如果我在AngularFireAuth中发表评论AuthService，问题就会消失。我认为在AngularFireModule中导入app.module.ts会全局导入此内容。我还尝试将AngularFireAuth添加到providers app.module.ts，但没有运气。

非常感谢任何帮助。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { FIREBASE_CONFIG } from './app.firebase.config';

import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { AuthService } from '../providers/auth/auth.service';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(FIREBASE_CONFIG),
    AngularFireAuthModule // IMPORTED GLOBALLY HERE!
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    AuthService // MY SERVICE HERE!
  ]
})
export class AppModule { }

LoginFormComponent

import { Component, EventEmitter, Output } from '@angular/core';
import { NavController } from 'ionic-angular';
import { UserAccount } from '../../models/user-account/user-account.interface';
import { LoginResponse } from '../../models/login/login-response.interface';
import { AuthService } from '../../providers/auth/auth.service';

@Component({
  selector: 'app-login-form',
  templateUrl: 'login-form.component.html'
})
export class LoginFormComponent {

  userAccount = {} as UserAccount;

  @Output()
  loginStatus: EventEmitter<LoginResponse>;

  constructor(
    private navCtrl: NavController,
    private auth: AuthService
  ) {
    this.loginStatus = new EventEmitter<LoginResponse>();
  }

  async login() {
    const loginResponse = await this.auth.signInWithEmailAndPassword(this.userAccount);
    this.loginStatus.emit(loginResponse);
  }

  navigateToRegisterPage() {
    this.navCtrl.push('RegisterPage');
  }

}

AuthService

import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularFire2/auth';
import { UserAccount } from '../../models/user-account/user-account.interface';
import { LoginResponse } from '../../models/login/login-response.interface';

@Injectable()
export class AuthService {

  constructor(
    private afAuth: AngularFireAuth
  ) {

  }

  async signInWithEmailAndPassword(userAccount: UserAccount) {
    try {
      return <LoginResponse>{
        result: await this.afAuth.auth.signInWithEmailAndPassword(userAccount.email, userAccount.password)
      }
    } catch (e) {
      return <LoginResponse>{
        error: e
      }
    }
  }

  async createUserWithEmailAndPassword(userAccount: UserAccount){
    try {
      return <LoginResponse>{
        result: await this.afAuth.auth.createUserWithEmailAndPassword(userAccount.email, userAccount.password)
      }
    } catch (e) {
      return <LoginResponse>{
        error: e
      }
    }
  }

}

Answer 1

由于我AngularFire2-repo中的代码与示例代码之间没有任何差异，因为import中的AuthService语句中的拼写错误除外：

import { AngularFireAuth } from 'angularFire2/auth';

应该是：

import { AngularFireAuth } from 'angularfire2/auth';

该路径区分大小写，您的拼写错误会破坏您的代码。

全局导入AngularFireAuthModule的问题

问题

app.module.ts

LoginFormComponent

AuthService

1 个答案: