title: Angular 4 - TypeError: _co.send is not a function. (In '_co.send($event)', '_co.send' is undefined)
body: <p>I am trying to create real-time chat between Django backend and Angular 4 frontend using PostgreSQL database. I would like to input my own text on frontend, press enter and send it. I get an error in Angular 4 - <code>TypeError: _co.send is not a function. (In '_co.send($event)', '_co.send' is undefined)</code>. I am not sure where is a problem. Any ideas what is wrong?</p>
  
  <p>app.component.html:</p>
  
  <pre><code>&lt;button (click)="sendMsg()"&gt;Send Message&lt;/button&gt;
  
  &lt;h4&gt;Type away! Press [enter] when done.&lt;/h4&gt;
  &lt;div&gt;&lt;key-up3 (keyup7)="send($event)"&gt;&lt;/key-up3&gt;&lt;/div&gt;
  
  &lt;h4&gt;Little Tour of Heroes&lt;/h4&gt;
  &lt;p&gt;&lt;i&gt;Add a new hero&lt;/i&gt;&lt;/p&gt;
  &lt;div&gt;&lt;little-tour&gt;&lt;/little-tour&gt;&lt;/div&gt;
  </code></pre>
  
  <p>app.component.ts:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { WebsocketService } from './websocket.service';
  import { ChatService } from './chat.service';
  import { Output, EventEmitter } from '@angular/core';
  import {enableProdMode} from '@angular/core';
  
  enableProdMode();
  
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [ WebsocketService, ChatService ]
  })
  export class AppComponent {
  
      constructor(private chatService: ChatService) {
          chatService.messages.subscribe(msg =&gt; {
        console.log("Response from websocket: " + msg.message);
          });
      }
  
      private message = {
          message: 'this is a test message'
      }
  
    sendMsg() {
          console.log('new message from client to websocket: ', this.message);
          this.chatService.messages.next(this.message);
          this.message.message = 'this is a test message2';
      }
  
  
  
  }
  
  @Component({
    selector: 'key-up3',
    template: `
      &lt;input #box (keyup.enter)="keyup7.emit(box.value)"&gt;
      &lt;p&gt;{{value}}&lt;/p&gt;
    `
  })
  export class KeyUpComponent_v3 {
     @Output() keyup7 = new EventEmitter&lt;string&gt;();
  }
  </code></pre>
  
  <p>websocket.service.ts:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import * as Rx from 'rxjs/Rx';
  
  @Injectable()
  export class WebsocketService {
    constructor() { }
  
    private subject: Rx.Subject&lt;MessageEvent&gt;;
  
    public connect(url): Rx.Subject&lt;MessageEvent&gt; {
      if (!this.subject) {
        this.subject = this.create(url);
        console.log("Successfully connected: " + url);
      }
      return this.subject;
    }
  
    private create(url): Rx.Subject&lt;MessageEvent&gt; {
      let ws = new WebSocket(url);
  
      let observable = Rx.Observable.create(
      (obs: Rx.Observer&lt;MessageEvent&gt;) =&gt; {
          ws.onmessage = obs.next.bind(obs);
          ws.onerror = obs.error.bind(obs);
          ws.onclose = obs.complete.bind(obs);
          return ws.close.bind(ws);
      })
  let observer = {
          next: (data: Object) =&gt; {
              if (ws.readyState === WebSocket.OPEN) {
                  ws.send(JSON.stringify(data));
              }
          }
      }
      return Rx.Subject.create(observer, observable);
    }
  
  }
  </code></pre>
  
  <p>chat.service.ts:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Observable, Subject } from 'rxjs/Rx';
  import { WebsocketService } from './websocket.service';
  
  const CHAT_URL = 'ws://localhost:8000/';
  
  export interface Message {
      message: string
  }
  
  @Injectable()
  export class ChatService {
      public messages: Subject&lt;Message&gt;;
  
      constructor(wsService: WebsocketService) {
          this.messages = &lt;Subject&lt;Message&gt;&gt;wsService
              .connect(CHAT_URL)
              .map((response: MessageEvent): Message =&gt; {
                  let data = JSON.parse(response.data);
                  return {
                      message: data.message
                  }
              });
      }
  }
  </code></pre>