11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour, je suis débutante en TypeSript et Angular, et je souhaite réaliser un tchat.
J'ai un composant 'chat-window' qui permet de créer une fenêtre de discussion. J'aimerai que l'utilisateur puisse avoir plusieurs fenêtres de discussion d'ouvertes. J'ai donc créé un service 'windowsService' afin de pouvoir créer plusieurs composants 'chat-window'.

Hors, lorsque j'appelle mon service, cela me met une erreur :

src/app/chat-threads/chat-threads.component.ts (71,39): Argument of type 'Window' is not assignable to parameter of type 'Window'.
  Property 'applicationCache' is missing in type 'Window'.


Je n'arrive pas à comprendre pourquoi j'ai cette erreur ..

Voici mon code: chat-threads.component.ts :

import {
  Component,
  OnInit,
  Inject
} from '@angular/core';
import * as _ from 'lodash';
import { Observable } from 'rxjs';
import { Thread } from '../thread/thread.model';
import { ThreadsService } from '../thread/threads.service';
import { Message } from '../message/message.model';
import { MessagesService } from '../message/messages.service';
import { WindowsService } from '../window/windows.service';
import { Window } from '../window/window.model';

@Component({
    selector: 'chat-threads',
    templateUrl: './chat-threads.component.html',
    styleUrls: ['./chat-threads.component.css'],
    providers: [WindowsService]
})
export class ChatThreadsComponent implements OnInit {
  unreadMessagesCount: number;
  threads: Observable<any>;
  currentWindow: Window;
  currentThread: Thread;

  constructor(public threadsService: ThreadsService,
              public messagesService: MessagesService,
              public windowsService: WindowsService) {
    this.threads = threadsService.orderedThreads;
  }


  ngOnInit(): void {
    this.messagesService.messages
        .combineLatest(
            this.threadsService.currentThread,
            (messages: Message[], currentThread: Thread) =>
                [currentThread, messages] )

        .subscribe(([currentThread, messages]: [Thread, Message[]]) => {
          this.unreadMessagesCount =
              _.reduce(
                  messages,
                  (sum: number, m: Message) => {
                    const messageIsInCurrentThread: boolean = m.thread &&
                        currentThread &&
                        (currentThread.id === m.thread.id);
                    if (m && !m.isRead && !messageIsInCurrentThread) {
                            sum++;
                    }
                    return (sum);
                  },
                  0);
        });
    this.windowsService.newWindows.subscribe((window: Window) => {
       this.currentWindow = window;
       });
  }

    onReduceChatThreads(): void {
        document.getElementById('chat-threads').classList.toggle('row-reduced');
    }

    onCreateChatWindow(): void{
        const w: Window = this.currentWindow;
        w.thread = this.currentThread;
        this.windowsService.addWindow(w);

        this.currentWindow = new Window();
    }
}


windows.service.ts :

import { Injectable } from '@angular/core';
import { Subject, BehaviorSubject, Observable } from 'rxjs';
import { User } from '../user/user.model';
import { Thread } from '../thread/thread.model';
import { Message } from '../message/message.model';

import { MessagesService } from '../message/messages.service';
import * as _ from 'lodash';

@Injectable()
export class WindowsService {
    newWindows: Subject<Window> = new Subject<Window>();
    create: Subject<Window> = new Subject<Window>();

    constructor() {
        this.newWindows
            .map((data: any) => data.json())
            .subscribe(this.create);
    }

    addWindow(window: Window): void {
        this.newWindows.next(window);
    }
}

export const windowsServiceInjectables: Array<any> = [
    WindowsService
];


windows.model.ts :

import { uuid } from '../util/uuid';
import { User } from '../user/user.model';
import { Thread } from '../thread/thread.model';
import { Message } from '../message/message.model';

export class Window {
    id: string;
    thread: Thread;

    constructor(obj?: any) {
        this.id = obj && obj.id             || uuid();
        this.thread = obj && obj.thread     || null;
    }
}


Merci d'avance Smiley biggrin
Modifié par bzhfloriane (06 Jul 2017 - 17:21)
Bonsoir, est-ce qu'il serait possible de voir la response du serveur?

Apparement, ton serveur renvoie un objet avec la propriété applicationCache.

A partir de là tu as deux solutions :
- tu enleves cette propriété dans l'envoi de data depuis ton serveur
- tu as besoin de cette propriété et tu l'ajoutes dans ton Model Window