标签: angularfire2

道歉,因为我无法想到包含所有信息的更好方法......当我运行这个时,我得到一个错误说明如下.我跟着Ionic Docs到了T,我无法弄清楚什么可能是错的.

错误:

没有AngularFireDatabase的提供者!

的package.json

App.module.ts

Home.html中

Home.ts

好吧，我刚刚开始使用 Angular Firebase，我已经挠头两天了。大多数教程主要针对旧版本的 firebase

这是我将身份验证服务注入组件时收到的错误

Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[LoginService -> AngularFireAuth -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: 
  NullInjectorError: No provider for InjectionToken angularfire2.app.options!
NullInjectorError: R3InjectorError(AppModule)[LoginService -> AngularFireAuth -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: 
  NullInjectorError: No provider for InjectionToken angularfire2.app.options!

到目前为止，以下链接没有帮助

链接1 链接2 链接3

应用程序模块.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { LoginService } …

我试图在我的项目上访问firebase.storage(),用:

• "@angular":"2.0.0-rc.5"
• "angularfire2":"^ 2.0.0-beta.3-pre2"
• "firebase":"^ 3.3.0"

我找到了这个解决方案,并创建了我的.component.ts文件:

import { Component } from '@angular/core';
declare var firebase : any;

@Component({
  template: '<img [src]="image">'
})
export class RecipesComponent {
  image: string;
  constructor() {
    const storageRef = firebase.storage().ref().child('images/image.png');
    storageRef.getDownloadURL().then(url => this.image = url);
  }
}

我在浏览器控制台中收到以下错误:

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./bstorageComponent class FBStorageComponent_Host - inline template:0:0
ORIGINAL EXCEPTION: Error: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp().
ORIGINAL STACKTRACE:
Error: No Firebase App '[DEFAULT]' …

我正在尝试使用Firebase Auth为Angular 2路由构建AuthGuard.

这是AuthGuard服务:

import { Injectable }             from '@angular/core';
import { CanActivate, Router,
         ActivatedRouteSnapshot,
         RouterStateSnapshot }    from '@angular/router';
import { AuthService }            from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private AuthService: AuthService, 
                private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.AuthService.loggedIn) { return true; }

    this.router.navigate(['login']);
    return false;
  }
}

这是AuthService,它检查用户是否登录并将结果绑定到其构造函数中的"loggedIn"属性.

import { Injectable } from '@angular/core';
import { AngularFire } from 'angularfire2';
import { Router } from '@angular/router';

@Injectable()
export class AuthService {
loggedIn: …

我正在尝试使用AngularFire2创建一个Angular 2应用程序

我正在遵循这个指南.

每次我尝试在我的应用程序模块中导入AngularFireModule然后在导入中执行AngularFireModule.initializeApp(config)我在尝试运行ng服务时遇到以下错误:

ERROR in ./~/firebase/app/shared_promise.js
Module not found: Error: Can't resolve 'promise-polyfill' in 
'C:\Users\username\Desktop\demo-app\node_modules\firebase\app'
@ ./~/firebase/app/shared_promise.js 22:35-62
@ ./~/firebase/app/firebase_app.js
@ ./~/firebase/app.js
@ ./~/firebase/firebase-browser.js
@ ./~/angularfire2/angularfire2.js
@ ./~/angularfire2/index.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.

这就是我的package.json的样子:

