Uncaught (in promise): TypeError

[karolinabagrowska]

I have some problem I am using framework Ionic 3 and got this error in my web browser

Runtime Error
Uncaught (in promise): TypeError: __WEBPACK_IMPORTED_MODULE_3_socket_io_client__.content is not a function TypeError: __WEBPACK_IMPORTED_MODULE_3_socket_io_client__.content is not a function at new ChatPage (http://localhost:8100/build/main.js:61371:80) at createClass (http://localhost:8100/build/main.js:11288:26) at createDirectiveInstance (http://localhost:8100/build/main.js:11124:37) at createViewNodes (http://localhost:8100/build/main.js:12474:49) at createRootView (http://localhost:8100/build/main.js:12379:5) at callWithDebugContext (http://localhost:8100/build/main.js:13510:42) at Object.debugCreateRootView [as createRootView] (http://localhost:8100/build/main.js:12971:12) at ComponentFactory_.create (http://localhost:8100/build/main.js:10315:46) at ComponentFactoryBoundToModule.create (http://localhost:8100/build/main.js:3924:29) at NavControllerBase._viewInit (http://localhost:8100/build/main.js:46989:44) at http://localhost:8100/build/main.js:46781:23 at t.invoke (http://localhost:8100/build/polyfills.js:3:11562) at Object.onInvoke (http://localhost:8100/build/main.js:4622:37) at t.invoke (http://localhost:8100/build/polyfills.js:3:11502) at n.run (http://localhost:8100/build/polyfills.js:3:6468)
Stack
Error: Uncaught (in promise): TypeError: __WEBPACK_IMPORTED_MODULE_3_socket_io_client__.content is not a function
TypeError: __WEBPACK_IMPORTED_MODULE_3_socket_io_client__.content is not a function
    at new ChatPage (http://localhost:8100/build/main.js:61371:80)
    at createClass (http://localhost:8100/build/main.js:11288:26)
    at createDirectiveInstance (http://localhost:8100/build/main.js:11124:37)
    at createViewNodes (http://localhost:8100/build/main.js:12474:49)
    at createRootView (http://localhost:8100/build/main.js:12379:5)
    at callWithDebugContext (http://localhost:8100/build/main.js:13510:42)
    at Object.debugCreateRootView [as createRootView] (http://localhost:8100/build/main.js:12971:12)
    at ComponentFactory_.create (http://localhost:8100/build/main.js:10315:46)
    at ComponentFactoryBoundToModule.create (http://localhost:8100/build/main.js:3924:29)
    at NavControllerBase._viewInit (http://localhost:8100/build/main.js:46989:44)
    at http://localhost:8100/build/main.js:46781:23
    at t.invoke (http://localhost:8100/build/polyfills.js:3:11562)
    at Object.onInvoke (http://localhost:8100/build/main.js:4622:37)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:11502)
    at n.run (http://localhost:8100/build/polyfills.js:3:6468)
    at d (http://localhost:8100/build/polyfills.js:3:3991)
    at l (http://localhost:8100/build/polyfills.js:3:3244)
    at Object.reject (http://localhost:8100/build/polyfills.js:3:2600)
    at NavControllerBase._fireError (http://localhost:8100/build/main.js:46747:16)
    at NavControllerBase._failed (http://localhost:8100/build/main.js:46735:14)
    at http://localhost:8100/build/main.js:46790:59
    at t.invoke (http://localhost:8100/build/polyfills.js:3:11562)
    at Object.onInvoke (http://localhost:8100/build/main.js:4622:37)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:11502)
    at n.run (http://localhost:8100/build/polyfills.js:3:6468)
    at http://localhost:8100/build/polyfills.js:3:3767
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:12256)
    at Object.onInvokeTask (http://localhost:8100/build/main.js:4613:37)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:12177)
    at n.runTask (http://localhost:8100/build/polyfills.js:3:7153)
Ionic Framework: 3.1.1
Ionic App Scripts: 1.3.7
Angular Core: 4.0.2
Angular Compiler CLI: 4.0.2
Node: 7.2.0
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)

My code in chat.ts

import { Component, NgZone, ViewChild } from '@angular/core';
import { NavController, Content } from 'ionic-angular';
import { Validators, FormBuilder } from '@angular/forms';
import * as io from 'socket.io-client';

import { HomePage } from '../home/home';

@Component({
  selector: 'page-chat',
  templateUrl: 'chat.html'
})

export class ChatPage {
  public chatForm: any;
  @ViewChild(Content) content: Content;
  messages:any = [];
  socketHost: string = "http://localhost:3000/";
  socket:any;
  chat:any;
  username:string;
  zone:any;

  chatField: any;

  constructor(public navCtrl: NavController, private fb: FormBuilder){
  this.socket = io.content(this.socketHost);
  this.zone = new NgZone({enableLongStackTrace: false});
  this.socket.on("chat me", (msg) =>{
    this.zone.run (() =>{
      this.messages.push(msg);
      this.content.scrollToBottom();
    });
  });
  this.chatForm = fb.group({
        'chatField': ['', Validators.compose([Validators.required])],
      });

  this.chatField = this.chatForm.controls['chatField'];
  }

  chatSend(v) {
    let data = {
      message: v.chatText,
      username: this.username
    }
    this.socket.emit('new message', data);
    this.chat = "";
  }
  onSubmit(value: string): void {
      if(this.chatForm.valid) {

  }
  }
}

chat.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Chat</ion-title>
  </ion-navbar>
  <ion-input [(ngModel)] = "username" placeholder="Username">  </ion-input>
</ion-header>
<ion-content class="chat">
  <ion-list>
    <div *ngFor="let data of messages">
      <ion-item *ngIf="username === data.username" style="border-right: solid 5px red;">
        <p class="chat-text" item-left>
          <strong> {{data.username}}: </strong>
          {{data.message}}
        </p>
        <p class="chat-time" item-right>
          {{data.date | date:'dd/MM/yyyy'}}

        </p>
      </ion-item>

      <ion-item *ngIf="username !== data.username" style="border-right: solid 5px green;">
        <p class="chat-text" item-left>
          <strong> {{data.username}}: </strong>
          {{data.message}}
        </p>
        <p class="chat-time" item-right>
          {{data.date | date:'dd/MM/yyyy'}}

        </p>
      </ion-item>

      </div>
  </ion-list>
</ion-content>

<ion-footer>
  <form padding [formGroup]="chatForm" (ngSubmit)="onSubmit(chatForm.value)">
    <ion-item>
      <ion-input [(ngModel)]="chatField" name="chatText" required placeholder="type here....."></ion-input>
    </ion-item>
    <br/><br/>
    <button type="submit" ion-button [disabled]="!chatForm.valid" block>Send</button>
  </form>
</ion-footer>

Maybe someone can resolve my problem

[darrachequesne]

Closed due to inactivity, please reopen if needed.