Sample chat in angular with typescript

Messaging Service
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)
}

}

2

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

3

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

4

ok, could you please provide your AppID?

5

and what version of JS-SDK do you use?

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

7

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

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

9

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

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.

11

OK Will send the zip file.

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)
}

}

13

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

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…

15

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

16

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

Thanks

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

18

Hey Ali,

have you been able to solve this issue?