 {
     "name": "xxxxx",
     "version": "0.0.0",
     "license": "MIT",
     "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true, …

当我们的用户"阻止第三方Cookie和网站数据"时,会发生此错误.

要复制错误,请转到:

1. 请查看本指南中的 Chrome浏览器"阻止第三方Cookie和网站数据" 参考
2. 转到https://www.deeptent.com
3. 单击"登录"
4. 接下来,您将看到一个空白屏幕.如果您打开浏览器开发人员控制台,您将看到此错误:

我们始终建议用户取消选中阻止第三方Cookie和网站数据; 但是,有些用户仍然喜欢阻止它.

1. 仍然可以通过此阻止登录Gmail.有趣的是,为什么我们的用户无法使用随第三方Cookie和网站数据提供的Firebase-Google OAuth登录？

2. 我们使用Angular2和Firebase构建.用户是否仍然无法通过第三方Cookie和网站数据进行身份验证？

我有一个项目,我需要显示前20名的排行榜,如果用户不在排行榜,他们将出现在他们当前排名的第21位.

有效的方法吗？

我使用Cloud Firestore作为数据库.我认为选择它而不是MongoDB是错误的,但我在项目的中间,所以我必须使用Cloud Firestore.

该应用程序将由30K用户使用.没有获得所有30k用户,有没有办法做到这一点？

 this.authProvider.afs.collection('profiles', ref => ref.where('status', '==', 1)
        .where('point', '>', 0)
        .orderBy('point', 'desc').limit(20))

这是我为获得前20名所做的代码,但如果他们不在前20名,那么获得当前登录用户排名的最佳做法是什么？

我需要声明这个变量来输入任何？这显示在我的HTML模板中的可视代码编辑器中.

产品form.component.html

<div class="row">

  <div class="col-md-6">
      <form #form="ngForm" (ngSubmit)="save(form.value)">

            <div class="form-group">
              <label for="title">Title</label>
              <input #title="ngModel" [(ngModel)]="product.title" name="title" id="title" type="text" class="form-control" required>
              <div class="alert alert-danger" *ngIf="title.touched && title.invalid">
                Title is required.
              </div>
            </div>

            <div class="form-group">
                <label for="price">Price</label>
                <div class="input-group">
                  <span class="input-group-addon">$</span>
                  <input #price="ngModel" ngModel [(ngModel)]="product.price" name="price" id="price" type="number" class="form-control" required [min]="0">
                </div>
                <div class="alert alert-danger" *ngIf="price.touched && price.invalid">
                  <div *ngIf="price.errors.required">Price is required.</div>
                  <div *ngIf="price.errors.min">Price should be 0 or higher.</div>
                </div>
            </div>

            <div class="form-group">
                <label for="category">Category</label>
                <select #category="ngModel" ngModel [(ngModel)]="product.category" name="category" id="category" …

我正在开发一个Angular 2应用程序,我需要在列表中更改列的顺序,单击标题(作为数据表工作),我从Angularfire 2文档示例中得到一个想法,这是我的代码:( grupos.component.ts)

import { Component, OnInit } from '@angular/core';
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable    }  from 'angularfire2';
import { Subject } from 'rxjs/Subject';
import {AF} from "../providers/af";
import { Router } from "@angular/router";
{ EditGpoComponent } from '../edit-gpo/edit-gpo.component';

@Component({
  selector: 'app-grupos',
  templateUrl: './grupos.component.html',
  styleUrls: ['./grupos.component.css']
})

export class GruposComponent implements OnInit {
  public newMessage: string;
  eventos: FirebaseListObservable<any[]>;
  sizeSubject: Subject <any>;

 constructor( af: AngularFire, private router: Router ) {
    this.sizeSubject = new Subject();
    this.eventos = af.database.list('/eventos', {
          query: { …

我有以下代码:

//Loop: For each user ID/Role ID, get the data
userMeta.forEach((businessRole) => {
  Observable.forkJoin(
    af.database.object('/roles/'+businessRole.$value),
    af.database.object('/users/'+businessRole.$key)
  ).subscribe(
    data => {
      console.log("Data received");
      data[1].role = data[0];
      this.users.push(data[1]);
    },
    err => console.error(err)
  );

我试图订阅使用2个observable的结果forkJoin.

由于某些原因,未显示"已接收数据"消息.

我的userMeta变量在console.log中看起来很好:

怎么了？

更新:以下代码也不返回任何内容

let source = Observable.forkJoin(
        af.database.object('/roles/'+businessRole.$value),
        af.database.object('/users/'+businessRole.$key)
    );
    let subscription = source.subscribe(
      function (x) {
    console.log("GOT: " + x);
  },
  function (err) {
    console.log('Error: %s', err);
  },
  function () {
    console.log('Completed');
  });

我实际上要做的是提高以下代码的性能:

//Subscription 3: role ID to role Name
        af.database.object('/roles/'+businessRole.$value) …