Support Topics Documentation Slack YouTube Blog

Sample chat in angular with typescript

in-progress
angular

(Ali Karimu Jarra) #1

I am trying to implement a simple chat in NativeScript with angular. But I can’t get the subscribe channel listener working.

I try doing the below in home.component.ts

import Backendless from “backendless”;

Backendless.initApp(“xxxx”,“xxxxx”);

const channel = Backendless.Messaging.subscribe(“chat”);

@Component({
selector: “Home”,
moduleId: module.id,
templateUrl: “./home.component.html”,
styleUrls:["./home.component.css"]

})

export class HomeComponent implements OnInit {
private channel = Backendless.Messaging.subscribe(“chat”);

 constructor() {

    
}

ngOnInit(): void {
channel.addMessageListener(this.onMessage)
}

private onMessage(message:string){

    console.log("Message:Received: " + message)
}

}


(Vladimir Upirov) #2

Hi Ali
Can you see any errors in browsers dev console or somewhere?


(Ali Karimu Jarra) #3

Nope. Nothing appear in the console.But I can use the same method to publish and it work.


(Vladimir Upirov) #4

ok, could you please provide your AppID?


(Vladimir Upirov) #5

and what version of JS-SDK do you use?


(Ali Karimu Jarra) #6

I try this: console.log(channel) inside ngOnInit and the console output the below:
{
“subscriptions”: {},
“simpleListeners”: {},
“options”: {
“name”: “chat”
},
“waitConnection”: [
null
],
“connection”: {}
}

AppID : 0A91FE1C-8ADC-E608-FFC7-508BFCB33A00


(Ali Karimu Jarra) #7

JS-SDK Version: “version”: “5.2.0”


(Vladimir Upirov) #8

I just check it and it works for me with your App.
Could you zip your project with minimal code to reproduce the issue and send it support@backendless.com


(Vladimir Upirov) #9

But I can use the same method to publish and it work. what do you mean here?


(Ali Karimu Jarra) #10

Im using NativeScript angular.

when I use: channel.publish(“Welcome”); the message is published. I can see it in the sample javascript web app and the Backendless message console.


(Ali Karimu Jarra) #11

OK Will send the zip file.


(Ali Karimu Jarra) #12

Hello Mr. Upirov.

Before I send you the zip file. I create a new NativeScript angular test app with the same functionality in app.component.ts file but Received TypeError: Cannot read property ‘initApp’ of undefined. find below code:

import { Component, OnInit } from “@angular/core”;
import { isAndroid } from “tns-core-modules/platform”;
import Backendless from “backendless”;

Backendless.initApp(“0A91FE1C-8ADC-E608-FFC7-508BFCB33A00”,“7C363079-528B-DE82-FF1F-39CBA52DE300”);
const channel = Backendless.Messaging.subscribe(“chat”);

@Component({
selector: “ns-app”,
moduleId: module.id,
templateUrl: “app.component.html”,
styleUrls: ["./app.component.scss"]
})
export class AppComponent implements OnInit {

constructor() {
    // Use the component constructor to inject providers.
}

ngOnInit(): void {
    // Init your component properties here.
    channel.addMessageListener(this.onMessage);
    console.log(channel);
}

getIconSource(icon: string): string {
    const iconPrefix = isAndroid ? "res://" : "res://tabIcons/";

    return iconPrefix + icon;
}

private onMessage(message:string){

    console.log("Message:Received: " + message)
}

}


(Vladimir Upirov) #13

looks like “backendless” isn’t required, can you see any errors in terminal when your project is running?


(Ali Karimu Jarra) #14

yes:

JS: ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘initApp’ of undefined

JS: TypeError: Cannot read property ‘initApp’ of undefined

JS: at Object.<anonymous> (file:///data/data/org.nativescript.TestChat/files/app/app/home/home.component.js:6:23)

JS: at require (<anonymous>:1:266)

JS: at Object.<anonymous> (file:///data/data/org.nativescript.TestChat/files/app/app/home/home-routing.module.js:5:24)

JS: at require (<anonymous>:1:266)

JS: at Object.<anonymous> (file:///data/data/org.nativescript.TestChat/files/app/app/home/home.module.js:5:29)

JS: at require (<anonymous>:1:266)

JS: at file:///data/data/org.nativescript.TestChat/files/app/tns_modules/tns-core-modules/globals/globals.js:81:32

JS: at new ZoneAwarePromise (file:///data/data/org.nativescript.TestChat/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:902:29)

JS: at Object.import (file:///data/data/org.nativescript.TestChat/files/app/tns_modules/tns-core-modules/globals/globals.js:79:16)

JS: at SystemJsNgModuleLo…


(Vladimir Upirov) #15

ok, send a zip archive of the project to us, We’ll take a look


(Ali Karimu Jarra) #16

Ok. Will send you two Zip Files. The main Project and the Test Project.

Thanks


(Vladimir Upirov) #17

Hi Ali
Yes, we can reproduce the issue, and also I’ve tried to install moment NPM package and it also doesn’t work. Perhaps the issue is somewhere with NativeScript.
So, it requires more investigation, internal ticket for reference is: BKNDLSS-17951
Regards, Vlad