I am currently following a guide on creating a chatbot using Angular. I encountered the following error:
ERROR in src/app/chat/chat-dialog/chat-dialog.component.ts(24,6): error TS2339: Property 'scan' does not exist on type 'Observable'.
The versions of Angular & Angular CLI that I am using are 6.0.3.
chat-dialog.component.ts
import { Component, OnInit } from '@angular/core';
import { ChatService, Message } from '../chat.service';
import { Observable } from 'rxjs';
import { scan } from 'rxjs/operators';
@Component({
selector: 'chat-dialog',
templateUrl: './chat-dialog.component.html',
styleUrls: ['./chat-dialog.component.scss']
})
export class ChatDialogComponent implements OnInit {
messages: Observable<Message[]>;
formValue: string;
constructor(public chat: ChatService) { }
ngOnInit() {
// appends to array after each new message is added to feedSource
this.messages = this.chat.conversation.asObservable()
.scan((acc, val) => acc + val);
}
sendMessage() {
this.chat.converse(this.formValue);
this.formValue = '';
}
}
chat.service.ts
import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';
import { ApiAiClient } from 'api-ai-javascript';
import { Observable } from 'rxjs';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
// Message class for displaying messages in the component
export class Message {
constructor(public content: string, public sentBy: string) {}
}
@Injectable()
export class ChatService {
readonly token = environment.dialogflow.angularBot;
readonly client = new ApiAiClient({ accessToken: this.token });
conversation = new BehaviorSubject<Message[]>([]);
constructor() {}
// Sends and receives messages via DialogFlow
converse(msg: string) {
const userMessage = new Message(msg, 'user');
this.update(userMessage);
return this.client.textRequest(msg)
.then(res => {
const speech = res.result.fulfillment.speech;
const botMessage = new Message(speech, 'bot');
this.update(botMessage);
});
}
// Adds message to source
update(msg: Message) {
this.conversation.next([msg]);
}
}