web-dev-qa-db-fra.com

Le type 'Observable <>' manque les propriétés suivantes du type 'Observable <>': [voir ci-dessous] (erreur TS2322)

J'appuie Ionic4 et Angular pour un projet universitaire (une application mobile ToDoList). J'essaie d'obtenir des données de ma base de données firestore avec AngularFirestore.collection [...]. ValueChanges () et de le stocker dans une variable membre de mon service personnalisé pour le donner ensuite au composant. Mais je reçois à la fois une erreur TS2322 dans Visual Studio Code et dans la console ionic.

L'erreur est la suivante:

Type 'Observable<ToDoList[]>' is missing the following properties from type Observable<ToDoList[]>': buffer, bufferCount, bufferTime, bufferToggle, and 104 more.'

J'ai suivi ces deux tutoriels: - https://angularfirebase.com/lessons/firestore-advanced-usage-angularfire/ - https://www.techiediaries.com/ionic- firestore-crud / J'ai essayé de déplacer tout le code associé vers le composant, changer ma ligne AngularFirestore.collection, inspiré par https://github.com/angular/angularfire2/blob/master/docs /firestore/collections.md J'ai également essayé de supprimer l'importation d'AngularFireAuth et la ligne this.afAuth.auth.signInAnonymously ();

Mon service de listes:

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

Mon modele :

export interface ToDoList {
    uuid: string,
    name: string,
    items: ToDoItem[]
}

export interface ToDoItem {
    uuid?: string,
    name: string,
    desc?: string,
    complete: boolean
}

Ma composante:

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

Mon 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"
}

Je m'attends à ce que la séquence contienne l'Observable extrait de la base de données et en fait je ne peux pas compiler et je ne sais pas pourquoi j'obtiens cette erreur ...

angulartypescriptionic-frameworkangularfire2ionic4
3
Kyron

Edit: je pense que je pourrais trouver une solution. J'ai eu un conflit avec les importations de rxjs dans mon projet. Pendant le dépannage. J'ai découvert que le compilateur essayait de comparer deux objets rxjs de deux versions différentes (et dans des répertoires différents).

J'ai désinstallé les rxjs et rxjs-compat de mon répertoire personnel pour utiliser ensuite uniquement ceux du dossier du projet.

Pour partir avec rxjs/Rx, comme l'a dit JB Nizet, je n'ai utilisé que les deux importations suivantes:

  • import {Observable} de 'rxjs';
  • import 'rxjs/add/observable/of';

(Dites-moi s'il y a un moyen de le faire mieux, en quelque sorte)

4
Kyron