Chat page socket.io ionic error - html

Question

I have small problem with my chat page :) wanted to do some chat application
I have login that is working but when I click to button chat it's crashing. I am beginner so maybe I can't see correctly. It's in Ionic 3
Home.ts
import { Component } from '#angular/core';
import { NavController, IonicPage } from 'ionic-angular';
import { Auth } from '#ionic/cloud-angular';
import { User } from '#ionic/cloud-angular';
import { LoginPage } from '../login/login';
import { About } from '../about/about';
import { ChatPage } from '../chat/chat';
#IonicPage()
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public auth: Auth, public user: User) {
console.log(user);
}
logout() {
this.auth.logout();
this.navCtrl.setRoot(LoginPage);
}
about(){
this.navCtrl.setRoot(About);
this.navCtrl.push(About);
}
chat(){
this.navCtrl.setRoot(ChatPage);
this.navCtrl.push(ChatPage);
}
}
home.html
<ion-header>
<ion-navbar>
<ion-title>
Home
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="logout()">
<ion-icon name="exit"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Welcome back, {{ user.details.name }}</h2>
<p>
<button ion-button color="secondary" block>Something</button>
</p>
<p>
<button ion-button color="secondary" block (click)="chatPage()">Chat</button>
</p>
<p>
<button ion-button color="secondary" block (click)="about()">About</button>
</p>
</ion-content>
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>
the error that I am getting is
Runtime Error
co.chatPage is not a function
Stack
TypeError: co.chatPage is not a function
at Object.eval [as handleEvent] (ng:///AppModule/HomePage.ngfactory.js:290:24)
at handleEvent (http://localhost:8100/build/main.js:12302:138)
at callWithDebugContext (http://localhost:8100/build/main.js:13510:42)
at Object.debugHandleEvent [as handleEvent] (http://localhost:8100/build/main.js:13098:12)
at dispatchEvent (http://localhost:8100/build/main.js:9277:21)
at http://localhost:8100/build/main.js:9867:38
at HTMLButtonElement.<anonymous> (http://localhost:8100/build/main.js:35897:53)
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)
at HTMLButtonElement.invoke (http://localhost:8100/build/polyfills.js:3:13213)
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) App

Answer 1

The problem is you have called (click)="chatPage()" in your template and the function in your HomePage.ts is chat().
Do:
<button ion-button color="secondary" block (click)="chat()">Chat</button>
Side Note:
You dont have to do both push and setRoot.
setRoot will create an new navigation stack and set the particular page as Root.
push will push the page onto the current navigation stack.
Use one of them based on your requirement.