Issue
I'm leaning Ionic4 and Angular for an university project (A ToDoList mobile app). I'm trying to get some data from my firestore database with AngularFirestore.collection[...].valueChanges() and to store it in a member variable of my custom service to give it to the component afterwards. But i'm getting both an TS2322 error in Visual Studio Code and in the ionic console.
The error is the following :
Type 'Observable<ToDoList[]>' is missing the following properties from type Observable<ToDoList[]>': buffer, bufferCount, bufferTime, bufferToggle, and 104 more.'
I have followed these two tutorials : -https://angularfirebase.com/lessons/firestore-advanced-usage-angularfire/ -https://www.techiediaries.com/ionic-firestore-crud/ I have tried to move all the related code to the component, change my AngularFirestore.collection line, inspired by https://github.com/angular/angularfire2/blob/master/docs/firestore/collections.md I have also tried removing the import of AngularFireAuth, and the line this.afAuth.auth.signInAnonymously();
My lists service :
import { Injectable } from '@angular/core';
import {ToDoItem, ToDoList} from '../models/todo-model';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
import { AngularFirestoreCollection, AngularFirestore } from '@angular/fire/firestore';
//import { AngularFireAuth } from '@angular/fire/auth';
@Injectable({
providedIn: 'root'
})
export class TodoServiceService {
lists: Observable<ToDoList[]>
listsCollectionRef: AngularFirestoreCollection<ToDoList>
constructor(/*public afAuth: AngularFireAuth, */public afs: AngularFirestore) {
console.log('Hello TodoServiceProvider Provider');
//this.afAuth.auth.signInAnonymously();
this.listsCollectionRef = this.afs.collection<ToDoList>('ToDoLists');
this.lists = this.listsCollectionRef.valueChanges();
}
public getLists(): Observable<ToDoList[]> {
return this.lists;
}
My model :
export interface ToDoList {
uuid: string,
name: string,
items: ToDoItem[]
}
export interface ToDoItem {
uuid?: string,
name: string,
desc?: string,
complete: boolean
}
My component :
import { Component } from '@angular/core';
import { TodoServiceService } from '../services/todo-service.service';
import { ToDoList } from '../models/todo-model';
import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';
import { AlertController } from '@ionic/angular';
@Component({
selector: 'app-lists',
templateUrl: 'lists.page.html',
styleUrls: ['lists.page.scss']
})
export class ListsPage {
sequence: Observable<ToDoList[]>;
constructor(private service: TodoServiceService,
private router: Router,
private alertController: AlertController) {
this.sequence = this.service.getLists();
}
}
My package.json
{
"name": "powerTasks",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "^7.2.2",
"@angular/core": "^7.2.2",
"@angular/fire": "^5.1.2",
"@angular/forms": "^7.2.2",
"@angular/http": "^7.2.2",
"@angular/platform-browser": "^7.2.2",
"@angular/platform-browser-dynamic": "^7.2.2",
"@angular/router": "^7.2.2",
"@ionic-native/core": "^5.0.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.0.0",
"angularfire2": "^5.1.2",
"core-js": "^2.5.4",
"firebase": "^5.9.1",
"promise-polyfill": "^8.1.0",
"rxjs": "~6.3.3",
"zone.js": "~0.8.29"
},
"devDependencies": {
"@angular-devkit/architect": "~0.12.3",
"@angular-devkit/build-angular": "~0.12.3",
"@angular-devkit/core": "~7.2.3",
"@angular-devkit/schematics": "~7.2.3",
"@angular/cli": "~7.2.3",
"@angular/compiler": "~7.2.2",
"@angular/compiler-cli": "~7.2.2",
"@angular/language-service": "~7.2.2",
"@ionic/angular-toolkit": "~1.3.0",
"@ionic/lab": "1.0.20",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~10.12.0",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.4",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~8.0.0",
"tslint": "~5.12.0",
"typescript": "~3.1.6"
},
"description": "An Ionic project"
}
I expect sequence to contain the Observable extracted from the database and actually I cannot compile and I don't know why I am getting this error...
Solution
Edit : I think that I could find a solution.
I had a conflict with rxjs
imports in my project.
During the troubleshooting. I found out that the compiler was trying to compare two rxjs
objects from two different versions (and in different directories).
I uninstalled the rxjs
and rxjs-compat
from my home directory to used then only the ones in the project folder.
To get away with rxjs/Rx
, as JB Nizet said, I used only the two following imports :
- import { Observable } from 'rxjs';
- import 'rxjs/add/observable/of';
(Tell me if there is a way to do it better, somehow)
Answered By - Kyron
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.