Discussion :

[bzh.floriane]

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
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

[pterrat]

bonjour, est-ce qu'il serait possible de voir la response du serveur? (via l'onglet network de ta console)

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

[Paleo]

Il existe une définition standard pour "Window", celle de l'objet "window" du DOM.

Dans le fichier "windows.service.ts", il faut ajouter l'import du "Window" du projet :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

import { Window } from '../window/window.model';

Si cet import manque, alors c'est la définition standard du "Window" du DOM qui est utilisée. Donc la méthode "addWindow" attend l'objet Window du DOM. Ce qui explique pourquoi l'appel suivant échoue :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.windowsService.addWindow(w);