问题描述
最近我开始学习将 firebase 的概念与 angular 结合使用.首先,我尝试使登录过程正常工作.目前,当我尝试导航到登录页面时遇到一个令人讨厌的错误,我无法弄清楚是什么导致了错误.我得到的错误是:
Recently I started to learn to use the concept of firebase in combination with angular. As a start, I try to make the login process work. Currently, I get an ennoying error when I try to navigate to the login page and I cannot figure out what is causing the error. The error I get is:
ERROR 错误:未捕获(承诺):错误:StaticInjectorError(AppModule)[AngularFireAuth -> InjectionTokenangularfire2.app.options]:StaticInjectorError(平台:核心)[AngularFireAuth -> InjectionToken angularfire2.app.options]:NullInjectorError:没有 InjectionToken angularfire2.app.options 的提供者!
我该怎么做才能解决这个错误?另外,我看到很多代码使用 angularfire2 而不是 @angular/fire.这两个和我实际应该使用哪个有什么区别?
What do I have to do resolve this error? Also, I see a lot of code using angularfire2 instead of @angular/fire. What is the difference between these 2 and which should I actually use?
这是我目前的代码:
app.module.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");
}
}
login.component.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);
}
);
}
}
authentication.service.ts
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);
}
}
pacakge.json 中的依赖项部分
"dependencies": {
"@angular/animations": "~7.1.0",
"@angular/common": "~7.1.0",
"@angular/compiler": "~7.1.0",
"@angular/core": "~7.1.0",
"@angular/forms": "~7.1.0",
"@angular/platform-browser": "~7.1.0",
"@angular/platform-browser-dynamic": "~7.1.0",
"@angular/router": "~7.1.0",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26",
"firebase": "^5.5.5",
"@angular/fire": "^5.0.2"
},
推荐答案
您没有正确初始化您的应用程序.当你导入 AngularFireModule
时,你需要在那里初始化:
You're not initializing your app correctly. When you import the AngularFireModule
, you need to initialize there:
imports: [
AngularFireModule.initializeApp(yourFirebaseConfig),
AngularFireDatabaseModule,
// ... the rest
],
更多在文档中.
它曾经被称为 angularfire2
但在 v5 版本中,它们被转移到了 @angular
范围.从这里开始,它是 @angular/fire
,而不是 angularfire2
.
It used to be called angularfire2
but on the v5 release they got moved to the @angular
scope. From here-on, it's @angular/fire
, not angularfire2
.
这篇关于InjectionToken angularfire2.app.options 没有提供者的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!