将Angular与Firebase一起使用时出现错误

时间:2018-10-09 16:59:08

标签: angular typescript firebase angular5 angular6

我正在尝试从angularfire2 /数据库导入FirebaseListObservable

import { FirebaseListObservable } from 'angularfire2/database';

我遇到错误

的地方
[ts] Module '"/Users/user/Projects/Angular/Old/A4/chat-app/node_modules/angularfire2/database/index"'
     

没有导出的成员“ FirebaseListObservable”。

我要放置我的应用程序的pakage.json文件的完整详细信息

{
  "name": "chat-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "angular-firebase": "^1.1.4",
    "angularfire2": "^5.0.2",
    "core-js": "^2.5.4",
    "firebase": "^5.5.3",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "^6.2.4",
    "@angular/compiler-cli": "^6.0.3",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

我正在将FirebaseListObservable导入到我的服务文件中。我还要输入服务文件的详细信息

chat.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { FirebaseListObservable } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs';
import { AuthService } from '../services/auth.service';
import * as firebase from 'firebase/app';

import { ChatMessage } from '../models/chat-message.model';

@Injectable()
export class ChatService {

  user: firebase.User;
  chatMessages: FirebaseListObservable<ChatMessage[]>;
  chatMessage: ChatMessage;
  userName: Observable<string>;

  constructor( private db: AngularFireDatabase , private afAuth: AngularFireAuth ) { }

getUser() {
  const userId = this.user.uid;
  const path = `/users/${userId}`;
  return this.db.object(path);
}

  sendMessage(msg: string) {
    const timestamp = this.getTimeStamp();
    const email =  'biky700@gmail.com';
    this.chatMessages = this.getMessages();
    this.chatMessages.push({
      message: msg,
      timeSent: timestamp,
      userName:  'Anurag Ranjan',
      email: email });
  }

  getMessages(): FirebaseListObservable<ChatMessage[]> {
    // query to create our message feed binding
    return this.db.list('messages', {
      query: {
        limitToLast: 25,
        orderByKey:  true
      }
    });
  }

  getTimeStamp() {
    const now = new Date();
    const date = now.getUTCFullYear() + '/' +
                 (now.getUTCMonth() + 1) + '/' +
                 now.getUTCDate();
    const time = now.getUTCHours() + ':' +
                 now.getUTCMinutes() + ':' +
                 now.getUTCSeconds();

    return (date + ' ' + time);
  }



 }
}

我在上面提到的chat.service.ts代码中也遇到了另外两个错误

第一个错误

  src / app / services / chat.service.ts(63,1)中的

ERROR:错误TS1128:   需要声明或声明。

第二次错误

在chat.service.ts文件中,一些代码-:

getMessages(): FirebaseListObservable<ChatMessage[]> {
    // query to create our message feed binding
    return this.db.list('messages', {
      query: {
        limitToLast: 25,
        orderByKey:  true
      }
    });
  }

下面给出的一些代码带有红线,当我将鼠标悬停在它们上面时,显示的消息

  

类型'{的参数查询:{limitToLast:数字; orderByKey:布尔值;   }; }”不可分配给“ QueryFn”类型的参数。宾语   文字只能指定已知属性,并且“查询”不存在   在“ QueryFn”类型中。

query: {
            limitToLast: 25,
            orderByKey:  true
          }

错误3

我在顶部提到的导入FirebaseListObservable的问题

1 个答案:

答案 0 :(得分:0)

从AngularFire 2.x及更高版本开始,FirebaseObjectObservable现在称为AngularFireObject。

示例:

import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';
相关问题