没有提供InjectionToken angularfire2.app.options的提供者

时间:2018-12-18 16:18:18

标签: angular firebase firebase-authentication typescript2.0 angular7

最近,我开始学习结合使用firebase和angular的概念。首先,我尝试使登录过程正常进行。当前,当我尝试导航到登录页面时出现一个令人讨厌的错误,并且我无法弄清楚是什么原因导致了该错误。我得到的错误是:

  

ERROR错误:未捕获(承诺):错误:   StaticInjectorError(AppModule)[AngularFireAuth-> InjectionToken   angularfire2.app.options]:StaticInjectorError(平台:   核心)[AngularFireAuth-> InjectionToken angularfire2.app.options]:       NullInjectorError:没有用于InjectionToken angularfire2.app.options的提供程序!

我该怎么办才能解决此错误?另外,我看到很多使用angularfire2而不是@ angular / fire的代码。这2个和我应该实际使用的有什么区别?

这是我到目前为止的代码:

app.module.ts

List<User> allUsers = new ArrayList<>();
    allUsers.addAll(oldUsers);
    allUsers.addAll(newUsers);

Optional<User> result = allUsers.stream()
                .filter(user -> email.equals(user.email))
                .findAny();

login.component.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from 'environments/environment';
import * as firebase from 'firebase/app';

import { AppComponent } from './app.component';
import { FIREBASE_SERVICES } from './core/firebase/services';
import { AUTHENTICATION_GUARDS } from './features/authentication/guards';
import { AUTHENTICATON_ROUTES } from './features/authentication/authentication.route';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { DashboardComponent } from './features/dashboard/dashboard/dashboard.component';
import { LogInComponent } from './features/authentication/login/login.component';
import { DASHBOARD_ROUTES } from './features/dashboard/dashboard.route';

firebase.initializeApp(environment.firebase);

@NgModule({
    declarations: [
        AppComponent,
        DashboardComponent,
        LogInComponent
    ],
    imports: [
        AngularFireModule,
        AngularFireDatabaseModule,
        AngularFireAuthModule,
        BrowserModule,
        RouterModule,
        FormsModule, 
        ReactiveFormsModule,
        RouterModule.forRoot(AUTHENTICATON_ROUTES),
        RouterModule.forRoot(DASHBOARD_ROUTES)
    ],
    providers: [
        FIREBASE_SERVICES, 
        AUTHENTICATION_GUARDS
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
    constructor() {
        console.log("App module created");
    }
}

authentication.service.ts

import { Component } from '@angular/core';
import { Credentials } from '@app/core/firebase/models';
import { AuthenticationService } from '@app/core/firebase/services/authentication.service';
import { Router } from '@angular/router';

@Component({
    selector: 'app-log-in',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.less']
})
export class LogInComponent {
    emailaddress: string = '';
    password: string = ''; 

    constructor(private readonly _authenticationService: AuthenticationService,
        private readonly _router: Router) {
    }

    login() {
        console.log('log in clicked');

        const credentials = new Credentials(this.emailaddress, this.password);

        this._authenticationService.login(credentials)
            .then(
                () => this._router.navigate['/dashboard'],
                error => {
                    console.log(error);
                    alert(error.message);
                }
            );
    }
}
pacakge.json中的

依赖性部分

import { Injectable } from '@angular/core';
import { isNullOrUndefined } from 'util';
import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase/app';

import { Credentials } from '@app/core/firebase/models';

@Injectable()
export class AuthenticationService {

    constructor(private readonly _angularFireAuthentication: AngularFireAuth) {
        console.log("Authentication Service created");
    }

    login(credentials: Credentials) {
        return new Promise((resolve, reject) => {
            this._angularFireAuthentication.auth
                .signInWithEmailAndPassword(credentials.emailaddress, credentials.password)
                .then(
                    result => resolve(result),
                    error => reject(error)
                );
        });
    }

    logout() {
        return new Promise((resolve, reject) => {
            if (this.isUserLoggedIn()) {
                this._angularFireAuthentication.auth.signOut();
                resolve();
            }
            else {
                reject();
            }
        });
    }

    private isUserLoggedIn(): boolean {
        return !isNullOrUndefined(firebase.auth().currentUser);
    }
}

1 个答案:

答案 0 :(得分:3)

您没有正确初始化应用程序。导入model.predict_classes(X_train)时,需要在此处初始化:

AngularFireModule

更多in the docs

它以前被称为imports: [ AngularFireModule.initializeApp(yourFirebaseConfig), AngularFireDatabaseModule, // ... the rest ], ,但在v5版本中,它们已移至angularfire2范围。从现在开始,它是@angular,而不是@angular/fire