没有提供InjectionToken angularfire2.app.options的提供者 [英] No provider for InjectionToken angularfire2.app.options
问题描述
最近，我开始学习将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-> InjectionToken angularfire2.app.options]:StaticInjectorError(平台: 核心)[AngularFireAuth-> InjectionToken angularfire2.app.options]: NullInjectorError:没有用于InjectionToken angularfire2.app.options的提供程序！
ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[AngularFireAuth -> InjectionToken angularfire2.app.options]: StaticInjectorError(Platform: core)[AngularFireAuth -> InjectionToken angularfire2.app.options]: NullInjectorError: No provider for InjectionToken angularfire2.app.options!
我该怎么办才能解决此错误?另外，我看到很多使用angularfire2而不是@ angular/fire的代码.这2个和我应该实际使用的有什么区别?
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?
这是我到目前为止的代码:
this is the code I have so far:
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 section in 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的提供者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
