[英]Connecting angular to firebase using angularFire2 version 5.0
我似乎有一个错误,我找不到答案。 我一整天都在搜索自述文件和 angularFire 文档。 我在控制台中收到此错误
Error: No provider for InjectionToken FirebaseAppConfigToken!
at injectionError (core.es5.js:1169)
at noProviderError (core.es5.js:1207)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620)
at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
at resolveNgModuleDep (core.es5.js:9492)
at _callFactory (core.es5.js:9556)
at _createProviderInstance$1 (core.es5.js:9506)
at resolveNgModuleDep (core.es5.js:9488)
所以我尝试将它包含在 app.module.ts import { NgModule, InjectionToken } from '@angular/core';
并将其列在 providers 数组中。 然后我得到了休闲错误....
Uncaught Error: Can't resolve all parameters for InjectionToken: (?).
at syntaxError (compiler.es5.js:1694)
at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getDependenciesMetadata (compiler.es5.js:15781)
at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getTypeMetadata (compiler.es5.js:15649)
at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getInjectableMetadata (compiler.es5.js:15635)
at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getProviderMetadata (compiler.es5.js:15926)
at compiler.es5.js:15855
at Array.forEach (<anonymous>)
at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getProvidersMetadata (compiler.es5.js:15815)
at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15470)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules (compiler.es5.js:26826)
我没有使用任何 firebase 授权方法。 我只是试图连接到我的 firebase 数据库并使用它。
我还想提一下,我确实将 firebase 控制台中的读写规则设置为 true,所以我认为这不是问题。 我还在environments/environment.prod.ts and environments.ts
文件中包含了我的 firebaseConfig 对象。 然后我将其传递到app.module.ts
的导入数组中,例如AngularFireModule.initializeApp(environment.firebase)
如果有人能帮助我阐明这个话题,我将不胜感激。 谢谢!
我想 id 包含我的 app.module.ts 和 app.component.ts 文件来提供帮助。
import { InjectionToken } from '@angular/core';
// Modules
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
// Firebase Modules
import { AngularFireModule } from 'angularFire2';
import { AngularFireAuthModule } from 'angularFire2/auth';
import { AngularFirestoreModule, AngularFirestore } from 'angularfire2/firestore';
// Components
import { AppComponent } from './app.component';
// Services
// environment
import { environment } from './../environments/environment';
// testing firebase config options environment param
console.log(environment.firebase);
// Set up like the example from the angualrFirebase install guide
// https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md#6-setup-individual-ngmodules
// I kept this project as simple as possible to focus on..
// Debugging the firebase and angularFire2 issue I'm experiencing.
// Even after trying to emulate the example use code from the angularFire2 repo,
// I'm still experiencing the same error.
// ERROR Error: No provider for InjectionToken FirebaseAppConfigToken!
// If I include InjectionToken as a provider I get the other error I was experiencing
// Uncaught Error: Can't resolve all parameters for InjectionToken: (?).
// Including angularFirestore as a provider throws a different error...
// I dont think I should have to list any providers though from what I can gather form the
// angularFire2 docs
// Uncaught Error: Can't resolve all parameters for AngularFirestore: ([object Object], ?).
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpModule,
AngularFireModule.initializeApp(environment.firebase, 'test-blog-app'),
AngularFirestoreModule,
AngularFireAuthModule
],
providers: [
// AngularFirestore,
// InjectionToken
],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
// This file is based off of the angularFire github repository
// https://github.com/angular/angularfire2#example-use
@Component({
selector: 'app-root',
template: `
<ul>
<li *ngFor="let post of posts | async">
{{ post.title }}
</li>
</ul>
`
})
export class AppComponent {
posts: Observable<any[]>;
constructor(db: AngularFirestore) {
this.posts = db.collection('posts').valueChanges();
}
}
我试图从 angularFire 而不是 angularfire 导入。
import { AngularFireModule } from 'angularFire2';
import { AngularFireAuthModule } from 'angularFire2/auth';
本来应该
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
我相信这是实际的错误。 这也修复了我收到的 ng serve 警告。 谢谢你们。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.