使用angularFire2版本5.0将角度连接到firebase

时间:2017-10-18 00:05:39

标签: angular firebase angular-cli angularfire2

我似乎遇到了一个错误,我无法找到答案。我整天搜索了自述文件和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文件可以提供帮助。

app.module.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 { }

app.component.ts

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();
  }
}

1 个答案:

答案 0 :(得分:1)

我试图从angularFire导入而不是angularfire。

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';

本来应该

    Vector3 tempPos = transform.position;
    Vector3 checkPos = new Vector3(tempPos.x, tempPos.y, Mathf.Round(tempPos.z + 1));
    if (Input.GetKey(KeyCode.W))
    {
        Vector3 direction = checkPos - transform.position;
        Ray ray = new Ray(transform.position, direction);
        RaycastHit hit;
        if (Physics.Raycast(ray, out hit))
        {
            Debug.Log(hit.point);
        }
        Debug.DrawRay(transform.position, direction, Color.black, 20, false);
    }

我认为这是实际错误。这也修复了我得到的ng服务警告。谢谢你们。